JS基础（六）--- Ajax的操作

Ajax: Asynchronous Javascript And XML，是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应

发送 ajax 请求步骤

1、创建 XMLHttpRequest 对象
xhr = new XMLHttpRequest()
IE6 兼容写法：
xhr = new ActiveXObject("Microsoft.XMLHTTP")
2、创建 HTTP 请求,并指定该 HTTP 请求的方法、URL
xhr.open(http-method,url)
- http-method：HTTP请求方法，「GET」、「POST」、「PUT」、「DELETE」等
- url：发送请求的URL地址

3、设置响应 HTTP 请求状态变化的函数，并获取异步调用返回的数据，使用 JS 和 DOM 操作实现局部刷新
xhr.onreadystatechange=function(){}

readyState 属性
HTTP请求的当前所处的状态

readyState	状态描述	说明
0	UNSENT	XHR 被创建，但尚未调用 open( ) 方法
1	OPENED	open( ) 方法已经被调用，建立了连接
2	HEADERS_RECEIVED	send( ) 方法已经被调用，并且已经可以获取状态行和响应头
3	LOADING	响应体下载中， responseText 属性可能已经包含部分数据
4	DONE	响应体下载完成，可以直接使用 responseText

status
服务器响应状态码，200（响应成功）、304

xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
      if ( (this.status >= 200 && this.status < 300) || this.status === 304 ) {
        // 接收服务器的响应数据
        var data = JSON.parse(this.responseText)
        //  数据处理......
      }
    }
  }

HTML5 中对 XMLHttpRequest 类型进行改进
xhr.onload 事件：只在请求完成时触发
xhr.onprogress 事件：只在请求进行中触发

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://***");
xhr.onload = function () {}
  // 处理请求完成后的 逻辑
}
xhr.onprogress = function (e) {
  // 处理请求过程中的 逻辑
}
xhr.send(null);

setRequestHeader() 方法设置请求头
- 语法：xhr.setRequestHeader(header,value)
- header: 一般设置 “Content-Type” ，传输数据类型，即服务器需要我们传送的数据类型
- value：具体的数据类型，常用 "application/x-www-form-urlencoded" 和 "application/json"

4、发送 HTTP 请求
xhr.send(data)
data：xhr请求中要发送的数据体(一般POST方法需要data，而get不需要)

jQuery中的ajax方法

$.ajax({})，常用选项参数：
- url：请求地址
- type：请求方法，默认为 GET
- dataType：服务端响应数据类型
- contentType：请求体内容类型，默认 application/x-www-form-urlencoded
- data：需要传递到服务端的数据，如果 GET 则通过 URL 传递，无需设置该属性，如果 POST 则通过请求体传递
- timeout：请求超时时间，ms
- beforeSend：请求发起之前触发
- success：请求成功之后触发（响应状态码 200，304）
- error：请求失败触发
- complete：请求完成触发（不管成功与否）

Axios的使用

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 axios中文文档

axios api，使用方式
- axios(config) ：config为对象格式的配置选项
- axios(url, config)：config可省略
axios常用配置项
- url：用于请求的服务器 URL，必需
- method：创建请求时使用的方法，如：‘get’、'post'等
- baseURL：传递相对 URL 前缀，将自动加在 url 前面
- headers：即将被发送的自定义请求头
- params：即将与请求一起发送的 URL 参数（get）
- data：作为请求主体被发送的数据（post可用）
- timeout：指定请求超时的毫秒数(0 表示无超时时间)
- responseType：表示服务器响应的数据类型，默认 “json”
全局配置默认值
axios.defaults.baseURL = 'http://***'

axios请求响应的结构

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

   // `config` 是为请求提供的配置信息
  config: {},
   // `request '是生成此响应的请求
  request: {}
}

自定义Axios实例

const instance = axios.create({
  baseURL: 'https://***'
});

Axios拦截器

// 添加请求拦截器
const myInterceptor =  axios.interceptors.request.use(function (config) {
  // 发送请求前，处理配置项 
  // ....
  return config;
}, function (error) {
  // 处理响应错误
  return Promise.reject(error);
});
// 可以移除拦截器
axios.interceptors.request.eject(myInterceptor);

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 针对响应数据，进行相关处理
  // ...
  return response;
}, function (error) {
  // 处理响应错误
  return Promise.reject(error);
});

跨域

两种简单的跨域方式：

jsonp跨域

原理：通过具有src属性的标签引用静态资源，这种方式不受跨域限制

主要是在客户端定义一个回调做一些参数接受与操作的处理，并把回调函数告知服务器，而服务器做的就是按照 JS 的语法把数据放到约定好的回调函数中即可，基本过程如下：

// 动态生成script标签
var script = document.createElement('script')
script.src = 'http://****?callback=getData'
// 添加到head中
document.head.appendChild(script)

// 定义回调函数，参数data 为接收服务器传来的数据
function getData(data) {
  // 处理数据data
}

需要注意的是，jsonp跨域只能实现GET请求

CORS跨域

Cross Origin Resource Share，跨域资源共享，进行跨域请求资源时，只需要在被请求的服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头，表示这个资源是否允许指定域请求，可设置的值有：

Access-Control-Allow-Origin 的值：
* : 表示允许任意源访问，不安全
http://***.com : 允许指定的源访问

CORS 支持所有类型的 HTTP 请求，功能较为完善