一日精通Ajax技术

Ajax这个名称怎么来的，本人也不得而之了，大概是（Active Javascript Action Xml）吧，说白一点就是运用了 javascript、xmlhttp和xmldom技术及网站后台来处理用户的一些操作的方法吧。

　　那么本人就分三步来说明如何使用 Ajax 技术来做开发。

　　一、用 javascript 操作 xmlhttp 对象

　　二、服务器部对xmlhttp请求的响应（PHP范例）

　　三、xmldom 的使用方法

　　先说第一部份：

　　一、用 javascript 操作 xmlhttp 对象

　　IE7, Mozilla ,Firefox等浏览器中，javascript是内置有 XMLHttpRequest 这个对象的，但IE5+则没有，需要用如下方法来启动：
//IE 6
try{ xhttp = new ActiveXObject("Msxml2.XMLHTTP";} catch(e){ ; }
//IE5+
if(xhttp == null) try { xhttp = new ActiveXObject("Microsoft.XMLHTTP";} catch(e){ ; }

　　那考虑不同浏览器的兼容，启动一个xmlhttp一般都要按如下方式：

CODE:[Copy to clipboard]var xhttp = null;

if(window.XMLHttpRequest){ //IE7, Mozilla ,Firefox 等浏览器内置该对象

  xhttp = new XMLHttpRequest();
 
}else if(window.ActiveXObject){ //IE6、IE5

  try{ xhttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e){ ; }
 
  if( xhttp == null) try { xhttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e){; }
 
}

　　对于 xmlhttp 的使用，一般遵守如下的顺序：

　　1、初始化 xmlhttp 对象（上文）；

　　2、打开链接

　　方法

xhttp.open("GET", purl, true);

　　参数一：用 GET 或 POST 方式发送数据

　　参数二、请求网址（只能请求你服务器上的资源，一般浏览器安全限制不能读取跨域的数据）

　　参数三、true 表示异步传输（服务器返回信息完成前，你可以进行其它操作），false 表示阻断方式的传输。

　　3、设定要发送的 http 请求头

　　方法：

xhttp.setRequestHeader(key,value);

　　一般来说，默认要发送的头是：xhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded";

　　这种表示发送的内容类型的请求头用于发送文本数据，而且javascript默认是以unicode发送的，还有另外一种形式是：xhttp.setRequestHeader("Content-Type","multipart/form-data";这表示发送二制形式的数据，由于安全性原因，javascript一般不能用这种方式来发送数据，所以这个头一般没什么用。

　　如果你的网站开启了使用 refer 参数来防盗链，那么你必须用这个方法指定 Refer 参数，或者如果用户需要登录才能进行某操作，那么要指定 Cookie 的请求头。

　　4、send 数据

　　方法：xhttp.send(postdata);

　　对于用 get攻手请求，不需要指定postdata，直接用 test.php?a=a&b=b 这样形式的网址来请求即可。

　　如果是post方式，需要用 key1=value2&key2=value2 这样的形式来对数据进行处理，把它合并在 postdata 字串中，然后发送。

　　注意事项：

　　javascript默认发送数据的方式是unicode，处理返回的数据必须是utf-8格式，因此，在发送的时候，需要用escape()函数来处理postdata和网址的value，在服务器上必须还原这些value，并把unicode转为页面编码值，因此如果用 jsp 或 asp.net 都会比较简单，但如果用php处理起来是什么费劲的，等下会教你如何做。

　　5、确认服务器返回资料完成下载

　　[1] 如果用阻断的方式来发送请求，那么直接用 if(xhttp.readyState == 4)就能判断是否完成。

readyState 的具体属性值为：
0 没open
1 没send
2 状态未知
3 正在传送
4 传送完成

　　当然为了保障起见，还需要加多一重判断，就是 if(xhttp.status == 200) ，status 就是 http 协议里的返回头代码

1xx 表示（唉呀，忘记了）
2xx 表示成功的信息
3xx 表示页面转移
4xx 页面不存在
5xx 表示服务器的各种错误

　　如果你的页面没特殊处理，一般用 if(xhttp.status == 200)  来确信内容返回是正确的

　　[2] 如果用异步传输，需要用 onreadystatechange 的事件来监听

xhttp.onreadystatechange = function()
{
   //这里来进行上面阻断方式的判断
   if(myajax.xhttp.readyState == 4){
                if(myajax.xhttp.status == 200){
                  //要进行的后续操作
                }