原生js ajax请求使用和封装

什么是ajax

• ajax是javascript的一个方法(XMLHttpRequest)
• 相对于表单，ajax可以不用在刷新页面的情况下，可以和服务器通信获取数据并更新网页内容

创建ajax对象

let xhr = new XMlHttoRequest();

这样就通过构造函数创建了xhr对象了

设置请求方式(请求行)

请求行包含了请求方式,请求地址,

xhr.open("GET","/getData"); // 第一个参数是请求方法,第二个参数是请求地址

发送get请求

GET把参数直接写在后面就行了,格式是: ?key1=value1&key2=value2

// 设置请求行
xhr.open("GET","/getData?name=张三&age=20");
// 发送请求
xhr.send(null);

发送post请求

相对于get请求，post请求需要设置request header为application/x-www-form-urlcoded,需要将参数写在xhr.send里面，参数格式和get一样.

// 设置请求行
xhr.open("POST","/getInfo");
// 设置请求头
xhr.setRequestHeader("content-Type","application/x-www-form-urlcoded");
// 发送请求
xhr.send("name=张三&age=13")

发送get请求

因为ajax通常是运行在web服务器上的，我们需要处理前端请求，所以我们需要编写一个程序来处理请求

编写服务端

// 接收get请求
// 引入模块
const exress = require("express");
// 引入path模块
const path = require("path");

// 使用express
const app = exress();
// 设置静态资源目录
app.use(exress.static(path.join(__dirname,"public")));

// 接收并处理请求
app.get("/getData",(req,res) => {
    // 响应数据
    res.send({
        code: 200,
        msg: "请求成功!",
        data: req.query
    })
})

// 监听并启动服务
app.listen(3000,() => {
    console.log("服务监听在3000并启动");
})

编写客户端

        // 绑定事件
        document.querySelector("input[type='button']").onclick = function () {            // 1.实例化XMLHttpRequest对象
            let xhr = new XMLHttpRequest();
            // 2.设置请求行(请求方式,请求地址);
            xhr.open("get","/getData?name=张三&age=14&hobby=打篮球");
            // 发送请求
            xhr.send(null);
            // 接收请求响应
            xhr.onreadystatechange = function () {
                console.log(xhr.responseText);
                // 将数据渲染到页面中
                document.querySelector("div").innerHTML = xhr.responseText;
            }
        }

写好我们运行，然后就可以看看控制台里面是否接收到了数据

我们可以看到，控制台已经成功的接收到了服务器的响应，但是我们发现，控制台打印了三次，那是因为，readystate没发生一次变化，都会触发readystatechange事件

xhr.readyState 代码解释
0 : 实例化了XMLHttpRequest对象
1 ： 设置了请求行(xhr.open())
2 ： 发送数据(xhr.send())
3 : 接收数据中
4 ： 数据全部接收完毕

所以我们可以判断一下，确保数据全部接收完毕并且请求成功

// 绑定事件
document.querySelector("input[type='button']").onclick = function () {
    // 1.实例化XMLHttpRequest对象
            let xhr = new XMLHttpRequest();
            // 2.设置请求行(请求方式,请求地址);
            xhr.open("get","/getData?name=张三&age=14&hobby=打篮球");
            // 发送请求
            xhr.send(null);
            // 接收请求响应
            xhr.onreadystatechange = function () {
                // 判断是否请求成功并且数据全部就收完毕
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 将响应内容打印到控制台
            console.log(xhr.responseText);
            // 将内容打印到页面中
            document.querySelector("div").innerHTML = xhr.responseText;
        }

我们再来看一下效果

这样就能保证数据全部接收完毕

发送post请求

编写服务端

// 引入模块
const express = require("express");
// 引入path模块
const path = require("path");

// 使用express
const app = express();
// 设置静态资源目录
app.use(express.static(path.join(__dirname,"public")));
// 使用中间层
app.use(express.urlencoded());

// 接收并处理请求
app.post("/getUserInfo",(req,res) => {
    console.log(req.body);
    res.send({
        code: 200,
        msg: "请求成功!",
        data: req.body
    })
})

// 监听并启动服务
app.listen(3000,() => {
    console.log("服务监听在3000并启动");
})

编写客户端

document.querySelector("input[type='button']").onclick = function () {
    // 1.实例化XMLHttpRequest对象
            let xhr = new XMLHttpRequest();
            // 2.设置请求行(请求方式,请求地址);
            xhr.open("POST","/getUserInfo");
            // 3.设置请求头(Request Header);
            xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");
            // 发送请求
            xhr.send("name=张三&age=18&hobby=唱跳rap");
            // 接收请求响应
            xhr.onreadystatechange = function () {
                // 判断是否请求成功并且数据全部就收完毕
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 将响应内容打印到控制台
            console.log(xhr.responseText);
            // 将内容打印到页面中
            document.querySelector("div").innerHTML = xhr.responseText;
        }
    }
}

运行结果:

ajax封装

每次都重复的创建xhr实在是太麻烦了，我们可以将xhr封装成一个函数

let ajaxTools = {
    format: function(obj) {
        // 初始化字符串
        let str = "";
        // 遍历对象
        for (let k in obj) {
            // 将对象转换成键值对
            str = k + "=" + obj[k] + "&";
        }
        // 去掉字符串最后的&
        str = str.slice(0,-1);
        // 返回处理好的数据
        return str;
    },
    ajax: function(options) {
        // 实例化XMLHttpRequest对象
        let xhr = new XMLHttpRequest();
        // 获取数据
        let data = options["data"] || {};
        let url = options["url"];
        let type = options["type"] || "get";
        let callback = options["callback"];

        // 将数据转换为键值对
        data = this.format(data);
        xhr.open(type,url);
        // 判断请求方式
        if (type.toLowerCase() == "get") {
            // 设置请求行
            xhr.open(type,url + "?" + data);
            data = null;
        }
        // 设置请求头
        if (type.toLowerCase() == "post") {
            xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");
        }
        // 发送数据
        xhr.send(data);
        // 监听并处理响应
        xhr.onreadystatechange = function() {
            // 判断是否请求成功并且内容是否全部接收完毕
            if (xhr.status == 200 && xhr.readyState == 4) {
                // 将数据传入到callback中
                callback(xhr.responseText);
            }
        }
    }
}

这样使用起来就方便多了

文章头图: 超えた先に#オリジナル 超えた先に - smile的插画 - pixiv