.ajax

链接:https://segmentfault.com/a/1190000017396192

一、什么是Ajax

AJAX是“异步Jascript和XML”。Ajax是一种异步请求数据的web开发技术，对于提升用户体验和页面性能非常有帮助。简单来说，Ajax通过异步请求加载后台数据，呈现在网页上，无需刷新页面。常见的应用场景包括表单验证登录是否成功、百度搜索下拉框提示和快递单号查询等等。Ajax的目的是提高用户体验，减少网络数据的传输。同时，由于AJAX请求获取的是数据而不是HTML文档，也节省了网络带宽，让互联网用户的上网体验更加流畅。

二、Ajax原理是什么

在解释Ajax的原理之前，我们不妨举一个“领导要和小李谈工作”的例子。领导想和小李谈点事，就委托秘书给小李打电话，然后他就继续干别的事，直到秘书告诉他小李到了，最后小李向领导汇报。

Ajax请求的数据流类似于“领导要向小李汇报工作”。其中，最核心的依赖是浏览器提供的XMLHttpRequest对象，它起到秘书的作用，使浏览器能够发送HTTP请求，接收HTTP响应。在收到XHR返回的数据后，浏览器会做其他事情并呈现页面。

了解了Ajax的工作原理之后，我们来讨论如何使用Ajax。

三、Ajax的使用

1.创建Ajax核心对象XMLHttpRequest(兼容性)

1.var xhr = null2.如果(窗口。xmlhttprequest) 3。{//兼容IE7+，火狐，Chrome，Opera，Safari 4。xhr = newxmlhttprequest()；5.} else{//兼容IE6，IE5 6。xhr = new ActiveX object(” Microsoft。xmlhttp”)；7.} 2.向服务器发送请求

1.xhr.open(方法，url，异步)；2.发送(字符串)；//仅在//post请求时使用字符串参数，否则不需要任何参数。方法:请求的类型；GET或POSTurl:文件在服务器上的位置async:true(异步)或false(同步)注意:post请求必须设置请求头的格式内容。

xhr.open(“POST “，” test.html “，true)；xhr . setrequestheader(” Content-type “，” application/x-www-form-urlencoded “)；xhr . send(” fname = Henry & amp；lname = Ford “)；//post请求参数放在send，也就是请求体中。3.服务器响应处理(区分同步和异步情况)

ResponseText以字符串的形式获取响应数据。

ResponseXML获取XML形式的响应数据。

①同步处理

1.xhr.open(“GET “，” info.txt “，false)；2.xhr . send()；3.document.getElementById(“myDiv “)。innerHTML = xhr.responseText//获取的数据直接显示在页面②异步处理。

相对复杂，应该在请求状态改变的情况下处理。

1.xhr . onreadystatechange = function(){ 2。if(xhr . ready state = = 4 & amp；& ampxhr.status==200) { 3。document.getElementById(“myDiv “)。innerHTML = xhr.responseText4.} 5.}什么是readyState？

ReadyState是XMLHttpRequest对象的一个属性，用于标识XMLHttpRequest对象的当前状态。

ReadyState共有五个状态值，范围从0到4，每个值代表不同的含义。

0：未初始化 — 尚未调用.open()方法；1：启动 — 已经调用.open()方法，但尚未调用.send()方法；2：发送 — 已经调用.send()方法，但尚未接收到响应；3：接收 — 已经接收到部分响应数据；4：完成 — 已经接收到全部响应数据，而且已经可以在客户端使用了；

什么是地位？

HTTP状态码由三个十进制数字组成，第一个十进制数字定义状态码的类型，后两位数字没有分类功能。HTTP状态代码分为五种类型:

常见状态代码

RFC2616中记录的HTTP状态码只有40种，如果加上WebD(RFC4918，5842)和附加的HTTP状态码(RFC6585)，数量将达到60多种。接下来，我们将介绍一些有代表性的状态代码。

200 表示从客户端发来的请求在服务器端被正常处理了。204 表示请求处理成功，但没有资源返回。301 表示永久性重定向。该状态码表示请求的资源已被分配了新的URI，以后应使用资源现在所指的URI。302 表示临时性重定向。304 表示客户端发送附带条件的请求时（指采用GET方法的请求报文中包含if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一个首部）服务器端允许请求访问资源，但因发生请求未满足条件的情况后，直接返回304Modified（服务器端资源未改变，可直接使用客户端未过期的缓存）400 表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。401 表示未授权（Unauthorized)，当前请求需要用户验证403 表示对请求资源的访问被服务器拒绝了404 表示服务器上无法找到请求的资源。除此之外，也可以在服务器端拒绝请求且不想说明理由时使用。500 表示服务器端在执行请求时发生了错误。也有可能是Web应用存在的bug或某些临时的故障。503 表示服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。

③获取和发布请求数据之间的差异

使用Get请求时,参数在URL中显示,而使用Post方式,则放在send里面使用Get请求发送数据量小,Post请求发送数据量大使用Get请求安全性低，会被缓存，而Post请求反之

关于第一个区别，详见下面两张图:

其实XMLHttpRequest或者封装的框架有点老了，配置和调用方法都很混乱。近几年刚出来的Fetch提供了一个更好的选择。它不仅提供了一种简单而合理的方法来通过网络异步获取资源，而且可以很容易地被其他技术使用。