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;
  }
}