第二十三章 javascript请求方式Ajax

一、Ajax的概念

1. ajax是前后端数据交互的重要手段
2. Ajax 全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），它并不是 JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。
3. Ajax 这个概念是由 JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术，是一串技术的集合，主要有：
   • 异步JavaScript，通过用户或其他与浏览器相关事件捕获交互行为
   • XMLHttpRequest 对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求；
   • 服务器上的文件，以 XML、HTML 或 JSON 格式保存文本数据；
   • 其它 JavaScript，解释来自服务器的数据（比如 PHP 从 MySQL 获取的数据）并将其呈现到页面上。
4. 由于 Ajax 包含众多特性，优势与不足也非常明显。优势主要以下几点：
   • 不需要插件支持（一般浏览器且默认开启 JavaScript 即可）；
   • 用户体验极佳（不刷新页面即可获取可更新的数据）；
   • 提升 Web 程序的性能（在传递数据方面做到按需发送，不必整体提交）；
   • 减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；
5. 而 Ajax 的不足由以下几点：
   • 不同版本的浏览器对 XMLHttpRequest 对象支持度不足(比如 IE5 之前)；
   • 前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会记录前后页面）；
   • 搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）；

二、Ajax的使用

使用流程

1. 创建xhr对象：
   • const xhr = new XMLHttpRequest( );
2. 设置请求参数
   • xhr.open('get', 'data/test.json', true);
     • 参数1：请求方式：POST || GET
     • 参数2：要请求的url
     • 参数3：true异步，false同步
3. 观察状态（是否接通）
   • onreadystatechange：当xhr.readyState发生改变时触发
   • onload：当xhr.readyState为 4 时触发
4. 发送
   • xhr.send(null);
5. ajax使用get方式和post发送请求的主要区别：
   • open的第一个参数
   • 发送请求数据的位置
     • get数据在url后拼接
     • post数据传给send方法
   • 发送数据的格式
     • get数据默认格式为：**querystring**
     • post数据需要手动设置为：**application/x-www-form-urlencoded**
       • ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr 状态码：xhr.readyState

状态码	含义
0	（未初始化）还没有调用send()方法
1	（载入）已调用send()方法，正在发送请求
2	（载入完成）send()方法执行完成，已经接收到全部响应内容
3	（交互）正在解析响应内容
4	（完成）响应内容解析完成，可以在客户端调用了

http 状态码：xhr.status

状态码	含义
1**	请求收到，继续处理
2**	操作成功收到，分析、接收
3**	完成此请求必须进一步处理
4**	请求包含一个错误语法或不能完成
5**	服务器执行一个完全有效请求失败

100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本

200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求

300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除

400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——端口过载，服务器使用另一个端口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支持请求头中指定的HTTP版本

三、发送数据的数据格式 - Content-Type

Content-Type（MediaType），即是Internet Media Type，互联网媒体类型，也叫做MIME类型。在互联网中有成百上千种不同的数据类型，HTTP在传输数据对象时会为他们打上称为MIME的数据格式标签，用于区分数据类型。最初MIME是用于电子邮件系统的，后来HTTP也采用了这一方案。

在HTTP协议消息头中，使用Content-Type来表示请求和响应中的媒体类型信息。它用来告诉服务端如何处理请求的数据，以及告诉客户端（一般是浏览器）如何解析响应的数据，比如显示图片，解析并展示html等等。

1. Content-Type的语法：
   • Content-Type: type/subtype;parameter
     • type：主类型，任意的字符串，如text，如果是*号代表所有；
     • subtype：子类型，任意的字符串，如html，如果是*号代表所有，用“/”与主类型隔开；
     • parameter：可选参数，如charset，boundary等。
   • 例如：
     • Content-Type: text/html;
     • Content-Type: application/json;charset:utf-8;
2. 常见的媒体格式类型如下：
   • text/html ： HTML格式
   • text/plain ：纯文本格式
   • image/gif ：gif图片格式
   • image/jpeg ：jpg图片格式
   • image/png：png图片格式
   • application/xml：XML数据格式
   • application/json：JSON数据格式
   • application/pdf：pdf格式
   • application/x-www-form-urlencoded ： 中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）
   • multipart/form-data：需要在表单中进行文件上传时，就需要使用该格式

四、其他

1. POST和GET的区别

1. POST主要用来发送数据，GET主要用来获取数据；
2. POST发送数据的安全性较好，而GET较差；
3. POST发送数据不限制大小，而GET大小受限2~100k。
4. 在数据获取时用GET方式，在操作数据时应使用POST方式。

2. AJAX的兼容问题

1. 正常浏览器：new XMLHttpRequest();
2. IE5：new ActiveXObject("Microsoft.XMLHTTP");

3. 个别设备中ajaxGet请求的缓存问题

1. 某次请求走缓存的条件：get请求，重复地址
   • 后果：提升速度，无法实时获取服务器最新数据
2. 不想走缓存：可以通过在url后拼接时间戳的方式解决
   • url = url + "?" + str + "__t__=" + Date.now()

4. XMLHttprequest常见事件

1. readyStateChange事件：表示readyState属性的值发生改变。
2. load事件：表示服务器响应数据接收完毕，等同于readyState为4时的状态。
3. abort事件：表示请求被中断。可通过xhr.abort()方法中断xhr请求。
4. timeout事件：表示服务器响应超时。可通过xhr.timeout=1000属性设置超时时间，单位为毫秒。
5. error事件：表示请求出错。
6. progress 事件：上传文件时，不断返回上传的进度。