体验AJAX的技术实现Eclipse1.docx
- 文档编号：6614877
- 上传时间：2023-01-08
- 格式：DOCX
- 页数：32
- 大小：531KB
体验AJAX的技术实现Eclipse1.docx
《体验AJAX的技术实现Eclipse1.docx》由会员分享，可在线阅读，更多相关《体验AJAX的技术实现Eclipse1.docx（32页珍藏版）》请在冰豆网上搜索。
体验AJAX的技术实现Eclipse1
体验AJAX的技术实现-----AJAX的应用示例
1、简单的应用实例
（1）问题
我们用JavaScript请求一个HTML文件-----test.html,文件的文本内容为“thisistestpage”。
然后我们利用“alert（）”方法显示输出test.html页面文件中的内容作为响应输出。
（2）新建Web项目
●创建一个Web项目
●名称为FirstAJAX
●将产生出下面的网站
（3）在该Web项目中添加一个index.jsp的页面
（4）设计该页面的内容
<%@pagecontentType="text/html;charset=GBK"%>
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http:
//www.w3.org/TR/html4/loose.dtd">
pointer;text-decoration: underline"onclick="makeRequestOne（'dealRequestOne.jsp'）"> 点击我，可以产生请求 点击本超链接，同样可以产生请求 none">
none">
void（0）;"onclick="makeRequestTwo（'dealRequestTwo.jsp'）"> 点击本超链接，同样可以产生请求 注意其中 void（0）”仅仅表示一个死链接。 在动态创建时对超链接中的href属性赋值的代码如下： aLinkObj.setAttribute（"href","javascript: void0"）; （5）再添加一个javascript.js文件以包含我们的JavaScript处理脚本 （6）在该文件中包含下面的JavaScript脚本------体验“responseText属性”的应用 varxmlHttpRequest; functionmakeRequestOne（targetRequestURL）{ /** * （1）创建出XMLHttpRequest对象实例 */ xmlHttpRequest=createXMLHttpRequest（）; /** *（3）将获得服务器返回结果的响应输出函数“绑定”到XMLHttpRequest对象实例中 */ xmlHttpRequest.onreadystatechange=getResultFromServer; /** *（4）构造请求的连接，并向服务器端程序发送异步请求 */ xmlHttpRequest.open（"get",targetRequestURL,true）; xmlHttpRequest.send（null）; } functioncreateXMLHttpRequest（）{ varlocalXMLHttpRequest; if（window.XMLHttpRequest）{ /** * *表示用户的浏览器为fireFox等非IE系列，则应用XMLHttpRequest对象模板创建出对象实例 */ localXMLHttpRequest=newXMLHttpRequest（）; } elseif（window.ActiveXObject）{ /** * *表示用户的浏览器为IE系列，则应用ActiveXObject对象模板创建出对象实例 */ try{ localXMLHttpRequest=newActiveXObject（"Msxml2.XMLHTTP"）; } catch（e）{ try{ localXMLHttpRequest=newActiveXObject（"Microsoft.XMLHTTP"）; } catch（e）{ window.alert（"你的IE浏览器不支持XMLHttpRequest相关的技术实现！ "）; } } } returnlocalXMLHttpRequest; } /** * （2）定义一个获得服务器返回结果的响应输出函数 */ functiongetResultFromServer（）{ /** *（5）识别浏览器是否正在接收服务器端程序的返回值吗？ 并识别是否接收完毕（OK---200）？ */ if（xmlHttpRequest.readyState==4）{ if（xmlHttpRequest.status==200）{ /** *（6）获得服务器返回的结果值——提取出所接收的文本结果 */ showResultInSomeOneTag（xmlHttpRequest.responseText）; } elseif（xmlHttpRequest.status==400）{ window.alert（"你的请求无效！ "）; } elseif（xmlHttpRequest.status==404）{ window.alert（"你向服务端程序请求的URL不正确，未找到请求的目标文件！ "）; } elseif（xmlHttpRequest.status==500）{ window.alert（"服务器由于遇到错误而不能完成该请求！ "）; } elseif（xmlHttpRequest.status==505）{ window.alert（"HTTP版本不受支持！ "）; } else{ window.alert（"出现了其它不知名的错误！ "）; } } } /** *局部更新某个标签内的内容为服务器端程序的返回结果 */ functionshowResultInSomeOneTag（someOneResultFromServer）{ varsomeOneDivTagObject=document.getElementById（"showResultOne"）; someOneDivTagObject.style.display="inline"; someOneDivTagObject.innerHTML=someOneResultFromServer; } //**********下面的代码示实现另一个请求的功能******************************** functionmakeRequestTwo（targetRequestURL）{ /** * （1）创建出XMLHttpRequest对象实例 */ xmlHttpRequest=createXMLHttpRequest（）; /** *（3）将获得服务器返回结果的响应输出函数“绑定”到XMLHttpRequest对象实例中 */ xmlHttpRequest.onreadystatechange=getResultTwoFromServer; /** *（4）向服务器端程序发送异步请求 */ xmlHttpRequest.open（"get",targetRequestURL,true）; xmlHttpRequest.send（null）; } functiongetResultTwoFromServer（）{ /** *（5）识别浏览器是否正在接收服务器端程序的返回值吗？ 并识别是否接收完毕（OK---200）？ */ if（xmlHttpRequest.readyState==4）{ if（xmlHttpRequest.status==200）{ /** *（6）获得服务器返回的结果值 */ showResultTwoInSomeOneTag（xmlHttpRequest.responseText）; } elseif（xmlHttpRequest.status==400）{ window.alert（"你的请求无效！ "）; } elseif（xmlHttpRequest.status==404）{ window.alert（"你向服务端程序请求的URL不正确，未找到请求的目标文件！ "）; } elseif（xmlHttpRequest.status==500）{ window.alert（"服务器由于遇到错误而不能完成该请求！ "）; } elseif（xmlHttpRequest.status==505）{ window.alert（"HTTP版本不受支持！ "）; } else{ window.alert（"出现了其它不知名的错误！ "）; } } } /** *局部更新某个标签内的内容为服务器端程序的返回结果 */ functionshowResultTwoInSomeOneTag（someOneResultFromServer）{ varsomeOneDivTagObject=document.getElementById（"showResultTwo"）; someOneDivTagObject.style.display="inline"; someOneDivTagObject.innerHTML=someOneResultFromServer; } 2、对本例中的JavaScript代码说明 （1）异步请求的产生过程 用户点击浏览器上的“请求”链接；接着函数makeRequest（）将被调用，其参数文件dealRequestOne.jsp应该与本页面在同一目录下；这样就发起了一个请求，onreadystatechange的执行结果会被传送给getResultFromServer（）。 getResultFromServer（）将检查服务器的响应是否成功地收到，如果是-----就会将dealRequestOne.jsp文件的输出内容在页面中的某个标签中显示输出。 （2）注意在Eclipse中的*.js文件的编码格式的问题 （3）改变其文件保存的编码格式 （4）选择编码格式为中文编码格式 （5）并按下“确定”按钮 3、再添加对前面的AJAX请求进行处理的服务器程序 （1）本例为了简化，直接采用JSP页面 文件为dealRequestOne.jsp（按照MVC的规则应该提供Servlet程序）。 （2）该页面的内容为 <%@pagecontentType="text/html;charset=GBK"%>