AJAX(一）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_59448049/article/details/135089898

本文详细介绍了AJAX的基本概念、优缺点、HTTP协议、XML与JSON的对比，以及AJAX在实际应用中的各种操作，如设置请求参数、处理超时与异常，并探讨了AJAX请求重复发送的问题。通过实例讲解了使用node.js和Express搭建服务端框架，以及如何响应JSON数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、AJAX简介

AJAX全称为 Asynchronous JavaScript And XML,就是异步的JS和XML。
通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
AJAX不是新的编程语言（使用的js)，而是一种将现有的标准组合在一起使用的新方式。

页面出现新内容但是页面没有进行刷新即为异步。
四种方式发送ajax:原生、jQuery、fetch、axios

AJAX的示例如下所示：

1.

其中输入abcd而引起的相关的关键字并不是本地生成的，而是通过向服务器发送请求，数据从服务器返回回来的。

2.

注册的时候报错的提醒即为AJAX，将注册账号发送给服务器，服务器进行校验，然后返回对应结果。不可用即出现该提醒。

3.

按需加载，利用率提升，页面的加载速度变快。

4.

出现二级三级菜单，也是AJAX的体现，鼠标放上去之后才会向服务器发送请求，服务器响应后，然后返回结果。

5.

当滚动条滚到底以后，会向服务器发送AJAX请求，从服务器返回新的数据。通过js将数据做一个处理，在页面当中动态创建新的节点，将整个内容做一个填充。

1.XML的认识和初识JSON:

XML:可扩展标记语言
XML被设计用来传输和存储数据（通过网络以XML的形式返给客户端，客户端就可以使用）而HTML在网页当中呈现数据。
XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

比如说有一个学生数据：
name="孙悟空“；age=18;gender="男”；
用XML表示：
<student>
<age>18</age>
<name>孙悟空</name>
<gender>男</gender>
</student>
最开始AJAX在进行数据交换的时候所使用的格式就是XML,服务器端给客户端浏览器返回结果时返回的就是XML格式的一个字符串，前端js在接到这个结果以后，对这个内容做一个解析。把数据提取出来，对数据做一个处理。现在已经被JSON取代。比起XML，JSON更加简洁，在数据转换也更加容易。可以直接借助JSON的一些API的方法，快速将字符串转成js对象。灵活度远胜于XML
｛"name":"孙悟空”,"age":18,"gender":"男"}

2.AJAX的优缺点：

AJAX的优点：
可以无需刷新页面而与服务器端进行通信
允许你根据用户事件来更新部分页面内容。
AJAX的缺点：
没有浏览历史，不能回退
存在跨域问题(不可以向a.com向b.com发送AJAX请求）
SEO（搜索引擎优化）不友好，网页中的内容爬虫是爬取不到的。

我们在源码里面进行搜索的时候：

发现里面并没有。因为这些内容都是通过AJAX异步请求的方式来得到的结果。

源代码结果里面是没有商品信息的，源代码是响应体（HTTP响应的一部分）。

通过AJAX向服务端发送请求，服务端返还结果，然后通过js动态的创建到页面当中去的。爬虫的话爬不到商品的数据。

3.HTTP协议：

HTTP(hypertext transport protocol)协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

协议就是一种约定，规则。

我按一种规则发送请求，你按一种规则返回结果。

（1）请求报文

重点是格式与参数

请求行：请求类型（GET、POST、DELETE、PUT)/URL的路径 HTTP的版本/1.1

请求头:

Host: rgf.com

Cookie: name=woer

Content-type: application/x-www-form-urlencoded(告诉服务器请求体是什么类型）

User-Agent: chrome 83

名字+：+空格+值

请求空行

请求体（GET请求：请求体是空的，POST请求：请求体可以不为空。）

完整的HTTP请求报文：username=admin&password=admin

（2）响应报文

响应行：协议版本 HTTP/1.1 响应状态码 200 响应状态字符串 OK

响应头：

Content-Type:text/html;charset=utf-8

Content-length:2048

Content-encoding:gzip

响应空行

响应体(主要的返回结果）：

<html>
<head>
</head>
<body>
<h1>响应体</h1>
</body>
</html>

在向服务端发送请求的时候，服务端给浏览器返回的结果包括这四部分，而html内容在响应体这块，浏览器在接到结果之后，会把响应体结果提取出来，对内容做一个解析，在页面做一个渲染和显示。

（3） GET请求演示：

请求行和请求头信息：

对URL参数做一个解析之后的结果：（请求参数）

可以看到参数有没有发送过去。

即可查看HTTP协议版本：

响应行和响应头信息：

响应体信息：

preview是一个预览，对响应体解析之后的查看界面：

（4）POST请求：

原始的请求体的内容：

表单点击提交按钮之后，浏览器会帮助我们去把HTTP的报文给封装好，封装好后发送到目标服务器的指定端口，去做一个请求。

4.node.js和 Express服务端框架：:

node.js可以用来解析js代码，通过js代码对计算机资源做一个操作。ajax应用当中需要一个服务端。

下载 | Node.js 中文网 (nodejs.cn)

安装成功。

我们进行检测是否安装成功：

node.js安装成功。

（1） Express服务端框架：

Express - 基于 Node.js 平台的 web 应用开发框架 - Express中文文档 | Express中文网 (expressjs.com.cn)

AJAX需要给服务端发送请求，需要一个服务端。

Express，基于Node.js平台，快速、开放、极简的Web开发框架。

npm是一个包管理工具，是node.js平台下的一个包管理工具

npm init --yes,该命令进行一个初始化。

npm i express,该命令进行安装：

express基本使用.js:
//1.引入express
const express=require('express');
//2.创建应用对象
const app=express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/',(request,response)=>{
//设置响应
response.send('HELLO EXPRESS')
});
/*function chan(){
  return console.log("服务已经启动，8000端口监听中...");
}
可以用如下方法，也可以采用function定义的方法
*/
//4.监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中...");
    })

/*其中
()=>{
console.log("服务已经启动，8000端口监听中...");
}
相当于：
function ajax()｛
  return console.log("服务已经启动，8000端口监听中...");
}
*/
在命令行中输入node 文件名，即可启动服务器：

我们进入如下网站：

向8000端口发送请求：

向8000端口响应请求：响应行和响应头

响应体：

在node终端，ctrl+c可以关闭端口。结束服务。

5.ajax案例准备：

GET.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>AJAX GET 请求</title>
        <style>
           #result{
            width:200px;
            height:100px;
            border:solid 1px #90b;
           }
        </style>
    </head>
    <body>
       <button>点击发送请求</button>
       <div id="result"></div>
    </body>
</html>

meta标签详解：HTML <meta> 标签 (w3school.com.cn)

border的属性及写法：

属性	含义
solid	实线
dotted	点线
dashed	虚线
double	双线

service.js:

//1.引入express
const express=require('express');
//2.创建应用对象
co