体验AJAX的技术实现Eclipse1.docx

上传人:b****6 文档编号:6614877 上传时间:2023-01-08 格式:DOCX 页数:32 大小:531KB
下载 相关 举报
体验AJAX的技术实现Eclipse1.docx_第1页
第1页 / 共32页
体验AJAX的技术实现Eclipse1.docx_第2页
第2页 / 共32页
体验AJAX的技术实现Eclipse1.docx_第3页
第3页 / 共32页
体验AJAX的技术实现Eclipse1.docx_第4页
第4页 / 共32页
体验AJAX的技术实现Eclipse1.docx_第5页
第5页 / 共32页
点击查看更多>>
下载资源
资源描述

体验AJAX的技术实现Eclipse1.docx

《体验AJAX的技术实现Eclipse1.docx》由会员分享,可在线阅读,更多相关《体验AJAX的技术实现Eclipse1.docx(32页珍藏版)》请在冰豆网上搜索。

体验AJAX的技术实现Eclipse1.docx

体验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')">

点击本超链接,同样可以产生请求

注意其中中的“#”包含了一个位置的信息,默认的锚点是“#top”,也就是网页的上端;而中的“javascript:

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"%>

test

这是在span标签中的对AJAX的请求进行响应的结果!

(3)dealRequestTwo.jsp页面的内容

<%@pagecontentType="text/html;charset=GBK"%>

test

这是在超链接A标签中的对AJAX的请求进行响应的结果!

4、部署该Web应用

(1)配置服务器

(2)部署该Web应用

将自动地在webapp目录下产生出结果

5、执行该页面

(1)启动服务器

由于需要向服务器端发送请求,因此该页面必须部署到服务器中,然后再执行它(http:

//127.0.0.1:

8080/FirstAJAX/index.jsp)。

(2)点击上面的“点击我,可以产生请求”链接,将产生下面的输出

(3)点击上面的“点击本超链接,同样可以产生请求”链接,将产生下面的输出

6、启用IE8中的JavaScript程序的调试功能

7、优化程序代码

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,"showResultOne");

}

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,someOneDivTagID){

varsomeOneDivTagObject=document.getElementById(someOneDivTagID);

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)获得服务器返回的结果值

*/

showResultInSomeOneTag(xmlHttpRequest.responseText,"showResultTwo");

}

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("出现了其它不知名的错误!

");

}

}

}

当然,也可以通过对话框来显示。

注意:

也可以在Eclipse中的浏览器中执行该应用。

利用Servlet组件作为响应的组件

1、添加一个Servlet组件

类名称为FirstAJAXServlet、包名称为com.px1987.servlet

设置该Servlet的URL-Pattern为/firstajaxservlet

2、最后将产生出下面的状态

3、编程该Servlet组件

packagecom.px1987.webcourse.servlet;

importjava.io.IOException;

importjava.io.PrintWriter;

importjavax.servlet.ServletException;

importjavax.servlet.http.HttpServlet;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

publicclassResponseXMLRequestServletextendsHttpServlet{

publicResponseXMLRequestServlet(){

}

publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)

throwsServletException,IOException{

StringrequestType=request.getParameter("requestType");

switch(Integer.parseInt(requestType)){

case1:

doResponseSpanTagClick(request,response);

break;

case2:

doResponseALinkTagClick(request,response);

break;

}

}

publicvoiddoResponseSpanTagCl

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 工程科技 > 材料科学

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1