ajax第二篇

最新推荐文章于 2025-12-02 09:54:47 发布

原创最新推荐文章于 2025-12-02 09:54:47 发布 · 383 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest

前端学习专栏收录该内容

5 篇文章

订阅专栏

本文通过一个简单示例深入解析了Ajax与XMLHttpRequest的工作原理，包括创建Ajax对象、open方法的使用、GET与POST的区别、异步与同步的运作方式及onreadystatechange事件的详细解释。

ajax对象XMLHttpRequest详细解析

文章简述：
    这篇文章主要借助一个简单的程序对ajax对象进行详细的分析。
    主要知识点有如下部分：
    1.如何创建一个ajax对象(解决兼容性问题)；
    2.open方法的各个参数的主要作用，包括get，post的区别，异步与同步的区别；
    3.ajax的onreadystatechange方法的详细的解析。

第一部分从一个简单的程序说起

    该程序的主要功能是从服务器中获取一些数据展示在页面上。

源码

ajax2.html

<!DOCTYPE html>
        <html>
            <head>
                <meta charset="UTF-8">
                <title>ajax第二篇</title>
                <script>
                    window.onload=function(){
                        var obtn=document.getElementById('btn');
                        obtn.onclick=function(){
                            var xhr=null;
                            //创建ajax的对象
                            if(window.XMLHttpRequest){
                                xhr=new XMLHttpRequest();
                            }else{
                                xhr=new ActiveXObject('Microsoft.XMLHTTP');
                            }
                            //调用ajax的open方法
                            xhr.open('get','1.php?username='+encodeURI("张三")+'&age='+encodeURI("30"),true);
                            //提交
                            xhr.send();

                            //等待服务器返回数据
                            xhr.onreadystatechange=function(){
                                //readyState是指ajax的工作状态
                                if(xhr.readyState==4){
                                    //status指的是服务器的状态
                                    if(xhr.status==200){
                                        //JSON.parse是将json数据进行解析成相应的数据
                                        var data = JSON.parse(xhr.responseText);
                                        var username = data[0];
                                        var age= data[1];
                                        alert("用户名是："+ username +",年龄是:"+age);
                                    }else{
                                        alert('出错了，错误是:'+xhr.status);
                                    }
                                }
                            }
                        }
                    }
                </script>
            </head>
            <body>
                <input type="button" id="btn" value="按钮"/>
            </body>
        </html>

1.php

<?php
            header('content-type:text/html;charset="utf-8"');

            $username = $_GET['username'];
            $age = $_GET['age'];

            $arr1 = array($username,$age);
            //对变量进行 JSON 编码
            echo json_encode($arr1);

程序截图

第二部分分析XMLHttpRequest对象。

    ajax的执行流程:  
        1.创建一个XMLHttpRequest对象。
        2.调用open的方法，设置数据请求的方式，数据请求的地址，是否是异步。
        3.调用send的方法，提交参数。
        4.等待获取服务器的数据。

1.创建一个XMLHttpRequest对象

var xhr=null;
    //创建ajax的对象
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else{
        xhr=new ActiveXObject('Microsoft.XMLHTTP');
    }

代码解析：上诉代码主要是处理浏览器的兼容性问题，首先判断在浏览器中是否存在XMLHttpRequest对象（一般都有，除了ie7以下版本）。如果存在就直接创建；如果没有就使用ActiveXObject插件中创建(Microsoft.XMLHTTP),创建一个ajax的对象。

2.调用open的方法，设置数据请求的方式，数据请求的地址，是否是异步。

open()方法有三个参数，分别如下：
    1.数据的请求方式：如get，post。
    2.数据请求的地址：如1.php。
    3.是否是异步：true--->异步；false--->同步。

1.get，post的区别
    在传输方式上：GET方式通过url地址传输；POST通过浏览器的头部信息中传输。
    传输数据量：GET有数据量的限制；POST在理论上是无限的。
2.异步与同步的区别
    异步：当ajax发送请求后，在等待服务器返回的这个过程中，前台会继续执行ajax块后面的脚本。
    同步：当ajax发送请求后，在等待服务器返回的这个过程中，前台不会继续执行ajax块后面的脚本。

3.调用send方法，向服务器提交参数。

    注：如果数据请求方式是以post方式提交，那么提交的参数就写在send方法的参数中；
        如：send("username=张三&password=111");

4.onreadystatechange事件

    该事件主要用于对请求状态进行监控的。每当ajax的工作状态发生改变时，该事件就会被触发。

    readystate：ajax的工作状态。
        0：未初始化，还没有执行open方法。
        1：载入，已经调用了send方法，正在发送请求。
        2：载入完成，send方法已经执行完了，收到从服务器端返回的全部数据。
        3：解析，正在解析从服务器返回的数据。
        4：解析完成，响应的内容已经准备好了，可以在浏览器中展示。

    responseText:ajax请求数据返回内容的存放容器。(主要是以文本的形式)。

    status:服务器的响应状态码。（由三位阿拉伯数字组成）
        1xx：关于消息的状态码。
        2xx:关于成功的状态码。
        3xx:关于重定向的状态码。
        4xx:关于浏览器错误(请求出错)的状态码。
        5xx：关于服务器出错的状态码。