Ajax的技术原理

标签：ajax

昨天问道ajax是。我回答到不就是jquery框架提供的一个异步通信方法么。当再问原理时我傻逼了。ajax技术其实我只在实习时用到了。感到很方便的东西它不需要每次更新都刷新页面。可以异步请求服务器。利用回调函数进行处理程序。

在jquery API文档中我们可以看到一个简单的demo

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

那么这样一个ajax请求用js怎么做到的呢？

这里时利用了XMLHttpRequest对象进行实现的。但不同的浏览器获取这个对象和该对象的方法不同。

可以看到这里有open方法啊、send方法啊。还有个onreadystatechange这个属性。这个属性其实就是让你设置回调函数的。你可以写匿名函数也可以写函数名。如果要向服务器发参数可以用setRequestHeader方法设置key value。回调函数中我们也能获取到状态码、信息等等。例如success的状态码是200.重定向是302.失败是404之类的。利用这些东西我们就能写一个简单的实现。

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的技术原理

标签：ajax

原文地址：http://blog.csdn.net/leejuen/article/details/39494233