原生AJAX基础讲解及兼容处理

AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML)。

　　AJAX不是新技术 ，但却是热门的技术。它可以在不重载（刷新）整个页面的情况下与服务器进行数据交互并更新网页模块。

　　AJAX的优点有很多：可以局部刷新、按需加载，这样就减轻了服务器的数据流量。并且在页面更新的同时，用户可以浏览器网页的其它内容而不受影响，也减轻了结构负担。AJAX也不是万能的，在有以上优点的同时SEO也受到了影响。

　　在学习AJAX之前，必须先有HTML/XHTML、CSS、JavaScript/DOM的基础。

　　AJAX与服务器进行数据交互，必然涉及到服务器端，与此同时也就涉及到了服务器请求对象的创建(new XMLHttpRequest())、确认请求方式(open())、发送请求(send())以及响应请求(responseText)。

　　创建对象：

　　IE9+及其它浏览器支持使用new XMLHttpRequest()的创建对象方式，而IE8及以下则使用new ActiveXObject()的方式进行创建。

　　看了网上许多人使用如下代码进行兼容：

1 try { 2     xml = new ActiveXObject("Msxml2.XMLHTTP"); 3 } catch(e) { 4     try { 5         xml = new ActiveXObject("Microsoft.XMLHTTP"); 6     } catch(e1) { 7         xml = new XMLHttpRequest(); 8     } 9 }

　　笔者用IE11调试功能测试IE10及以下不写new ActiveXObject("Msxml2.XMLHTTP")也是没问题的，于是在创建对象时可以使用代码：

　　var xml = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

　　确认请求：

　　xml.open('get', 'url', true/false);

　　第一个参数表示：string. 访问方式，有两具值：get/post，大部分的时候使用get

　　第二个参数表示：string. 要连接的服务器网址

　　第三个参数表示：boolean. 表示是否需要异步请求（true为发起异步加载）

　　发送请求：

　　xml.send();

　　如果需要发送数据则采用xml.send(str);

　　响应数据：

　　xml.onreadystatechange = function() {

　　if (xml.readyState == 4 && xml.status == 200) {

　　alert(xml.responseText);

　　}

　　}

　　status返回链接的状态，一般返回200与404，200表示成功返回，404表示未找到页面。

　　readyState有5个值，分别为：0、1、2、3、4。而每当值改变时都会触发一次onreadystatechange。

　　readyState的5个值含义分别为：

　　0: 请求未初始化

　　1: 服务器连接已建立

　　2: 请求已接收

　　3: 请求处理中

　　4: 请求已完成，且响应已就绪

　　也就是当请求完成，并且找到页面时，然后才获取服务器上的数据。

最新内容请见作者的GitHub页：http://qaseven.github.io/