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状态。

服务器状态

• 1xx

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

• 2xx

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

• 3xx

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

• 4xx

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

• 5xx

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

拓展

常见服务器状态

• 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'});
复制代码

Put

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

Delete

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

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

总结

Ajax优势：

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

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

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

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

作者：菜菜的小霞
链接：https://juejin.cn/post/7212924329427927098
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。