0818-几种AJAX请求实现

几种AJAX请求实现

直接使用 XMLHttpRequest 对象

//GET请求
const xhr = new XMLHttpRequest();
    //响应数据类型
	xhr.responseType = "json";
    // 初始化
    xhr.open("GET", "http://127.0.0.1:8888/json-server");
    // 发送
    xhr.send();
    // 事件绑定 处理返回结果
    xhr.onreadystatechange = function (){
        if(xhr.readyState == 4) {
            if(xhr.status == 200){
                result = xhr.response.number;
            }
        }
    }
    
//POST请求
let xhr = new XMLHttpRequest();
    xhr.open("POST", "http://127.0.0.1:8888/server");
    // 设置请求头
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

    xhr.send("a=100&b=200");
    xhr.onreadystatechange = () => {
        if(xhr.readyState == 4){
            if(xhr.status == 200 && xhr.status <= 300){
                result.innerHTML = xhr.response;
            }
        }
    }

---

##使用fetch

//GET请求
fetch("http://127.0.0.1:8888/fetch-server?vip=8", {
    method: "GET",
    headers: {
        name: "fafa"
    },
}).then(value => {
    return value.text();
}).then(value => {
    console.log(value);
});


//POST请求
fetch("http://127.0.0.1:8888/fetch-server?vip=8", {
    method: "POST",
    headers: {
        name: "fafa"
    },
    body: "username=admin&password=111111"
}).then(value => {
    return value.text();
}).then(value => {
    console.log(value);
});

---

使用axios

//GET请求
axios.defaults.baseURL = "http://127.0.0.1:8888";
axios.get("/axios-server", {
    // url参数
    params: {
        id: "kaka",
        vip: 8
    },
    // 
    headers: {
        name: "kaka",
        sex: "boy,"
    }
}).then(value => {
    console.log(value);
}).catch(error => {
    console.log(error);
});

//POST请求
axios.post("/axios-server",
    // 请求体
    {
        name: "7",
        pw: "700"
    },{
        params: {
            name:"cr7",
            num: 7
        },
        headers: {
            height: 177,
            weight: 85
        }
    }
).then(value => {
    console.log(value);
}, reason => {
    console.log(reason);
});

//通用
axios({
    method: "POST",
    url: "/axios-server",
    params: {
        name:"cr77",
        num: 77
    },
    headers: {
        a: 100,
        b: 200
    },
    data: {
        username: "admin",
        pw: 111111
    }
});

---

##使用jQuery

// 基本用法无参数get请求
$.ajax({
    url:"http://127.0.0.1:8888/jquery-serve",
    success:function(result){
        console.log(result);
    }
}
// 需指定方法则增加method字段
$.ajax({
    url:"http://127.0.0.1:8888/jquery-serve",
    method:"POST",
    success:function(result){
	console.log(result);
    }
}
// 有参数，则增加data字段，有请求头则增加headers字段，有错误处理增加error字段
$.ajax({
    url:"http://127.0.0.1:8888/jquery-serve",
    data:{a:10},
    success:function(result){
    	console.log(result);
    },
    error:function(xhr,status,error){
    	console.log(error);
    }
});
// data在post下是表单格式，在get下是querystring格式
// 通过以下方法指定为json格式[json格式本质就是body里是json字符串，头里是application/json]
$.ajax({
    url:"http://127.0.0.1:8888/jquery-serve",
    headers:{ contentType: "application/json"},
    method:"POST",
    data:JSON.stringify({a:10}),
    success:function(result){
	console.log(result);
    }
});

---

Server端借助的是express框架，代码如下：

const express = require("express");
const { request, response } = require("express");

// 创建应用对象
const app = express();

app.all("/axios-server", (request, response) => {
    response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
    response.setHeader("Access-Control-Allow-Headers", "*")
    let data = {
        name: "kaka",
        age: "40"
    }
    response.send(JSON.stringify(data));
});