AJAX快速入门

AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。

说人话就是AJAX可以根据用户操作，在网页上部分加载、调节显示的内容。

基本流程

用node做一个AJAX请求：包含浏览器对服务器发出请求和服务器对浏览器的响应。结合JS事件的交互功能，根据用户的操作更新页面。需要创建一个JS文件（服务器配置）和一个html（浏览器配置）。

在JS文件，首先引入express

const express = require("express")

创建请求

const xhr = new XMLHttpRequest();

请求方法包括get和post，post方法相比get方法，数据请求不会显示在请求报文上。应该注意的是，浏览器和服务器的响应方法必须相对应，否则会报错。不过服务器的all方法可以接受任意请求。

html设置：

// 采用get方法
xhr.open("GET", "[<http://127.0.0.1:8000/server>](<http://127.0.0.1:8000/server?a=100>)")
// 采用post方法
xhr.open("POST", "[<http://127.0.0.1:8000/server>](<http://127.0.0.1:8000/server?a=100>)")

服务器设置：

app.post("/server", (request, response) => {}
app.get("/server", (request, response) => {}
app.all("/server", (request, response) => {}

发送请求

xhr.send()

readyState是一个响应状态

readystate是xhr对象中的属性，表示状态 0: XMLHttpRequest对象创建完成。——还没有调用open()方法
1: XMLHttpRequest对象初始化完成。——已调用send()方法,正在发送请求 2: 请求已经发送——send()方法完成, 已经收到全部响应内容
3: 服务器返回了数据（但是还没有被解析，可能只一段http报文）——正在解析响应内容 4: 数据解析完成——响应内容解析完成,可以在客户端调

响应字符串码xhr.status 以2开头表示响应成功

xhr.status 响应状态码 xhr.statusText 响应状态字符串 xhr.getAllResponseHeaders 响应头 xhr.response 响应体

下面这个函数可以判断是否成功接受服务器响应的数据。

xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    // 判断响应状态码
                    if (xhr.status >= 200 && xhr.status <= 300) {
                        res.innerHTML = xhr.response
                    } else {

                    }
                }
            }

设置响应头：

允许跨域response.setHeader("Access-Control-Allow-Origin", "*")

允许浏览器自定义请求头response.setHeader("Access-Control-Allow-Header", "*")

下面是完整代码：

const express = require("express")

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

// 创建路由规则
// request请求报文
// response响应报文
app.all("/jqueryserver", (request, response) => {

    // 设置响应头 允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*")
    response.setHeader("Access-Control-Allow-Headers", "*")
    // 设置响应
    const data = { "name": "蔡徐坤" }
    response.send(JSON.stringify(data))
})
app.listen(8000, () => {
    console.log("successs")
})

当完成准备工作后，在js页面的文件夹下打开终端：

用node js文件启动服务。

还可以下载nodemon

用nodemon js文件启动服务，这样每次修改代码后就无需重启动服务来加载代码。

从服务器发送数据

json数据解析

从服务器端获取数据，服务器发送的数据是以Buffer存储的，发送要转化成JSON格式。

这是在服务器发送数据的案例。当name为xck时，要用JSON.stringify()对数据的格式进行转化。

const data = {
        name: "cxk"
    };
    let str = JSON.stringify(data);
    // 对字符串进行转换

    response.send(str)

这下面案例中，服务器向浏览器响应了一个{ "name": "蔡徐坤" }的数据，因为数据写入后储存的格式是buffer。因此，用转化成json格式的字符串JSON.stringify()。

const express = require("express")

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

// 创建路由规则
// request请求报文
// response响应报文
app.all("/jqueryserver", (request, response) => {

    // 设置响应头 允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*")
    response.setHeader("Access-Control-Allow-Headers", "*")
    // 设置响应
    const data = { "name": "蔡徐坤" }
    response.send(JSON.stringify(data))

})
app.all("/delay", (request, response) => {
    // 设置响应头 允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*")
    setTimeout(() => {
        response.send("延时响应")
    }, 3000);
})
app.listen(8000, () => {
    console.log("successs")
})

下面的js函数用于在页面点击按钮向服务器请求数据，浏览器要添加响应数据类型xhr.responseType = "json”

<script>

        const btn = document.getElementById("btn")
        const res = document.getElementById("result")

        btn.onclick = function () {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", "<http://127.0.0.1:8000/server>")
            xhr.send()
						xhr.responseType = "json"
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    // 判断响应状态码
                    if (xhr.status >= 200 && xhr.status <= 300) {
                        res.innerHTML = xhr.response.name
                    } else {

                    }
                }
            }
        }
    </script>

在设置延时：

服务器可以用一个setTimeout设置响应的延时。

setTimeout(() => {
        response.send("延时响应")
    }, 3000);

浏览器也可以对响应的时间进行检测，时间过长报错。

xhr.timeout = 2000;
            xhr.ontimeout = function () {
                alert("网络异常")
            }

防止重复发送

对浏览器进行设置可以防止用户重复发送请求对服务器构成负担，这里设置了一个isSending进行判断，当尚未发送请求时，他是false，创建请求后变为true，发送响应后又回到false。如果在用户请求尚未发送时再次发送请求，就会中断旧请求而发送一个新的请求。

<script>

        const btn = document.getElementById("btn")
        const res = document.getElementById("result")
        // 防止重复发送
        let xhr = null
        let isSending = false;

        btn.onclick = function () {
            // 创建对象
            if (isSending) xhr.abort()
            xhr = new XMLHttpRequest();
            isSending = true;
            xhr.open("GET", "<http://127.0.0.1:8000/delay>")
            // 发送请求
            xhr.send()
            xhr.onreadystatechange = function () {

                isSending = false
                if (xhr.readyState === 4) {
                    // 判断响应状态码
                    if (xhr.status >= 200 && xhr.status <= 300) {
                        console.log(xhr.status); //响应状态码
                        console.log(xhr.statusText); //响应状态字符串
                        console.log(xhr.getAllResponseHeaders());//响应头
                        console.log(xhr.response);//响应体
                        res.innerHTML = xhr.response
                    } else {

                    }
                }
            }
        }
    </script>

jquery的ajax请求

浏览器发送请求的三种方式get、post、ajax函数

<script>
        $("button").eq(0).click(function () {
            $.get("<http://127.0.0.1:8000/jqueryserver>", { a: 100 }, function (data) {
                console.log(data)
            }, "json")
        })

        $("button").eq(1).click(function () {
            $.post("<http://127.0.0.1:8000/jqueryserver>", { a: 100 }, function (data) {
                console.log(data)
            })
        })

        $("button").eq(2).click(function () {
            $.ajax({
                url: "<http://127.0.0.1:8000/jqueryserver>",
                data: { a: 100 },
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    console.log(data)
                },
                // 失败处理
                timeout: 2000
                ,
                error: function () {
                    console.log("出错了")
                },
                // 头信息
                headers: {
                    c: 300,
                    d: 4000
                }
            })
        }) 
    </script>

const express = require("express")

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

// 创建路由规则
// request请求报文
// response响应报文
app.all("/jqueryserver", (request, response) => {

    // 设置响应头 允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*")
    response.setHeader("Access-Control-Allow-Headers", "*")
    // 设置响应
    const data = { "name": "蔡徐坤" }
    response.send(JSON.stringify(data))

})
app.all("/delay", (request, response) => {
    // 设置响应头 允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*")
    setTimeout(() => {
        response.send("延时响应")
    }, 3000);
})
app.listen(8000, () => {
    console.log("successs")
})

AJAX快速入门个人笔记