AJAX简单整理

AJAX简介 
1、AJAX工作原理：当一个事件发生时，浏览器会创建一个XMLHttpRequest对象，并发送一个HttpRequest给服务器，服务器接收到这个HttpRequest请求后就会进行处理， 
处理完成后服务器会创建一个响应程序，并将响应结果返回给浏览器，浏览器接收到响应结果后通过使用JavaScript进行加工处理，最后浏览器更新网页内容。 
2、AJAX联合使用的元素 
XMLHttpRequest对象：异步的与服务器交换数据 
JavaScript/DOM：用于信息显示/交互 
CSS：给数据定义样式 
XML：作为转换数据的格式 
3、创建XMLHttpRequest 
IE5、IE6：var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
其他浏览器：var xmlhttp = new XMLHttpRequest(); 
实例： 
var xmlhttp; 
if(window.XMLHttpRequest){ 
xmlhttp = new XMLHttpRequest();//现代浏览器IE7+、Firefox、Chrome、Safari 以及 Opera 
}eles{ 
xmlhttp = new ActiveXObject("Microsoft.xmlhttp");//IE5、IE6 
} 
4、XMLHttpRequest对象的方法：open(),send() 
xmlhttp.open(method，URL，async) 
method：请求的类型；GET 或 POST 
url：文件在服务器上的位置 
async：true（异步）或 false（同步） 
xmlhttp.send(String):将请求发送到服务器,String仅用于POST请求。 
注：XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true 
5、POST和GET的区别 
（1）POST一般是需要更新数据时才会用到，而GET一般是获取或查询数据的时候用。 
（2）GET请求的数据会附在URL（如login.action?a=1&b=2）之后；POST把提交的数据则放置在是HTTP包的包体中。 
（3）GET方式提交的数据最多只能是1024字节，POST提交数据没有大小限制 
（4）在ASP中，服务端获取GET请求参数用Request.QueryString，获取POST请求参数用Request.Form。传一个test.jsp?name=hyddd&password=hyddd，用request.getQueryString()得到的是：name=hyddd&password=hyddd。 
（5）POST的安全性要比GET的安全性高 
（6）Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求，在FORM（表单）中，Method默认为"GET"。 
6、Async 
当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数 
xmlhttp.onreadystatechange=function() 
  { 
  if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
} 
  } 
xmlhttp.open("GET","ajax_info.txt",true); 
xmlhttp.send(); 

您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可 
xmlhttp.open("GET","ajax_info.txt",false); 
xmlhttp.send(); 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
注：如果使用async=false,JavaScript会等到服务器响应就绪才继续执行，如果服务器繁忙货缓慢，引用程序就会挂起或停止 
7、responseText、responseXML 
如果来自服务器的响应并非 XML，请使用 responseText 属性，responseText 属性返回字符串形式的响应。 
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析。 
实例： 
xmlDoc=xmlhttp.responseXML; 
txt=""; 
x=xmlDoc.getElementsByTagName("ARTIST"); 
for (i=0;i<x.length;i++) 
  { 
  txt=txt + x[i].childNodes[0].nodeValue + "<br>"; 
  } 
document.getElementById("myDiv").innerHTML=txt; 

<CATALOG> 
<CD> 
<ARTIST>Bob Dylan</ARTIST> 
</CD> 
<CD> 
<ARTIST>Bob Dylan</ARTIST> 
</CD> 
<CD> 
<ARTIST>Bob Dylan</ARTIST> 
</CD> 
<CD> 
<ARTIST>Bob Dylan</ARTIST> 
</CD><CD> 
<ARTIST>Bob Dylan</ARTIST> 
</CD> 
<CD> 
<ARTIST>Bob Dylan</ARTIST> 
</CD> 
</CATALOG> 
8、XMLHttpRequest对象的三个重要的属性 
当请求被发送到服务器时，我们需要执行一些基于响应的任务,每当 readyState 改变时，就会触发 onreadystatechange 事件,readyState 属性存有 XMLHttpRequest 的状态信息。 
onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 
readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化；1: 服务器连接已建立；2: 请求已接收；3: 请求处理中；4: 请求已完成，且响应已就绪。 
status：200: "OK"；404: 未找到页面 
实例： 
当 readyState 等于 4 且状态为 200 时，表示响应已就绪 
xmlhttp.onreadystatechange=function(){ 
  if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
  } 
}