第十章认识Ajax(一)

认识Ajax

概述：

Ajax是（Asynchronous JavaScript and XML）异步JavaScript和XML的缩写，它是一种基于浏览器与服务器交互的Web开发技术。

Ajax通过使用JavaScript、XMLHttpRequest和DOM实现了在不刷新整个页面的情况下更新部分页面的能力。Ajax让网页能够达到更高的交互性和更好的用户体验。

特点：

异步传输：Ajax能够使用XMLHttpRequest在后台异步地发送和接收数据，不会对页面的加载和性能产生影响。
部分更新：通过JavaScript和DOM技术，Ajax可以对网页的某个部分进行更新，而不必刷新整个页面。
客户端脚本：Ajax的实现离不开JavaScript和DOM技术，这些技术可以使网页更加动态和交互。
跨平台、跨浏览器：Ajax可以在所有支持XMLHttpRequest的浏览器和平台上使用，因此具有很好的跨平台、跨浏览器的特性。
支持多种数据格式：Ajax可以支持多种数据格式，例如XML、JSON、HTML等，能够适应不同的应用场景。
提高用户体验：由于异步传输和部分更新的特性，Ajax能够提高用户体验，使得网页的加载速度更快，更加流畅。

Ajax 的优点包括：

减少页面刷新，提高了用户的交互体验。

可以异步地发送和接收数据，可以避免页面等待。

可以通过JavaScript和DOM来实现数据更新和操作，使得开发和维护更加容易。

支持多种数据格式，如XML、JSON等。

Ajax 的缺点包括：

无法完全支持Web应用所有的用户操作，例如，需要支持后退按钮等功能。

需要JavaScript支持，如果用户的浏览器禁用了JavaScript，则Ajax功能无法正常工作。

对搜索引擎的支持不友好，因为它们无法处理动态生成的内容。

Ajax的一些操作可能会增加服务器的负担，需要进行适当的优化。

Ajax的基本实现步骤

实现Ajax，首先要先创建服务器，然后配置Ajax对象，最后通过Ajax对象向服务器端发送请求来获取服务器端的响应

一、创建服务器

新建文件为D:code\chapter04，然后在此目录下新建server目录，并在server目录下下载Express框架（忘了可以去看第七章认识express框架的安装步骤），并新建app.js文件，编写如下代码

javascript 复制代码

const express = require("express");  //引入Express框架模块
const path = require("path");  //引入node.js核心模块path，用于处理文件路径
const app = express();  //创建一个Express应用程序实例

app.use(express.static(path.join(__dirname, 'public')));  //设置静态文件目录。将public文件作为静态资源根目录
app.get("/first", (req, res) => {  //定义一个GET请求的路由处理程序，当路径为/first时触发处理程序
    res.send('hello,Ajax');  //发送响应给客户端，返回一个简单的文本消息
});
app.listen(3000);
console.log('服务器启动成功！');

这段代码的功能是创建一个简单的Express服务器，当访问路径为/first时，返回一个包含文本消息hello,Ajax的响应。静态文件目录的设置允许访问public文件夹中的静态资源。

注意：第四行代码中使用内置中间件express.static()来设置静态文件，其中path.join()方法用于拼接静态文件访问目录，__dirname表示绝对路径，public表示文件路径。

将上述代码编写完毕就可以在命令行中输入node app.js来启动端口

（提示：服务器虽然启动成功但可能无法显示页面信息，这需要配置一些需要用到的文件）

二、配置Ajax对象

在学会如何创建服务器之后，还需要去配置Ajax对象。首先需要先创建Ajax对象，然后使用open()方法来配置Ajax对象，最后使用send()方法发送请求。步骤如下：

创建Ajax对象的语法：

javascript 复制代码

var xhttp = new XMLHttpRequest();

配置Ajax对象的语法：

javascript 复制代码

xhttp.open(method, url, async);
//xhttp.open('请求方式','请求地址');

method：请求的方法，如 "GET" 或 "POST"
url：请求的 URL
async：是否异步发送请求，默认为 true（异步），如果需要同步发送请求，设置为 false

发送请求的语法：

javascript 复制代码

xhttp.send();

完整示例：

javascript 复制代码

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "https://api.example.com/data", true);
xhttp.send();

注意：在发送请求之前，你还可以使用setRequestHeader()方法设置请求头，以便发送自定义的头部信息。

三、获取服务端响应

在配置对象完毕之后，可以通过监听onload事件和onreadystatechange事件来获取服务器响应到客户端的数据。

onload事件

javascript 复制代码

xhr.onload = function () {};

xhr表示Ajax对象，onload属性的值为事件处理函数。

注意：在获取服务端响应的时，onload事件不需要对Ajax状态码进行判断，只会被调用一次，不兼容低版本IE浏览器

onreadystatechange事件

javascript 复制代码

xhr.onreadystatechange = function () {};

xhr表示Ajax对象，onreadystatechange属性的值为事件处理函数。

注意：在获取服务端响应的时，onreadystatechange事件需要对Ajax状态码进行判断，会被多次调用，兼容低版本IE浏览器

Ajax状态码

请求状态的变化包括以下几个阶段：

0: 请求未初始化，open() 方法未调用。
1: 服务器连接已建立，open() 方法已调用。
2: 请求已接收，send() 方法已调用，响应头和响应状态已经可用。
3: 请求处理中，响应体部分可用。
4: 请求已完成，响应体已完全可用。

注意：可以通过判断 xhr.readyState 属性的值来确定请求所处的状态阶段，然后根据需要执行相应的操作。

需要注意的是，在使用 onreadystatechange 事件时，需要使用条件判断来判断请求的状态是否为完成状态（xhr.readyState === 4），并且需要再判断响应状态码是否为成功（xhr.status === 200），以确保请求成功完成后再执行相应的操作。

将上述所学知识来实现一个简单的完整案例。如下

第一：创建code\chapter04目录，然后在此目录下创建server目录，在此目录下下载express框架，进行初始化项目，

javascript 复制代码

npm init -y
 //初始化命令
npm install express --save
//安装express模板
npm list express
//查看版本是否安装成功

并且新建app.js文件编写代码

javascript 复制代码

const express = require("express");  //引入Express框架模块
const path = require("path");  //引入node.js核心模块path，用于处理文件路径
const app = express();  //创建一个Express应用程序实例

app.use(express.static(path.join(__dirname, 'public')));  //设置静态文件目录。将public文件作为静态资源根目录
app.get("/first", (req, res) => {  //定义一个GET请求的路由处理程序，当路径为/first时触发处理程序
    res.send('hello,Ajax');  //发送响应给客户端，返回一个简单的文本消息
});
app.listen(3000);
console.log('服务器启动成功！');

第二：在server目录下新建public文件，并在此文件下新建demo01.html文件，编写代码

javascript 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>nihao</title>
</head>
<body>
    <script>
        var xhr = new XMLHttpRequest();  //创建了一个 XMLHttpRequest 对象 xhr
        console.log(xhr.readyState); //输出了 xhr 对象的 readyState 属性的值，此时为0，表示请求还未初始化
        xhr.open('get','http://localhost:3000/first');  //调用了 open() 方法，指定了请求的类型（GET）和 URL（http://localhost:3000/first）
        console.log(xhr.readyState); //输出了 xhr 对象的 readyState 属性的值，此时为1，表示服务器连接已建立
        xhr.onload = function () {  //设置了 xhr 对象的 onload 事件的回调函数。当请求成功完成并返回响应后，这个回调函数将会被执行。
            console.log(xhr.readyState); //获取状态码4
            console.log(xhr.responseText);  //输出内容Hello,Ajax
        };
        xhr.send();  //发送了Ajax 请求
    </script>
</body>
</html>

当请求成功完成后，onload 事件的回调函数会被执行。在这个例子中，回调函数首先输出 xhr 对象的 readyState 属性的值（此时为4，表示请求已经完成），然后输出响应的文本内容（xhr.responseText）。

注意，这个示例只是在控制台输出了相关的信息，并没有在页面上展示出来。如果需要将返回的数据展示在页面上，可以使用 DOM 操作来实现。

第三：创建完毕之后，使用node命令启动服务器，在浏览器中输入localhost:3000/first

就可以看到"hello,Ajax"的页面内容，然后也可以在输入localhost:3000/demo01.html就可以在浏览器控制台中看到结果（注意页面是没有任何，你需要在控制台中看到信息即可）

第十章认识Ajax(一)

认识Ajax

Ajax的基本实现步骤

点个小心心，不迷路😎😎😎💖💖