Ajax 原理和基本使用

目录

1、Ajax 的诞生

2、Ajax 基本原理

3、Ajax 的基本使用

4、其余属性和方法补充

---

1、Ajax 的诞生

Asynchronous JavaScript and XML（Ajax ，异步的 JavaScript 和 XML），是利用 JavaScript 脚本与 XML 数据实现客户端与服务端进行异步通信的一种方式，它不是新的编程语言，而是一种使用现有标准的新方法。Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

Ajax 是如何诞生的呢？众所周知，浏览器可以发请求和接收响应，那可不可以把这个功能暴漏给开发者，让开发者自己控制浏览器发请求的时机呢？于是乎 Ajax 就应运而生了，浏览器在 window 对象上加了一个 XMLHttpRequest 函数 ，用这个构造函数（类）可以构造出一个对象，JavaScript 通过它可以实现发请求，收响应。

Ajax 诞生时是通过 xml 语言进行前后端交互信息的，但是后来出现了一种更好的标记语言：JSON（JavaScript Object Notation），相比 xml 语言 JSON 语言更加适合作为前后端交互的媒介，所以现如今，前后端通过 Ajax 交互式基本是使用 JSON。

补充：JavaScript 支持的数据类型有：number、string、symbol、boolean、null、undefined、object。而 JSON 支持的数据类型有：string、number、boolean、null、object、array，而且 string 类型必须要用 双引号（" "）包裹，不支持 undefined。

浏览器提供了一个 window.JSON 对象，内置两个方法：JSON.parse() 、JSON.stringify()。负责 JavaScript 和 JSON 之间的数据转化。

JSON.parse()  是将符合 JSON 语法的字符串转换成 JavaScript 对应类型的数据，由于 JSON 只有六种类型，所以转成的数据也只有 6 种，如果不符合 JSON 语法，则直接抛出一个 Error 对象，一般用 try catch 捕获错误。

JSON.stringify() 是 JSON.parse 的逆运算，JavaScript 数据 => JSON 字符串，由于 JavaScript 的数据类型比 JSON 多，所以不一定能成功，如果失败，就抛出一个 Error 对象。

let object;
try{
    object = JSON.parse({'name':'erha'});    //因为JSON不支持单引号的字符串，会报错
}catch(error){
    console.log('出错了，错误详情是:')
    console.log(error);
    object = {'name':'no name'}
}

2、Ajax 基本原理

Ajax 本质上就是在 Javascript 中多添加了一个对象：XMLHttpRequest 对象，所有的异步交互都是使用 XMLHttpRequest 对象完成的。XMLHttpRequest 对象提供了与服务器端进行通信的协议，浏览器可以通过 XMLHttpRequest 对象向服务器发送请求，并使用 JavaScript 处理响应信息，然后在 DOM 中显示数据。

使用 XMLHttpRequest 对象实现异步通信一般需要下面几个步骤：

（1）定义 XMLHttpRequest 实例对象：var xmlHttp = new XMLHttpRequest();

（2）调用 XMLHttpRequest 对象的 open() 方法打开服务器端 URL 地址。

（3）注册 onreadystatechange 事件处理函数，准备接收响应数据，并进行处理。

（4）调用 XMLHttpRequest 对象的 send() 方法发送请求。

3、Ajax 的基本使用

3.1、创建 XMLHttpRequest 对象

let http = new XMLHttpRequest();    //并不是所有浏览器都支持

3.2、建立 XMLHttpRequest 链接

创建 XMLHttpRequest 对象 http 之后，可以使用该对象的 open() 方法建立一个 HTTP 请求

let http = new XMLHttpRequest();    //并不是所有浏览器都支持
http.open('GET','url');    //一般只用这两个参数，其余参数如下：

http.open(bstrMethod,bstrUrl,varAsync,bstrUser,bstrPassword);
//1、参数 bstrMethod:HTTP 方法字符串，如 POST、GET 等，不区分大小写
//2、参数 bstrUrl:请求的URL地址字符串，可以为相对地址或绝对地址
//3、参数 varAsync:布尔值，可选参数，指定是否为异步方式，默认为true。
//    如果是true，当状态改变时会调用onreadystatechange属性指定的回调函数
//4、参数 bstrUser:可选参数，如果服务器需要验证，该参数指定用户名。
//    如果未指定，当服务器需要验证时，会弹出验证窗口
//5、参数 bstrPassword:可选参数，验证信息中的密码部分，如果用户名为空，则此值将被忽略

3.3、发送请求到服务器端

http.open() 之后，就可以使用 send() 方法发送请求到服务器端，并接收服务器的响应

XMLHttpRequest.send(varBody);
//参数 varBody:表示将通过该请求发送的数据，如果不传递信息，可以设置为null

该方法的同步或异步取决于open() 方法中的 varAsync 参数，如果 varAsync 参数值为 false，此方法将会等待请求完成或者超时后才返回，如果 varAsync 参数值为 true，此方法将立即返回。

3.4、接收服务器响应

使用 send() 方法发送请求到服务器端后，服务器将客户端请求的数据返回给客户端，使用 XMLHttpRequest 对象的  responseBody、responseStream、responseText 或 responseXML 属性可以接收响应数据。例如：

var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET","url.asp",false);    //请求url.asp文件中的数据
xmlHttp.send();
alert(xmlHttp.responseText);    //返回url.asp文件中的数据

3.5、onreadystatechange 事件

XMLHttpRequest 对象创建的请求可能成功也可能失败，成功和失败对应两个回调函数：onload() & onerror() ，但是这个 onerror() 并不能很好的匹配 Ajax。一般都会使用 onreadystatechange 事件来代替它们，onreadystatechange  事件会在 XMLHttpRequest 对象的状态发生变化时被调用。下面介绍一下 XMLHttpRequest 对象的 5 种状态：

0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法
1：请求已开始，open()方法已调用，但还没调用send()方法
2：请求发送完成状态，send()方法已调用
3：开始读取服务器响应
4：读取服务器响应结束

4、其余属性和方法补充

4.1、XMLHttpRequest 对象属性描述

onreadystatechange	状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	返回当前请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
status	返回当前请求的HTTP状态码（如：404 = “文件末找到” 、200 =”成功” ，等等）
statusText	返回服务器的状态文本信息 ，HTTP状态码的相应文本（OK 或 Not Found（未找到）等等）
responseBody	返回正文信息
responseStream	以文本流的形式返回响应信息
responseText	以字符串的形式返回响应信息
responseXML	以XML数据的形式返回响应信息

4.2、XMLHttpRequest 对象方法描述 

open()	创建一个新的HTTP请求，并指定此请求的方法、URL，以及验证信息（用户名/密码）
send()	发送请求到HTTP服务器并接收回应
getAllResponseHeaders()	获取响应的所有头部信息
getResponseHeader()	从响应信息中获取指定的HTTP头信息
setRequestHeader()	单独指定请求的某个HTTP头信息
abort()	取消当前请求