一、ajax是什么

二、XMLHttpRequest的生命周期

三、ajax的一种简单实现

 

一、ajax是什么

        AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。

        AJAX 是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。

 

　　通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。

        AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

 

　　AJAX 可使因特网应用程序更小、更快，更友好。

二、XMLHttpRequest的生命周期

XMLHttpRequest的readyState的五种状态

状态
名称
描述
0
Uninitialized
初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1
Open
open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2
Sent
Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3
Receiving
所有响应头部都已经接收到。响应体开始接收但未完成。
4
Loaded
HTTP 响应已经完全接收。

XMLHttpRequest的status的几种常用状态

三、ajax的一种简单实现 

今天我们要讲述的是一个页面发出ajax请求后，先将查询到的list信息先返回到另一个jsp网页，然后再将整个jsp网页返回给请求页面的ajax应用。

下面是调用ajax实现的jsp页面

  1. <%@ page language="java" contentType="text/html; charset=utf-8" 
  2.     pageEncoding="utf-8"%> 
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4. <html xmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  7. <link href="css.css" rel="stylesheet" type="text/css" /> 
  8. <script type="text/javascript" src="jsManager.js"></script> 
  9. <title>常熟农村信息化综合平台</title> 
  10. </head> 
  11. <body onload="init();" > 
  12. <div class="main"> 
  13.     <div class="data-box" id="linkContent"> 
  14.       
  15.     </div> 
  16.     <div class="tabs"> 
  17.         <a href="javascript:requestContent('/getview.do?action=listmanagement&sourcetype=1&pagerow=2&pagecolumn=3&currentpage=1');" class="management" id="countryManButton">农村管理</a> 
  18.         </div> 
  19.     <div><img src="p_w_picpaths/bg01.png" /></div> 
  20. </div> 
  21. </div> 
  22. </body> 
  23. </html> 




 


struts.xml中跳转的配置，我们可以看到返回到的是一个jsp页面


  1. <action path="/getview" scope="request" 
  2.             type="com.informational.action.ManageAction"> 
  3.       <forward name="success" path="/page/touch/management.jsp" /> 
  4. </action> 




js中调用ajax核心代码

 


  1. function requestContent(url) {  
  2.     //判断浏览器 
  3.     if (window.XMLHttpRequest) {  
  4.         http_request = new XMLHttpRequest();  
  5.         if (http_request.overrideMimeType) {  
  6.             http_request.overrideMimeType('text/xml');  
  7.         }  
  8.     } else if (window.ActiveXObject) {  
  9.         try {  
  10.             http_request = new ActiveXObject("Msxml2.XMLHTTP");  
  11.         } catch (e) {  
  12.             try {  
  13.                 http_request = new ActiveXObject("Microsoft.XMLHTTP");  
  14.             } catch (e) {  
  15.             }  
  16.         }  
  17.     }  
  18.     if (!http_request) {  
  19.         alert("您的浏览器不支持当前操作，请使用 IE 5.0 以上版本!");  
  20.         return false;  
  21.     }  
  22.  
  23.     http_request.open('GET', url, true);  
  24.  
  25.     // 禁止IE缓存  
  26.     http_request.setRequestHeader("If-Modified-Since", "0");  
  27.     // 发送数据  
  28.     http_request.send(null);  
  29.  
  30.     // 判断ajax状态，为4时表示http响应已经完全接收
  31.     if (http_request.readyState == 4) {  
  32.         // 判断ajax状态，为200时表示信息已成功返回，可以开始处理
  33.         if (http_request.status == 0 || http_request.status == 200) {  
  34.             // 这边的responseText返回的就是上面struts中返回的management.jsp
  35.             document.getElementById("linkContent").innerHTML = http_request.responseText;  
  36.         }  
  37.     }  
  38. }  


这边我就不展示management.jsp的显示代码了！