体验AJAX的技术实现Eclipse1.docx

1、体验AJAX的技术实现Eclipse1体验AJAX的技术实现-AJAX的应用示例1、简单的应用实例（1）问题我们用JavaScript请求一个HTML文件- test.html, 文件的文本内容为“this is test page”。然后我们利用“alert()”方法显示输出test.html页面文件中的内容作为响应输出。（2）新建Web项目 创建一个Web项目 名称为FirstAJAX 将产生出下面的网站（3）在该Web项目中添加一个index.jsp的页面（4）设计该页面的内容无标题文档 点击我，可以产生请求 点击本超链接，同样可以产生请求 点击本超链接，同样可以产生请求注意其中中的“”

2、包含了一个位置的信息，默认的锚点是“top”，也就是网页的上端；而中的“javascript:void(0)”仅仅表示一个死链接。在动态创建时对超链接中的href属性赋值的代码如下：aLinkObj.setAttribute(href,javascript:void 0);（5）再添加一个javascript.js文件以包含我们的JavaScript处理脚本（6）在该文件中包含下面的JavaScript脚本-体验“responseText属性”的应用var xmlHttpRequest;function makeRequestOne(targetRequestURL) /* * （1）创建出X

3、MLHttpRequest对象实例 */ xmlHttpRequest=createXMLHttpRequest(); /* * （3）将获得服务器返回结果的响应输出函数“绑定”到XMLHttpRequest对象实例中 */ xmlHttpRequest.onreadystatechange =getResultFromServer; /* * （4）构造请求的连接，并向服务器端程序发送异步请求 */ xmlHttpRequest.open(get,targetRequestURL,true); xmlHttpRequest.send(null);function createXMLHttpR

4、equest() var localXMLHttpRequest; if(window.XMLHttpRequest) /* * * 表示用户的浏览器为fireFox等非IE系列，则应用XMLHttpRequest对象模板创建出对象实例 */ localXMLHttpRequest=new XMLHttpRequest(); else if(window.ActiveXObject) /* * * 表示用户的浏览器为IE系列，则应用ActiveXObject对象模板创建出对象实例 */ try localXMLHttpRequest=new ActiveXObject(Msxml2.XMLHT

5、TP); catch(e) try localXMLHttpRequest=new ActiveXObject(Microsoft.XMLHTTP); catch(e) window.alert(你的IE浏览器不支持XMLHttpRequest相关的技术实现！); return localXMLHttpRequest; /* * （2）定义一个获得服务器返回结果的响应输出函数 */function getResultFromServer() /* * （5）识别浏览器是否正在接收服务器端程序的返回值吗？并识别是否接收完毕(OK -200)？ */ if(xmlHttpRequest.ready

6、State = 4) if(xmlHttpRequest.status =200) /* * （6）获得服务器返回的结果值提取出所接收的文本结果 */ showResultInSomeOneTag(xmlHttpRequest.responseText); else if(xmlHttpRequest.status =400) window.alert(你的请求无效！); else if(xmlHttpRequest.status =404) window.alert(你向服务端程序请求的URL不正确，未找到请求的目标文件！); else if(xmlHttpRequest.status =5

7、00) window.alert(服务器由于遇到错误而不能完成该请求！); else if(xmlHttpRequest.status =505) window.alert(HTTP版本不受支持！); else window.alert(出现了其它不知名的错误！); /* * 局部更新某个标签内的内容为服务器端程序的返回结果 */function showResultInSomeOneTag(someOneResultFromServer) var someOneDivTagObject=document.getElementById(showResultOne); someOneDivTag

8、Object.style.display=inline; someOneDivTagObject.innerHTML=someOneResultFromServer;/*下面的代码示实现另一个请求的功能*function makeRequestTwo(targetRequestURL) /* * （1）创建出XMLHttpRequest对象实例 */ xmlHttpRequest=createXMLHttpRequest(); /* * （3）将获得服务器返回结果的响应输出函数“绑定”到XMLHttpRequest对象实例中 */ xmlHttpRequest.onreadystatechan

9、ge =getResultTwoFromServer; /* * （4）向服务器端程序发送异步请求 */ xmlHttpRequest.open(get,targetRequestURL,true); xmlHttpRequest.send(null);function getResultTwoFromServer() /* * （5）识别浏览器是否正在接收服务器端程序的返回值吗？并识别是否接收完毕(OK -200)？ */ if(xmlHttpRequest.readyState = 4) if(xmlHttpRequest.status =200) /* * （6）获得服务器返回的结果值

10、*/ showResultTwoInSomeOneTag(xmlHttpRequest.responseText); else if(xmlHttpRequest.status =400) window.alert(你的请求无效！); else if(xmlHttpRequest.status =404) window.alert(你向服务端程序请求的URL不正确，未找到请求的目标文件！); else if(xmlHttpRequest.status =500) window.alert(服务器由于遇到错误而不能完成该请求！); else if(xmlHttpRequest.status =5

11、05) window.alert(HTTP版本不受支持！); else window.alert(出现了其它不知名的错误！); /* * 局部更新某个标签内的内容为服务器端程序的返回结果 */function showResultTwoInSomeOneTag(someOneResultFromServer) var someOneDivTagObject=document.getElementById(showResultTwo); someOneDivTagObject.style.display=inline; someOneDivTagObject.innerHTML=someOneR

12、esultFromServer;2、对本例中的JavaScript代码说明（1）异步请求的产生过程用户点击浏览器上的“请求”链接；接着函数makeRequest()将被调用，其参数文件dealRequestOne.jsp应该与本页面在同一目录下；这样就发起了一个请求，onreadystatechange的执行结果会被传送给getResultFromServer ()。getResultFromServer ()将检查服务器的响应是否成功地收到，如果是-就会将dealRequestOne.jsp文件的输出内容在页面中的某个标签中显示输出。（2）注意在Eclipse中的*.js文件的编码格式的问题

13、（3）改变其文件保存的编码格式（4）选择编码格式为中文编码格式（5）并按下“确定”按钮3、再添加对前面的AJAX请求进行处理的服务器程序（1）本例为了简化，直接采用JSP页面文件为dealRequestOne.jsp（按照MVC的规则应该提供Servlet程序）。（2）该页面的内容为test这是在span标签中的对AJAX的请求进行响应的结果！（3）dealRequestTwo.jsp页面的内容test这是在超链接 A 标签中的对AJAX的请求进行响应的结果！4、部署该Web应用（1）配置服务器（2）部署该Web应用将自动地在webapp目录下产生出结果5、执行该页面（1）启动服务器 由于需要

14、向服务器端发送请求，因此该页面必须部署到服务器中，然后再执行它（http:/127.0.0.1:8080/FirstAJAX/index.jsp）。（2）点击上面的“点击我，可以产生请求”链接，将产生下面的输出（3）点击上面的“点击本超链接，同样可以产生请求”链接，将产生下面的输出6、启用IE8中的JavaScript程序的调试功能7、优化程序代码var xmlHttpRequest;function makeRequestOne(targetRequestURL) /* * （1）创建出XMLHttpRequest对象实例 */ xmlHttpRequest=createXMLHttpReq

15、uest(); /* * （3）将获得服务器返回结果的响应输出函数“绑定”到XMLHttpRequest对象实例中 */ xmlHttpRequest.onreadystatechange =getResultFromServer; /* * （4）构造请求的连接，并向服务器端程序发送异步请求 */ xmlHttpRequest.open(get,targetRequestURL,true); xmlHttpRequest.send(null);function createXMLHttpRequest() var localXMLHttpRequest; if(window.XMLHttpR

16、equest) /* * * 表示用户的浏览器为fireFox等非IE系列，则应用XMLHttpRequest对象模板创建出对象实例 */ localXMLHttpRequest=new XMLHttpRequest(); else if(window.ActiveXObject) /* * * 表示用户的浏览器为IE系列，则应用ActiveXObject对象模板创建出对象实例 */ try localXMLHttpRequest=new ActiveXObject(Msxml2.XMLHTTP); catch(e) try localXMLHttpRequest=new ActiveXObj

17、ect(Microsoft.XMLHTTP); catch(e) window.alert(你的IE浏览器不支持XMLHttpRequest相关的技术实现！); return localXMLHttpRequest; /* * （2）定义一个获得服务器返回结果的响应输出函数 */function getResultFromServer() /* * （5）识别浏览器是否正在接收服务器端程序的返回值吗？并识别是否接收完毕(OK -200)？ */ if(xmlHttpRequest.readyState = 4) if(xmlHttpRequest.status =200) /* * （6）获得

18、服务器返回的结果值提取出所接收的文本结果 */ showResultInSomeOneTag(xmlHttpRequest.responseText, showResultOne); else if(xmlHttpRequest.status =400) window.alert(你的请求无效！); else if(xmlHttpRequest.status =404) window.alert(你向服务端程序请求的URL不正确，未找到请求的目标文件！); else if(xmlHttpRequest.status =500) window.alert(服务器由于遇到错误而不能完成该请求！);

19、 else if(xmlHttpRequest.status =505) window.alert(HTTP版本不受支持！); else window.alert(出现了其它不知名的错误！); /* * 局部更新某个标签内的内容为服务器端程序的返回结果 */function showResultInSomeOneTag(someOneResultFromServer , someOneDivTagID) var someOneDivTagObject=document.getElementById(someOneDivTagID); someOneDivTagObject.style.disp

20、lay=inline; someOneDivTagObject.innerHTML=someOneResultFromServer;/*下面的代码示实现另一个请求的功能*function makeRequestTwo(targetRequestURL) /* * （1）创建出XMLHttpRequest对象实例 */ xmlHttpRequest=createXMLHttpRequest(); /* * （3）将获得服务器返回结果的响应输出函数“绑定”到XMLHttpRequest对象实例中 */ xmlHttpRequest.onreadystatechange =getResultTwoF

21、romServer; /* * （4）向服务器端程序发送异步请求 */ xmlHttpRequest.open(get,targetRequestURL,true); xmlHttpRequest.send(null);function getResultTwoFromServer() /* * （5）识别浏览器是否正在接收服务器端程序的返回值吗？并识别是否接收完毕(OK -200)？ */ if(xmlHttpRequest.readyState = 4) if(xmlHttpRequest.status =200) /* * （6）获得服务器返回的结果值 */ showResultInSo

22、meOneTag(xmlHttpRequest.responseText, showResultTwo); else if(xmlHttpRequest.status =400) window.alert(你的请求无效！); else if(xmlHttpRequest.status =404) window.alert(你向服务端程序请求的URL不正确，未找到请求的目标文件！); else if(xmlHttpRequest.status =500) window.alert(服务器由于遇到错误而不能完成该请求！); else if(xmlHttpRequest.status =505) w

23、indow.alert(HTTP版本不受支持！); else window.alert(出现了其它不知名的错误！); 当然，也可以通过对话框来显示。注意：也可以在Eclipse中的浏览器中执行该应用。利用Servlet组件作为响应的组件1、添加一个Servlet组件类名称为 FirstAJAXServlet、包名称为com.px1987.servlet设置该Servlet的URL-Pattern为/firstajaxservlet2、最后将产生出下面的状态3、编程该Servlet组件package com.px1987.webcourse.servlet;import java.io.IOEx

24、ception;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class ResponseXMLRequestServlet extends HttpServlet public ResponseXMLRequestServlet() publ

25、ic void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException String requestType=request.getParameter(requestType); switch(Integer.parseInt(requestType) case 1: doResponseSpanTagClick(request, response); break; case 2: doResponseALinkTagClick(request, response); break; public void doResponseSpanTagCl