ajax

ajax是异步的JavaScript和xml，ajax是一种用于创建快速动态网页的技术。

什么是ajax

Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。

ajax优点

Ajax的目的是提高用户体验，较少网络数据的传输量。由于AJAX请求获取的是数据而不是HTML文档，因此它也节省了网络带宽。

ajax工作原理

通俗易懂的理解：

1. 浏览器通知XHR向服务器获取数据
2. 浏览器继续做别的事情
3. XHR向服务器请求数据
4. 服务器返回数据给XHR
5. XHR通知浏览器数据到了
6. 浏览器收到XHR返回的数据渲染页面

ajax的使用

创建核心对象XMLHttpRequest

    var xhr=null;
    // 兼容 IE7+, Firefox, Chrome, Opera, Safari
    if (window.XMLHttpRequest) {
        xhr=new XMLHttpRequest();
    } else{
        // 兼容 IE6, IE5 
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    } 

设置请求方式、请求路径、是否异步

xhr.open(method,url,async);

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

// get请求如果有参数就需要在url后面拼接参数，
// post如果有参数，就在请求体中传递
xhr.open("get","validate.php?username="+name)
xhr.open("post","validate.php");

设置请求头

注意： post请求一定要设置请求头的格式内容（发送信息至服务器时内容编码类型） xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

设置请求体

// post请求时才使用字符串参数，否则不用带参数。
send(string);

服务器响应处理（区分同步和异步的情况）

responseText：获得字符串形式的响应数据
responseXML：获得XML形式的响应数据

同步处理
xhr.open("GET","info.txt",false);  
xhr.send();  
// 获取数据直接显示在页面上
document.getElementById("myDiv").innerHTML=xhr.responseText;

异步处理
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById("myDiv").innerHTML=xhr.responseText;  
    }
}

readyState是标记当前XMLHttpRequest对象的状态值，共有5个状态值：
0：未初始化 -- 未调用.open()方法；
1：启动 -- 已经调用.open()方法，但未调用.send()方法；
2：发送 -- 已经调用.send()方法，但尚未接收到响应；
3：接收 -- 已经接收到部分响应数据；
4：完成 -- 已经接收到全部响应数据，而且已经可以在客户端使用了；

state是http状态码
常用状态码
200 表示从客户端发来的请求在服务器端被正常处理了。
204 表示请求处理成功，但没有资源返回。
301 表示永久性重定向。
302 表示临时性重定向。
400 表示请求报文中存在语法错误。
401 表示未授权（Unauthorized)，当前请求需要用户验证
403 表示对请求资源的访问被服务器拒绝了
404 表示路径错误。
500 表示服务器端在执行请求时发生了错误。也有可能是Web应用存在的bug或某些临时的故障。
503 表示服务器正在进行停机维护，现在无法处理请求。

取消请求

使用 XMLHttpRequest 对象上的 abort 方法来取消请求

ajax
    xhr.abort()
    
axios
    CancelToken

get、post

get：一般通过url传递参数，通过 ? 跟在 URL 后面的，多个参数通过 & 连接 比如：www.lxh.com?id=bianchengsanmei&content=123

• get传送的数据量较小，不能大于2KB
• get速度更快，但是不安全

post

• post：参数一般是包含在request body中（请求体）
• post：传送的数据量较大，一般被默认为不受限制
• post：速度稍微慢一点，但安全性高点

跨域

同源策略：同源（协议、域名、端口号）

jsonp
利用了script标签没有跨域限制的这个特性来完成的。需要服务器的支持。
缺点：只支持GET方法

cors
跨域资源共享
需要浏览器和服务器的同时支持，需要后端配置access-control-allow-origin

node正向代理（中间件代理）
http-proxy-middleware中间件

nginx反向代理
实现原理类似node中间件代理，需要搭建一个nginx服务器，用于转发请求。

axios文档

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

安装：npm install axios

get

axios.get('/user?id=222').then(function (res) {
    console.log(res);
}).catch(function (err) {
    console.log(err);
});

// 上面的请求也可以这样做 
axios.get('/user', {
    params: {
        id: 12345,
    }
}).then(function (res) {
    console.log(res);
}).catch(function (err) {
    console.log(err);
});

post

axios.post('/login', {
    username: 'lxh',
    password: '222',
}).then(function (res) {
    console.log(res);
}).catch(function (err) {
    console.log(err);
});

请求方法的别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

响应数据类型responseType

/*`responseType` 表示服务器响应的数据类型
  可以是：arraybuffer、blob、document、json、text、stream
*/
responseType: 'json', // default

// 请求响应的结构
{
    data: {}, // 由服务器提供的响应   
    status: 200, // 来自服务器响应的 HTTP 状态码   
    statusText: 'OK', // 来自服务器响应的 HTTP 状态信息
    headers: {}, // 服务器响应的头   
    config: {}, // 是为请求提供的配置信息 
    request: {}, // 是生成此响应的请求
}

请求头Content-Type

// 数据会以json字符串的形式发送到后端（默认）
Content-Type:application/json
// 数据以键值对发送给后端
Content-Type:application/x-www-form-urlencoded
// 可以传键值对，也可以传文件
Content-Type:multipart/form-data

// application/json
let params = {username: 'lxh'} // 可以是对象/数组
axios({
    method: 'post',
    url: '/user',
    data: JSON.stringify(params)
})

// application/x-www-form-urlencoded
import qs from 'qs';
const obj = { 'bar': 123 };
axios({
    method: 'POST',
    headers: { 'content-type': 'application/x-www-form-urlencoded' },
    data: qs.stringify(data),
    url: '/user',
});

使用URLSearchParams API，不用设置Content-Type: application/x-www-form-urlencoded。
const params = new URLSearchParams();
params.append('key1', 'value1');
params.append('key2', 'value2');
axios.post('/user', params);

// multipart/form-data
一般图片上传、文件上传
let data = new FormData();
data.append('image','images');
data.append('file','files');
axios({
    url:`image`,
    method:'post',
    data，
    headers: {
        'Content-Type': 'multipart/form-data',
    },
})

JSON.stringfy() 和 qs.stringfy() 的区别

let obj = { name: 'lxh', age: 25 }
JSON.stringfy(data) //  "{ 'name' : 'edward' , 'age' : '25' }"
qs.stringfy(data) // 'name=edward&age=25'

谢谢