Ajax, jQuery ajax, fetch，axios ヾ(⌐■_■)ノ看完你就明白了~~

知识点

XMLHttpRequest

状态码

Ajax, jQuery ajax, fetch，axios

跨域：同源策略（浏览器要保证安全），跨域解决方案

在这里插入图片描述

Ajax, jQuery ajax, fetch，axios 使用

手写一个简易的 ajax

function ajax(url) {
    const p = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)  // true 表示异步
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(
                        JSON.parse(xhr.responseText)
                    )
                } else if (xhr.status === 404 || xhr.status === 500) {
                    reject(new Error('404 not found'))
                }
            }
        }
        xhr.send(null)
    })
    return p
}

const url = '/data/test.json'
ajax(url)
.then(res => console.log(res))
.catch(err => console.error(err))

xhr.readyState

0 （未初始化）还没有调用send()方法
1 （载入）已调用send()方法，正在发送请求
2 （载入完成）send()方法执行完成，已经接收到全部响应内容
3 （交互）正在解析响应内容
4 （完成）响应内容解析完成，可以在客户端调用

xhr.status

2xx 表示成功处理请求，如：200
3xx 需要重定向，浏览器直接跳转，如：301（永久重定向） 302（临时重定向） 304（资源未改变）
4xx 客户端请求错误，如：404（请求地址有误，找不到） 403（没有权限访问）
5xx 服务端错误

jQuery 完整 ajax示例

    $(function(){
        //请求参数
        var list = {};
        //
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "http://127.0.0.1/admin/list/",
            //数据，json字符串
            data : JSON.stringify(list),
            //请求成功
            success : function(result) {
                console.log(result);
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    });

fetch 使用示例

// GET请求
fetch('http://example.com/movies.json')
	.then(function(response) {
		return response.json();
	})
	.then(function(myJson) {
		console.log(myJson);
	});

// POST 请求
fetch('http://www.mozotech.cn/bangbang/index/user/login', {
    method: 'post',
    headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams([
        ["username", "Lan"],["password", "123456"]
    ]).toString()
})
.then(res => {
    console.log(res);
    return res.text();
})
.then(data => {
    console.log(data);
})

axios 使用

axios({
    method: 'post',
    url: '/abc/login',
    data: {
        userName: 'Lan',
        password: '123'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});