ajax工作原理

1.首先简单的介绍一下ajax
ajax=Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
它是一种标准的新方法；
最大的优点就是可以在不刷新整个网页的时候更新页面数据。
2.关于同步和异步：
异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。
3.网页应用Ajax与服务器交互的过程如下图：

4.ajaxg和XmlHttpRequest对象
创建XmlHttpRequest对象

function loadXMLDoc() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }

向服务器发送请求；XMLHttpRequest对象用于和服务器交换数据。
将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

open(method,url,async)：规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POST；url：文件在服务器上的位置；async：true（异步）或 false（同步）；
格式：xmlhttp.open(“GET”,“ajax_info.txt”,true);

send(string)：将请求发送到服务器。string：仅用于 POST 请求。
格式：xmlhttp.send();

与POST相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
服务器响应：
获得来自服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText：获得字符串形式的响应数据。

例：document.getElementById(“myDiv”).innerHTML = xmlhttp.responseText;

responseXML：获得 XML 形式的响应数据。

例：xmlDoc = xmlhttp.responseXML;
txt = “”;
x = xmlDoc.getElementsByTagName(“ARTIST”);
for (i = 0; i < x.length; i++) {
txt = txt + x[i].childNodes[0].nodeValue + “
”;
}
document.getElementById(“myDiv”).innerHTML = txt;

onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
XMLHttpRequest 对象的三个重要的属性：
onreadystatechange每次状态改变所触发事件的事件处理程序。
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0 (未初始化)对象已建立，但是尚未初始化（尚未调用open方法）；
1 (初始化)对象已建立，尚未调用send方法；
2 (发送数据)send方法已调用，但是当前的状态及http头未知；
3 (数据传送中)已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误；
4 (完成)数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据；
status从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）。
下面是一个比较标准的创建XMLHttpRequest对象的方法。

//浏览器创建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("GET", url, true);

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4) {
                    document.getElementById("user1").innerHTML = "数据正在加载...";
                    if (xmlhttp.status == 200) {
                        document.write(xmlhttp.responseText);
                    }
                }
            }
            xmlhttp.send();
        }

5.ajax的缺点
1、ajax对浏览器后退机制的破坏。
2、安全问题；如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、一些手持设备（如手机、PDA等）现在还不能很好的支持ajax。