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（响应成功）、304xhr.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);
- HTML5 中对 XMLHttpRequest 类型进行改进
-
- 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：请求方法，默认为
GETdataType：服务端响应数据类型
contentType：请求体内容类型，默认
application/x-www-form-urlencodeddata：需要传递到服务端的数据，如果 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 请求，功能较为完善
