Ajax的技术原理

最新推荐文章于 2023-02-17 16:15:21 发布

原创最新推荐文章于 2023-02-17 16:15:21 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

http 专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了Ajax技术的工作原理及其实现方式，通过对比jQuery提供的便捷方法与原生JavaScript的实现过程，帮助读者深入了解Ajax如何实现网页局部更新，以及在不同浏览器环境下创建XMLHttpRequest对象的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

可以看到这个代码的意思大概是利用post请求some.php这个方法。传入参数是用 name=John&location=Boston这么写的。data参数也能用{foo:["bar1", "bar2"]}这样的表现形式。但在发送时会自动转换成前面的样子。

那么这样一个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();
}

这里引用的是网上的代码。我们简单分析一下。首先我们获取到了XMLHttpRequest对象。这里判断了一下是什么浏览器。用了几个if else。然后我们设置请求方式、url、传输方式。false是同步、true是异步。然后我们写了个回调函数。告诉这个回调函数。我们只有在交互完成状态为4时候才做以下代码。这里面我们又判断了一下返回状态码。说只有success时候我们才执行以下代码。这里貌似忘记用xmlhttp.setRequestHander("username",data);设置请求时候的key-value了。