`

Ajax原理

Ajax原理 
阅读更多

 

本文将通过一个具体的例子来展示Ajax的工作原理，通过与传统请求响应方式的对比展现Ajax中处理请求响应的不同方式。在这个示例程序中，所要完成的任务非常简单，仅仅需要输入一个姓名然后提交这个表单，在服务器端处理这个请求，然后在页面显示处理的结果，在下面的示例程序中，将展示通过传统方式和Ajax方式分别处理这个请求响应的具体过程。

传统方式：

 

Java代码 
  1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1"  
  2.     pageEncoding="ISO-8859-1"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
  7. <title>Insert title here</title>  
  8. </head>  
  9. <body>  
  10.     <form action="SayHello.jsp">  
  11.         name:<input type="text" name="name"/>  
  12.         <input type="submit" name="submit"/>  
  13.     </form>  
  14.     <%  
  15.         if(request.getParameter("name")!=null&&request.getParameter("name").length()>0)  
  16.             out.print("Hello "+request.getParameter("name"));  
  17.     %>  
  18. </body>  
  19. </html>  


 

传统方式的实现方式是直接将表单提交到自身的页面，然后在服务器端经过编译后执行其中的Java代码。

Ajax方式（Servlet代码以及配置文件略）：

 

Java代码 
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
  7. <title>SayHello</title>  
  8. <script type="text/javascript">  
  9.     //创建XMLHttpReques对象  
  10.     function createXMLHttpRequest(){  
  11.           
  12.         if(window.XMLHttpRequest){  
  13.             //Mozilla浏览器  
  14.               
  15.             XMLHttpReq=new XMLHttpRequest();  
  16.         }else{  
  17.               
  18.             //IE浏览器  
  19.             if(window.ActiveXObject){  
  20.                 try{  
  21.                     XMLHttpReq=new ActionXObject("Msxm12.XMLHTTP");  
  22.                 }catch(e){  
  23.                     try{  
  24.                         XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");  
  25.                     }catch(e){}  
  26.                 }  
  27.             }  
  28.         }  
  29.     }  
  30.     //处理服务器响应结果  
  31.      function handleResponse() {  
  32.         // 判断对象状态  
  33.         if (XMLHttpReq.readyState == 4) {   
  34.             // 信息已经成功返回，开始处理信息  
  35.            if (XMLHttpReq.status == 200) {   
  36.                 var out = "";  
  37.                 var res = XMLHttpReq.responseXML;  
  38.                 var response= res.getElementsByTagName("response")[0].firstChild.nodeValue;  
  39.                 //5. 解析服务器返回的信息,更新用户界面  
  40.                 document.getElementById("Hello").innerHTML = response;  
  41.                }  
  42.          }  
  43.        }  
  44.     //发送客户端的请求  
  45.     function sendRequest(url){  
  46.         //1.创建XMLHttpRequest  
  47.         createXMLHttpRequest();  
  48.         //2.设置回调函数  
  49.         XMLHttpReq.onreadystatechange=handleResponse;  
  50.         //3.初始化XMLHttpRequest组建并发送请求  
  51.         XMLHttpReq.open("GET",url,true);  
  52.         //发送请求  
  53.         XMLHttpReq.send(null);  
  54.     }  
  55.     //开始调用Ajax的功能  
  56.     function sayHello()  
  57.     {  
  58.         var name=document.getElementById("name").value;  
  59.         //发送请求  
  60.         sendRequest("SayHell?name="+name);  
  61.     }  
  62. </script>  
  63. </head>  
  64. <body>  
  65.     <font size="1">  
  66.         name:<input type="text" id="name"/>  
  67.         <input type="button" value="提交" onclick="sayHello()"/>  
  68.         <div id="Hello"></div>  
  69.     </font>  
  70. </body>  
  71. </html>  


 

代码解析：

1.创建XMLHttpRequest

2.设置回调函数

3.初始化XMLHttpRequest组建并发送请求

4. 服务器返回响应信息

5. 解析服务器返回的信息,更新用户界面

详细调用过程如下java教程网

最终Ajax方式处理请求的效果是通过XMLHttpRequest对象向服务器发送请求，在得到服务器的返回的处理结果以后，文本框中的用户输入信息依然存在，使用Ajax只是刷新了页面的局部区域，把处理的结果展示在页面的指定位置，对于页面的其他部分不会进行刷新。

7
顶
8
踩
分享到：
| Ajax原理
评论
1 楼 lilai 2012-07-08  
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics