什么是Ajax?Ajax如何发送请求（详）
setRequestHeader('Header', 'Value')* 此方法必须在open()后调用在目标目录下创建 index.html 文件，然后来编写请求：
Ajax
在浏览器中查看一下效果：
可以获取到搭载Node.js服务器上的接口数据，那么如何来处理服务器返回来的信息呢？
处理服务器返回的信息
请求已经发出去了，等待服务器响应返回数据信息，当服务器返回信息时Ajax如何来对服务器返回的信息进行处理有这样几个属性：属性、属性、属性和获取响应信息的 和 属性。
属性
该属性可以获取 Ajax的当前状态，5种形式如下：
Ajax对象的状态值 状态值说明解释
属性名
未发送
对象已经创建，尚未调用open()方法
.
已打开
open()方法已调用，此时可以调用send()方法发起请求
.
收到响应头
send()方法已调用，响应头已经被接收
.
数据接收中
响应体正在被接收，将会在载入的过程中拥有部分响应数据
.
完成
数据接收完毕，可通过获取完成的响应
.DONE
属性
当从这个属性名就可以猜到 可以监听 属性状态的改变，每当 的值发生改变时，就会调用此事件，调整一下index.html代码：（不再演示自行测试效果即可）
属性
属性用于返回当前请求HTTP状态码，请求成功后会返回 200 ， 与 属性类似，它是一个字符型数据，包含短语 —— OK ，这些可以自行测试效果。
将响应的信息作为字符串返回，而则是将响应信息格式化为 XML 对象返回（只读），请求失败或内容无法解析均是null值，服务器在返回XML时需设置响应头： -Type: text/xml 或 /xml
以上时处理返回信息服务器返回信息相关属性的了解认识，下面通过以上这些来使用Ajax请求发起GET和POST请求；需要在Node.js服务器中编写对应的请求接口，这里暂不提供，如有需要可以在评论区留言。
Ajax - GET 请求
Node.js搭载的服务器端接口API已经准备好了，下面来通过ajax发起GET请求：
API接口
:3000/ajax/
GET请求
是否参数
无
创建 .html文件编写如下代码：
getInfo
可以看到打印出来的时响应信息，好像跟平常的不大一样，JSON.() 则是转为字符串，而 JSON.parse() 则是解析字符串为json格式，如下：
console.log(JSON.parse(xhr.responseText))效果如下：
以上这块内容就是使用ajax来发送get请求，下面来看POST请求；
Ajax - POST 请求
在进行Ajax开发时，经常使用GET方式和POST方式发送请求，GET方式适合从服务器获取数据，POST方式适合向服务器发送数据，这两种方式都可以使用URL参数来传递一些数据，在使用POST请求方式发送数据时，需要设置内容的编码格式来告诉服务器用什么格式来解析编码。下面先来看一下Node.js搭载的后台服务器API接口：
API接口
:3000/ajax/
POST请求
是否参数
是
参数信息
()，()
请求成功
= syan， =
{ code: 0 ，:{ : 200，msg: '登录成功'}}
请求失败
≠ syan， ≠
{ code: 1 ，:{ ：200，msg: '登录失败'}}
测试API接口：
创建 login.html 页面来编写代码：
Login
测试效果：
POST请求需要设置请求头来告诉服务器需要使用什么编码来解析，以及POST请求需要发送什么指定数据，如请求参数可以通过send()方法进行发送，以上就是Ajax发送POST请求的内容。
数据交换格式 XML / JSON
前后端确保通信双方能够准确识别对方发送信息则需要约定一种格式来做数据交换，常用的交换格式就有 XML 和 JSON 两种。
XML 数据格式
XML是可拓展标记语言，XML主要用于描述和存储数据，可以自定义标签，与HTML都是标签语言，下面来看一个简单XML文档，在实际开发者，XML通常不是一个静态的资源，基本是通过程序的处理最后得到的：
那么在Node.js后台搭载API接口可以使用通过一个数组，然后使用for循环拼接字符串得到然后进行反馈即可，下面来用测试一下接口：
用表格来描述一下 API 接口：（这里要非常注意的是在搭载Node服务器编写API接口时，记得为该接口设置请求头：("-Type","/xml")，否则请求接口返回时在Ajax中使用无法解析）
API接口
:3000/ajax/xml
POST请求
是否参数
无
编码格式
XML
下面来创建 xml.html 文件来编写代码，请求该接口后返回的XML数据通过Ajax对象的进行数据处理。
XML
测试效果：
除了上述的这种XML数据格式还有就是现如今流行的 JSON 数据格式，这个就不再多讲了，在上面 Ajax-GET请求 返回的数据使用 JSON.parse() 方法进行解析字符串为对象，相对于XML数据格式来说JSON对象访问属性的方法获取数据更为方便，同时在中可以轻松将JSON对象和字符串进行转化，JSON.() 转字符串，JSON.parse()解析成对象。
Ajax 跨域
相关跨域的内容篇目其实讲过蛮多的了，我们都知道出于安全，浏览器中禁止跨域请求的，那么为什么我们刚刚在请求的时候好像没有出现跨域请求的问题；
如上图服务器和客户端不同源可访问成功请求结果打印在了控制台，这是在搭Node.js服务器的时候就解决了跨域访问使用的是CORS，跨域的方式有JSONP，反向代理等跨域的方式，感兴趣的可以看一下这篇文章：十二、接口编写 —— 跨域问题接口跨域
那么下面我们来将搭载的Node服务器关闭掉解决跨域的中间件，然后来看一下跨域请求报错的样子：
这是因为跨域请求会导致网页失去安全性，所以被浏览器所阻止，浏览器遵循同源策略，同源指的是 URL地址中的协议 、域名 和 端口 都要相同。下面来个图示简单了解：
协议不同
:3000
:3000
域名不同
端口不同
:3000
:5500
通过以上我们也就知道了浏览器阻止Ajax跨域请求，当目标服务器主动允许跨域请求时，即后台解决了跨域访问的问题，Ajax就能实现跨域访问。
封装Ajax请求 ——
是 ES6的内容，在代码层上 解决了 "回调地狱" 的问题，什么是回调地狱？这里不用文邹邹的描述，就用直白一点的吧，就是一个异步请求执行完成后执行下一个异步操作，以此嵌套下去，嵌套越多，代码可读性差，还有当我下一个请求需要上一个请求返回的内容就需要等，这样一来就会形成 "回调地狱"，那么我们避免在Ajax请求中出现 "回调地狱" 的问题就可以利用 对象提供的语法进行解决，其中有两个参数 和 ，属于高阶函数（函数里包函数）。请求成功调用 ，请求失败调用 ，下面来用一个 js 文件编写引入作为模块，当然你要在标签编写也可以。
// 封装ajax —— Promisefunction xhr (options) {return new Promise(function(resolve,reject){const xhr = new XMLHttpRequest();// METHOD: GET/POSTxhr.open(options.type || 'GET', options.url)// onreadystatechangexhr.onreadystatechange = function () {if(xhr.readyState === XMLHttpRequest.DONE){ // XMLHTTPRequest.DONE : 4if(xhr.status >= 200 && xhr.status <= 300 || xhr.status === 304){// successresolve(xhr.responseText)}else{// failreject('ERROR: SERVER ERROR ...')}}}// data为请求参数xhr.send(options.data)})
}引入并调用：
Ajax
如果是POST请求，那么刚刚的封装显然是欠佳的，因为Post 请求头是需要设置的，所以对原来的封装进行调整然后测试一下Post请求：
// 封装ajax —— Promisefunction xhr (options) {return new Promise(function(resolve,reject){const xhr = new XMLHttpRequest();// METHOD: GET/POSTxhr.open(options.type || 'GET', options.url)// setHeaderxhr.setRequestHeader("Content-Type", options.setHeader || 'application/x-www-form-urlencoded')console.log(options)// onreadystatechangexhr.onreadystatechange = function () {if(xhr.readyState === XMLHttpRequest.DONE){ // XMLHTTPRequest.DONE : 4if(xhr.status >= 200 && xhr.status <= 300 || xhr.status === 304){// successresolve(xhr.responseText)}else{// failreject('ERROR: SERVER ERROR ...')}}}xhr.send(options.data)})
}
Login
测试一下效果：
ajax封装的内容就到此结束了，我们的篇目也随之来到尾声，本篇讲到了什么是Ajax?Ajax的优势有哪些，如何来发起Ajax？以及使用Ajax来发起GET和POST请求，Ajax跨域的问题 以及 使用 Ajax处理数据 XML 和 JSON 格式转化的问题，让大家更好的了解到什么是Ajax，那么本篇内容就到此结束啦，感谢大家的支持，创作不易，点赞关注一下吧！
