Ajax实现原理详解

Ajax与传统web应用的不同
传统的javascript编程中，若想得到服务器端数据或文件上的信息，或者发送客户端信息到服务器， 需要建立一个html 的form，然后GET或者POST数据到服务器端，用户需要单击submit按钮来发送或者接受数据信息，然后等待服务器响应请求，页面重新加载。因为服务器每次都会返回一个新的页面，所以传统的web应用可能很慢，而且交互不太好。实用ajax技术，就可以使javascript通过XMLHttpRequest对象直接与服务器交互。通过HTTP Request，一个web页面可以发送一个请求到web服务器，而且接收web服务器返回的信息（不用重新加载页面），展示给用户的还是同一个界面，但是用户感觉页面刷新了，但看不到javascript后台进行的发送请求和接收响应。

Ajax请求过程
1. 创建XMLHttpRequest对象的一个实例
2. 调用方法open，初始化数据源请求
3. 为onreadystatechange属性指定一个处理器函数来处理服务器的响应。
4. 通过调用send建立一个非阻塞的数据源请求。
5. 在处理函数中，服务器响应得到时处理该响应。根据接收到的数据修改DOM元素。

XMLHttpRequest的属性和方法
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text 伴随状态码的字符串信息
readyState 对象状态值
　　　　0 (未初始化) 还没有调用send()方法
　　　　1 (载入) 已调用send()方法，正在发送请求
　　　　2 (载入完成) send方法已调用，已经接收到全部响应内容
　　　　3 (交互) 正在解析响应内容
　　　　4 (完成) 响应内容解析完成，可以在客户端调用了。

　　但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。

function CreateXmlHttp() {    //非IE浏览器创建XmlHttpRequest对象    if (window.XmlHttpRequest) {        xmlhttp = new XmlHttpRequest();    }    //IE浏览器创建XmlHttpRequest对象    if (window.ActiveXObject) {        try {            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");        }        catch (e) {            try {                xmlhttp = new ActiveXObject("msxml2.XMLHTTP");            }            catch (ex) { }        }    }}function Ustbwuyi() {    var data = document.getElementById("username").value;    CreateXmlHttp();    if (!xmlhttp) {        alert("创建xmlhttp对象异常！");        return false;    }    xmlhttp.open("POST", url, false);    xmlhttp.onreadystatechange = function () {        if (xmlhttp.readyState == 4) {            document.getElementById("user1").innerHTML = "数据正在加载...";            if (xmlhttp.status == 200) {                document.write(xmlhttp.responseText);            }        }    }    xmlhttp.send();}

Ajax优点
1. 页面无刷新，用户体验好
2. 使用异步方式与服务器通信，具有更加迅速的响应能力
3. 可以把服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担。Ajax的原则是按需取数据，可以最大程度减少冗余请求和响应对服务器造成的负担。

Ajax缺点
1. ajax不支持浏览器返回按钮
2. 安全问题，ajax暴露了与服务器交互的细节
3. 对搜索引擎的支持比较弱
4. 破坏了程序的异常机制
5. 不容易调试

Ajax跨域解决办法
1. web代理的方式。用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面，由该页面代替用户页面完成交互，从而返回合适的结果。此方案可以解决现阶段所能想到的多数跨域访问问题，但要求A网站提供web代理的支持。且每次交互过程，A网站的服务器负担增加，无法代用户保存session状态。
2. 用户本地转储方式。IE本身依附于window平台的特性为我们提供了一种基于iframe利用内存来绕行的方案，即两个window之间可以在客户端通过window剪贴板的方式进行数据传输，只需要在接收数据的一方设置interval进行轮询，获得结果后清除interval即可。