什么是Ajax以及ajax请求的步骤[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

什么是Ajax以及ajax请求的步骤

1.Ajax是什么?

Asynchronous JavaScript & XML。Ajax是web开发的一种技术。

2.Ajax请求的步骤

(1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象；

(2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方式、`URL`及验证信息；

(3)设置响应`HTTP`请求状态变化的函数；

(4)发送`HTTP`请求；

(5)获取异步调用返回的数据；

(6)使用JavaScript和DOM实现局部刷新。

3.XMLHttpRequest对象

(1)对象类型的API;

(2)在浏览器环境使用;

(3)用于客户端和服务端数据的传递和接收;

(4)用于请求XML数据（JSON/TEXT）。

4.readyState状态码

0：请求未初始化

1：服务器连接已建立

 2：请求已接收

 3：请求处理中

 4：请求已完成，且响应已就绪

5.http状态码（status）

200：（成功）

403：（禁止）服务器拒绝请求

404：（未找到）服务器找不到请求的页面

408：（请求超时）服务器等候请求发生超时

500：（服务器内部错误）服务器遇到错误，无法完成请求

6.onload和onreadystatechange

当onload执行时readyState只可能为4

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax</title>
</head>

<style>
    html {
        font-family: Arial, Helvetica, sans-serif;
        padding: 10px 20px;
    }
</style>

<body>
    <h3>Ajax是什么?</h3>
    <p>Asynchronous JavaScript & XML。Ajax是web开发的一种技术。</p>

    <h3>Ajax请求的步骤</h3>
    <p>
        (1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象；
        <br /> (2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方式、`URL`及验证信息；
        <br /> (3)设置响应`HTTP`请求状态变化的函数；
        <br /> (4)发送`HTTP`请求；
        <br /> (5)获取异步调用返回的数据；
        <br /> (6)使用JavaScript和DOM实现局部刷新。
    </p>

    <h3>XMLHttpRequest对象</h3>
    <p>
        (1)对象类型的API;
        <br />(2)在浏览器环境使用;
        <br />(3)用于客户端和服务端数据的传递和接收;
        <br />(4)用于请求XML数据（JSON/TEXT）。
    </p>

    <h3>readyState状态码</h3>
    <p>
        0：请求未初始化
        <br /> 1：服务器连接已建立
        <br /> 2：请求已接收
        <br /> 3：请求处理中
        <br /> 4：请求已完成，且响应已就绪
    </p>

    <h3>http状态码（status）</h3>
    <p>
        200：（成功）
        <br /> 403：（禁止）服务器拒绝请求
        <br /> 404：（未找到）服务器找不到请求的页面
        <br /> 408：（请求超时）服务器等候请求发生超时
        <br /> 500：（服务器内部错误）服务器遇到错误，无法完成请求
    </p>
    <button>ajax请求</button>
    <h2></h2>

    <script>
        document.querySelector("button").addEventListener("click", getAjax);

        function getAjax() {
            //1.创建XMLHttpRequest对象
            let xhr = new XMLHttpRequest();
            //open(type,url,async)
            xhr.open("GET", "http://jsonplaceholder.typicode.com/posts/1", true);
            console.log(xhr.readyState); //1

            //进程
            xhr.onprogress = function() {
                console.log(xhr.readyState); //3
            }

            //两种请求方式onload/onreadystatechange
            //onload
            // xhr.onload = function() {
            //     console.log(xhr.readyState); //4
            //     document.querySelector("h2").innerHTML = JSON.parse(this.responseText).body;
            // };
            //onreadystatechange
            xhr.onreadystatechange = function() {
                console.log(xhr.readyState);
                console.log(xhr.status);
                if (xhr.readyState == 4 && xhr.status == 200) {//修改dom
                    document.querySelector("h2").innerHTML = JSON.parse(this.responseText).title;
                } else if (xhr.status = 404) {
                    document.querySelector("h2").innerHTML = xhr.statusText;
                }
            };

            //发送请求
            xhr.send();
        }
    </script>
</body>

</html>