什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest 是 AJAX 的基础对象，基本用的就这一个。

创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6,IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
 
 

  
  
 
   
 
    
属性
 
    
描述
 
   
 
   
 
    
responseText@H_301_69@ 
    
获得字符串形式的响应数据。@H_301_69@ 
   
 
   
 
    
responseXML@H_301_69@ 
    
获得 XML 形式的响应数据。@H_301_69@ 
   
 
  
 
 

onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
 
 onreadystatechange@H_301_69@ 
    
存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。@H_301_69@ 
   
 
   
 
    
readyState@H_301_69@ 
    
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
 
     
 
      
0: 请求未初始化
 
      
1: 服务器连接已建立
 
      
2: 请求已接收
 
      
3: 请求处理中
 
      
4: 请求已完成，且响应已就绪
 
     
@H_301_69@ 
   
 
   
 
    
status@H_301_69@ 
    
200: "OK"
404: 未找到页面
@H_301_69@ 
   
 
  
 
 

实例：

<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
 {// code for IE7+,Firefox,Chrome,Opera,Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6,IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
 }
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>