Ajax？

1.Ajax全名：async JavaScript and xml

异步JavaScript和xml技术。
是客户端给服务器发送消息的工具，以及接受响应的工具。
是一个默认异步执行机制的功能。

2.Ajax核心

XMLHttpRequest对象。
由浏览器提供，开发者可以使用它发出HTTP和HTTPS请求。
不需要刷新（重新提交）页面，就可以获取服务器最新的相应，从而修改页面的内容。

3.XMLHttpRequest属性

1. onreadystatechange：

用于指定状态改变时所触发的事件处理器。

xhr.onreadystatechange = function() {
           console.log("xhr.readystate")
        }

2.readyState：

用于获取请求状态的属性。

readyState===0：初始化未完成，open方法还未执行。
readyState===1：配置信息完成，执行了open之后。
readyState===2：send方法已经执行完成。
readyState===3：正在解析响应内容。
readyState===4：内容解析完毕，可以在客户端使用。

3.responseText

用户获取服务器相应的属性。

当readyState的值为0、1、2时，responseText为空字符串。
当readyState的值为3时，responseText为还未完成的响应信息。
当readyState的值为4时，responseText为响应信息。

4.responseXML

用于当接收到完整的HTTP响应（readyState值为4时）时描述XML响应，若readyState值不为4，取值为null。如果响应内容类型是“text/xml”或者“application/xml”,这个属性将保存相应数据的XML DOM文档。

5.status

用于描述HTTP状态代码的属性。仅当readyState的值为3或4时，status属性才可用。

6.statusText

用于描述HTTP状态的代码文本。仅当readyState的值为3或4时，statusText属性才可用。

4.XMLHttpRequest对象

1.open()

用于设置异步请求的URL，请求方法以及其他参数信息

xhr.open('GET',"1.json",true);
        //第一个get post push delete请求的HTTP方法
        //第二个 请求地址
        //第三个参数 是否异步

2.send()

用于服务器发送请求。如果声明为异步，该方法立即返回，否则将等待到接收到响应为止。

3.sendRequstHeader()

用于为请求的HTTP头设置值，该方法必须在open()方法调用之后使用。

4.getRequstHeader()

以字符串形式返回指定的HTTP头信息。

5.getAllRequstHeader()

以字符串形式返回完整的HTTP头信息。

5.创建一个Ajax对象

        //创建一个ajax对象
        var xhr = new XMLHttpRequest();
        xhr.open('GET',"1.json",true);
        //第一个get post push delete
        //第二个 请求地址
        //第三个参数 是否异步
        xhr.send();
        //使用send发送请求

对此，我们设置一个监听，写一个回调函数，用于指定状态改变时所触发的事件处理器，我们才可以拿到服务器返回的数据。如果status===4，我们就可以拿到返回的结果但是如果后端返回错误，即服务器状态码不在200-299之间，我们也需要知道它的返回的错误类型，所以再进行判断。

一个最基本的ajax就是上面三步，光有上面三个步骤。可以把请求发送到服务端，如果服务端正常，响应也可以回到客户端，但是我们拿不到返回数据，如果想要拿到响应，有两个前提条件：

1.本次HTTP请求成功，即HTTP状态码为200-299。
2.ajax对象有自己的状态码，用来表示本次ajax请求中的各个阶段。

 xhr.onreadystatechange = function() {
            // console.log("xhr.readystate")
        }
            if(xhr.readyState == 4){
                // 有可能还不是正确的结果，再进判断
                if(/^2\d{2}$/.test(xhr.status)){
              //正则表达式写法,判断等于200-299，都是正常状态。
                    console.log(JSON.parse(xhr.responseText))
                }else{
                console.log("error",xhr.responseText);
                //输入错误信息
                }
            }

对此我们可以观察，以上步骤过于麻烦，需要先判断readyState的状态再进行onload，所以还有一个方法，即onload

 xhr.onload = function(){
                if(/^2\d{2}$/.test(xhr.status)){
                    console.log(JSON.parse(xhr.responseText))
                }else{
                console.log("error",xhr.responseText);
                }
            }

此方法可以只走一遍，就表示后端给我们的数据已经加载完成，就少了判断readyState===4这个步骤，仅判断status状态。

服务器状态

表示临时响应并需要请求者继续执行操作。

表示成功，常见的200表示正常处理。

表示完成请求需要的进一步操作，即重定向。

客户端错误，一般原因为请求包含语法错误或无法完成请求。

服务器在尝试处理请求时发生内部错误，这些错误来自服务器本身，而非请求错误。

拓展

常见服务器状态

200 OK 正常返回信息；
301 Moved Permanently 请求的网页已永久移动到新位置；
302 Found 临时性重定向
306 Switch Proxy 在最新版的规范中，306状态码已经不再被使用
403 Forbidden 禁止访问；
404 Not Found 找不到如何与 URI 相匹配的资源；
405 Method Not Allowed 请求行中指定的请求方法不能被用于请求相应的资源
408 Request Timeout 请求超时。
409 Conflict 由于和被请求的资源的当前状态之间存在冲突，请求无法完成。
410 Gone 被请求的资源在服务器上已经不再可用，而且没有任何已知的转发地址。
500 Internal Server Error 最常见的服务器端错误；
501 Not Implemented 服务器不支持当前请求所需要的某个功能。当服务器无法识别请求的方法，并且无法支持其对任何资源的请求。
505 HTTP Version Not Supported 服务器不支持

HTTP方法

Get

使用Get方法即可获取数据，比较简单，和post（）方法类似，他们的区别就是数据的传递。post（）是把请求的数据放在请求体中，所以需要调用XHR对象上的setRequestHeader（），而Get方法则不用。

Post

使用post方法进行新增数据，post是把请求的数据放在请求体中，所以需要调用XHR对象上的setRequestHeader（） 注意！如果直接输入以下代码，json新增只会显示id，因为代码中没有告诉服务器数据是什么格式。需要注意。

 xhr.send({title:'newTitle',author:'newAuthor'});

QQ图片20230321184610.png

Put

修改数据信息可以直接可以以url+'\id'表示，运行成功刷新数据库即可以看到修改的信息。修改.png

Delete

修改信息需要注意的是，不需要数据的格式，因为数据已经没有了，所以将以下代码注释。再刷新数据库即可以看见第26行数据已经没有了。

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({title:'修改',author:'xiaxia',age:'20'}));

删除.png

总结

Ajax优势：

1. 不需要插件的支持，原生js可用。
2. 用户体验好（不需要刷新页面就可以更新数据）。
3. 减轻服务端和宽带的负担。

Ajax缺点：搜素引擎支持度不够，原因是数据都不在页面上，搜索引擎搜索不到。

注意使用前必须在控制台使用json-server xx.json命令运行json文件。

综上，文章分享完毕。鄙人学识浅薄，实在不敢与各位大佬相提并论，正在努力搬砖学习，欢迎各位大佬指出问题，提出意见，大家一起携手共建计算机的一片春天。

Ajax理解及其应用