搞懂原生AJAX

作者: seven冫 | 来源:发表于2018-05-03 18:33 被阅读0次

搞懂原生AJAX
Ajax
js和jq的ajax调用
html5的ajax学习（三）
原生ajax和jquery中的ajax
ajax
Ajax Axios
ajax封装
AJAX
[转]JS原生Ajax代码示例

1. 什么是AJAX？它又能做什么？

先来看看这个名称的构成：Asynchronous JavaScript and XML
顾名思义，也就是异步的javascript和XML，而XML 被设计用来传输和存储数据。所以也可以理解为异步的请求数据。
来看看度娘给的答案：

AJAX 不是一门编程语言，是一种用于创建快速动态网页的技术(方法)
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

因为经常使用 jQuery 来做请求的原因，经常会把 AJAX 理解为是jQuery独有的东西，其实完全不是，AJAX和jQuery是两个东西，只不过是jQuery对其做了封装而已。

2. AJAX能做什么？

在传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
可以创建一个 form 表单模拟一下，当点击 submit 提交表单的时候，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。
如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。也就是以回调函数的形式，进行一个异步的操作，例如点击 submit 按钮，页面并未刷新，等数据返回成功之后，直接渲染到页面。
通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。也就是我们常说的局部刷新。-----这就是AJAX的作用

2. AJAX怎么用？

来看看如何实现一个AJAX：

XMLHttpRequest 对象是 AJAX 的基础。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
所以首先要创建一个 XMLHttpRequest 对象
```
// 第一步：创建一个 XMLHttpRequest 请求
var xmlhttp;
if (window.XMLHttpRequest) {
  // code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp = new XMLHttpRequest();
} else {
  // code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
console.dir(xmlhttp );// 看一下 XMLHttpRequest 对象都有哪些东西
```
在控制台，先看一下 XMLHttpRequest 对象都有哪些东西：

XMLHttpRequest
XMLHttpRequest 对象及其原型上有很多属性和方法，看看这些属性和方法如何构成一个异步请求：
1. 向服务器发送请求 -------- open() 和 send()
  XMLHttpRequest 对象中 open() 和 send() 方法是用来向服务发送请求的
  - open() ：规定请求的类型、URL以及请求方式
    语法：open(method,url,async)
    参数说明：
    - method：请求的类型，GET或POST
      与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
      然而，在以下情况中，请使用 POST 请求：
      - 无法使用缓存文件(需要更新服务器上的文件或数据库（GET请求可能会请求缓存文件，状态码304）)
      - 向服务器发送大量数据（POST 没有数据量限制）
      - 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
    - url：文件在服务器上的位置，也就是请求的路径
    - async：请求的方式，true(异步)或false(同步)，默认为 true；
      一定要考虑好什么情况下才设置为false，因为 false 状态为同步状态，在请求过程中，浏览器将停止响应，直到AJAX请求完成。
  了解了如何发送请求之后，我们来通过创建的XMLHttpRequest对象来发送一个请求
```
// 第二步：发送请求
xmlhttp.open('GET', '/data/test.txt', true); // 这里请求的是一个本地的文件
xmlhttp.send();
```
2. 处理服务器响应-----当请求发送到服务器以后，服务器会做出响应，需要执行一些基于这些响应的任务。
  XMLHttpRequest对象的三个重要的属性：
  - onreadystatechange ：响应的回调函数，每当 readystate 发生变化时，都会执行该函数
  - readystate : 存有 XMLHttpRequest 的状态信息，是指运行请求所经历的过程，无论访问是否成功都将响应的步骤。从 0 到 4 发生变化。
    - 0：请求未初始化
    - 1：服务器连接已建立
    - 2：请求已接收
    - 3：请求处理中
    - 4：请求已完成
  - status: HTTP状态码，无论请求是否成功，都会返回。由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码。（由1-5开头的三位数字组成）
    - 1xx：信息响应类，表示接收到请求并且继续处理
    - 2xx：处理成功响应类，表示动作被成功接收、理解和接受
    - 3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理
    - 4xx：客户端错误，客户请求包含语法错误或者是不能正确执行
    - 5xx：服务端错误，服务器不能正确执行一个正确的请求
      常见的http状态码：
    - 200：请求成功
    - 304：该资源在上次请求之后没有任何修改，表示使用的为缓存文件，请求方式为GET的时候需要注意
    - 400：无法找到请求资源
    - 401：访问资源的权限不够
    - 403：没有权限访问资源
    - 404：请求路径错误，需要访问的资源不存在
    - 405：需要访问的资源被禁止访问
    - 407：访问的资源需要代理身份验证
    - 414：请求的URL过长
    - 500：服务器内部错误
      更多状态码信息说明：http://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html
3. 接收服务器响应
  responseText 和 responseXML 属性接受服务器响应
  - responseText :获得字符串形式的响应数据。
  - responseXML:获得 XML 形式的响应数据。
  知道了如何处理服务器响应及接收服务器响应之后，我们来处理并接收服务器响应
```
// 第三步：处理服务器响应
xmlhttp.onreadystatechange = function (){
  // 判断请求是否已经完成
  if (xmlhttp.state === 4){
    // 判断请求是否成功
    if (xmlhttp.status === 200) {
      // 第四步：接收服务器响应
      // 将返回的数据渲染在DOM中
      document.getElementById('test').innerText = request.responseText;
    } else {
     // 如果请求不成功，输出状态码，根据状态码判断错误原因
      console.log(xmlhttp.status);
    }
  }
}
```
  /data/test.txt 中的数据为字符串： Hello AJAX!
  查看页面数据渲染的结果，(需要启动一个本地web服务，这里使用的是live-server)：
  
  渲染结果
  至此，一个完整的原生AJAX就出来了。