Ajax基本原理与实现

最新推荐文章于 2025-03-26 17:59:42 发布

Silence/

最新推荐文章于 2025-03-26 17:59:42 发布

阅读量2.2k

点赞数

文章标签： ajax

本文链接：https://blog.youkuaiyun.com/lurance_/article/details/124008377

版权

Ajax，即异步的JavaScript和XML，是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容的技术。它的工作原理是通过XMLHttpRequest对象发送请求，接收响应并操作DOM。Ajax支持GET和POST请求，常用事件包括onreadystatechange，当readyState变为4且状态为200时表示响应就绪。jQuery提供了$.ajax()、$.get()和$.post()等简化方法来实现Ajax交互。

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

Ajax 的全称是Asynchronous JavaScript and XML（异步的JavaScript 和 XML），其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。

不是新的编程语言，而是一种使用现有标准的新方法。

最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。(局部刷新)

AJAX运行环境：浏览器

AJAX技术早就出现了，2005年google suggest项目采用Ajax技术，页面展示非常丰富效果，用户感受非常良好，使Ajax技术一夜爆红，到现在都是web开发中必不可少的技术之一！

1、关于同步和异步：客户端和服务器端相互通信的基础上
异步传输是面向字符的传输，它的单位是字符；
而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。

同步的话，必须这个操作完了才会执行下一步，在等待期间浏览器会挂起不能执行任何接下来的js代码；异步则是【告诉】浏览器去做，【告诉】是一瞬间的事情，然后就继续执行下一步了，等到结果返回来了，浏览器会通知js执行相应的回调。

2、Ajax工作原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。 Ajax请求，其实就是利用浏览器内核模拟表单提交，达到页面不刷新的效果，接收服务器的响应，实现局部更新。

3、Ajax请求：

XMLHttpRequest：Ajax对象的核心（代表浏览器内核）

XMLHttpRequest对象：用于在后台与服务器交换数据，这意味着可以在不刷新整个网页的情况下，对网页的某部分进行更新。

<script>
    var xmlhttp;
    function init() {
        if (window.XMLHttpRequest){
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码；创建XMLHttpRequest对象
            xmlhttp=XMLHttpRequest;
        }
        else{
            // IE6, IE5 浏览器执行代码；不存在，使用ActiveXObject
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
        }
    }
</script>

向服务器发送请求：将请求发送到服务器，主要使用 XMLHttpRequest 对象的 open() 和 send() 方法：

1、open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理；

2、send() 方法将请求送往服务器。

xmlhttp.open("GET","/jquery/ajaxServlet",true);
xmlhttp.send();

GET OR POST：

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用，但是在有些情况下，必须使用 POST 请求；【 Ajax请求，只能提交文本字符，所以像上传内容等功能，必须通过表单post提交】

function doGet(){
    xmlhttp.open("GET","/jquery/ajaxServlet",true);//未提交数据
    xmlhttp.open("GET","/jquery/ajaxServlet?fname=向&lname=洋",true);//已提交数据，异步
    xmlhttp.open("GET","/jquery/ajaxServlet?fname=向&lname=洋",true);//已提交数据，同步
    xmlhttp.send();
}
function doPost() {
    xmlhttp.open("Post","/jquery/ajaxServlet",true);//未提交数据
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//已提交数据
    xmlhttp.send("fname=向&lname=洋");//上传文本字符；send(String)仅针对post请求，用来传递数据
}

4、Ajax响应

responseText：获得字符串形式的响应数据。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

5、Ajax事件

onreadystatechange 事件：当请求被发送到服务器时，我们需要执行一些基于响应的任务，每当监听到ajax对象的readyState 值改变的行为时，就会触发 onreadystatechange 事件，eadyState 属性存有 XMLHttpRequest 的状态信息，下面是 XMLHttpRequest 对象的三个重要的属性：

ajax 状态码 - xhr.readyState：是用来表示一个 ajax 请求的全部过程中的某一个状态，只有当 readyState === 4 的时候，我们才可以正常使用服务端给我们的数据。

onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务，当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function() {
    // alert(xmlhttp.readyState);
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        // alert(xmlhttp.responseText);
        document.getElementById("resDiv").innerHTML=xmlhttp.responseText;//局部更新
    }
};

7、jquery Ajax：与Ajax本质没有任何区别。知识换了jquery语法进行了封装，便于使用

Jquery底层ajax实现。

原生JS实现：

<script>
    var xmlhttp;
    function init() {
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            //创建XMLHttpRequest对象
            xmlhttp=new XMLHttpRequest();
        }
        else {
            // IE6, IE5 浏览器执行代码
            //不存在，使用ActiveXObject
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    //提交表单，页面不会有刷一下，用户感受提升
    //get方法通过?的方式传递数据，执行参数
    function doGet(){
        // xmlhttp.open("GET","/jquery/ajaxServlet",true);
        xmlhttp.open("GET","/jquery/ajaxServlet?fname=向&lname=洋",true);//异步请求
        // xmlhttp.open("GET","/jquery/ajaxServlet?fname=向&lname=洋",false);
        //状态变化注册
        xmlhttp.onreadystatechange=function() {
            // alert(xmlhttp.readyState);
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                // alert(xmlhttp.responseText);
                document.getElementById("resDiv").innerHTML=xmlhttp.responseText;//局部更新
            }
        };

        xmlhttp.send();
        // alert(xmlhttp.responseText);
    }
    function doPost() {
        xmlhttp.open("Post","/jquery/ajaxServlet",true);
        // xmlhttp.open("Post","/jquery/ajaxServlet",false);//false代表同步请求，一般不太使用，效率太低
        //异步请求：send将数据传输给浏览器，浏览器还没返回响应，主程序已经在执行下一句了，导致responseText为null
        //同步请求：send将数据传输给浏览器，浏览器返回响应后，主程序获取responseText的数据展示；一般不太使用，效率太低
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//内容上传文本字符
        //状态变化注册
        xmlhttp.onreadystatechange=function() {
            // alert(xmlhttp.readyState);
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                // alert(xmlhttp.responseText);
                document.getElementById("resDiv").innerHTML=xmlhttp.responseText;//局部更新
            }
        }
        xmlhttp.send("fname=向&lname=洋");//send(String)仅针对post请求，用来传递数据
        // alert(xmlhttp.responseText);

    }
</script>

jQuery实现：

1、$.ajax()

        $("#jqueryAjax").click(function () {
            $.ajax({
                type: "get",
                url: "/jquery/ajaxServlet",
                data: "fname=John&lname=Boston",
                success: function(msg){
                    alert( "Data Saved:::: " + msg );
                }
            });
        });

2、$.get()：发送get请求(ajax的简化)

语法：$.get(url, [data], [callback], [type])

        $("#jqueryGet").click(function () {
            $.get("/jquery/ajaxServlet", { fname: "John", lname: "2pm" },
                function(data){
                    alert("Data Loaded: " + data);
                });
        });

3、$.post()：发送post请求(ajax的简化)

语法：$.post(url, [data], [callback], [type])

        $("#jqueryPost").click(function () {
            $.post("/jquery/ajaxServlet", { fname: "John", lname: "2pm" },
                function(data){
                    alert("Data Loaded: " + data);
            });
        })