目录
一、Ajax概述：
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
1.Ajax优点：
- 可以无需刷新页面而与服务器端进行通信
- 允许你根据用户事件来更新部分页面内容
2.Ajax缺点：
- 没有浏览历史，不能回退
- 存在跨域问题(同源)
- SEO 不友好（seo是搜索引擎优化）
二、XML概述：
XML 可扩展标记语言。XML 被设计用来传输和存储数据。XML 和HTML 类似，不同的是HTML 中都是预定义标签，而XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。现在已经被JSON 取代了。
三、HTTP协议：
HTTP概述 - HTTP | MDN (mozilla.org)
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview HTTP是一种能够获取如 HTML 这样的网络资源的 protocol(通讯协议)。它是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受方发起的。一个完整的Web文档通常是由不同的子文档拼接而成的，像是文本、布局描述、图片、视频、脚本等等。
1.HTTP请求交互：
- 前后应用从浏览器端向服务器发送HTTP 请求(请求报文)
- 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
- 浏览器端接收到响应, 解析显示响应体/调用监视回调
2.HTTP 请求报文：
请求行：
method url
GET /product_detail?id=2
POST /login多个请求头：
Host: www.baidu.com
Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
Content-Type: application/x-www-form-urlencoded 或者application/json请求体：
username=tom&pwd=123
{"username": "tom", "pwd": 123}3.HTTP 响应报文：
响应状态行:
status statusText多个响应头:
Content-Type: text/html;charset=utf-8
Set-Cookie: BD_CK_SAM=1;path=/响应体：
html 文本/json 文本/js/css/图片...4.post 请求体参数格式：
Content-Type: application/x-www-form-urlencoded;charset=utf-8 用于键值对参数，参数的键值用=连接, 参数之间用&连接。例如: name=%E5%B0%8F%E6%98%8E&age=12
Content-Type: application/json;charset=utf-8 用于 json 字符串参数。例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}
Content-Type: multipart/form-data 用于文件上传请求
5.常见的响应状态码：
200 OK 请求成功。一般用于GET 与POST 请求
201 Created 已创建。成功请求并创建了新的资源
401 Unauthorized 未授权/请求要求用户的身份认证
404 Not Found 服务器无法根据客户端的请求找到资源
500 Internal Server Error 服务器内部错误，无法完成请求
6.不同类型的请求及其作用：
GET: 从服务器端读取数据（查）
POST: 向服务器端添加新数据 （增）
PUT: 更新服务器端已经数据 （改）
DELETE: 删除服务器端数据 （删）
7.API 的分类：
REST API: restful （Representational State Transfer (资源)表现层状态转化）：
- 发送请求进行CRUD 哪个操作由请求方式来决定
- 同一个请求路径可以进行多个操作
- 请求方式会用到GET/POST/PUT/DELETE
非REST API: restless：
- 请求方式不决定请求的CRUD 操作
- 一个请求路径只对应一个操作
- 一般只有GET/POST
8.区别 一般http请求 与 Ajax请求：
ajax请求 是一种特别的 http请求，对服务器端来说, 没有任何区别, 区别在浏览器端。
浏览器端发请求: 只有XHR 或fetch 发出的才是ajax 请求, 其它所有的都是非ajax 请求浏览器端接收到响应
- 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
- ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据
四、Node.js & Express 框架支持：
我的这篇博客里，介绍了如何完成Node.js安装，相关专栏里有关于Node.js的学习笔记！
【Node.js】＜JavaScript 运行环境＞Node.js概述&Node.js安装环境配置_范同学的知识分享园地！-CSDN博客https://blog.csdn.net/weixin_52058417/article/details/122486460 Express，一个基于Node.js的Web应用框架：
1.初始化环境：
npm init --yes
2.下载express包：
npm install express --save
3.编写js代码：
// 1.引入express
const { request, response } = require("express");
const expresss = require("express");
// 2.创建应用对象
const app = expresss();
// 3.创建路由规则
// request：对请求报文的封装；response：对响应报文的封装
app.get("/", (request, response) => {
//设置响应：
response.send("Hello Express !");
});
// 4.设置端口监听
app.listen(8000, ()=>{
console.log("服务器已经启动，正在监听8000端口中......")
});4.运行js程序：
node .\demo.js
5.请求浏览器：
http://127.0.0.1:8000/
6. 调试程序查看请求和响应：
五、Ajax请求发送：
1.GET请求：
JavaScript代码：
// 1.引入express
const { request, response } = require("express");
const expresss = require("express");
// 2.创建应用对象
const app = expresss();
// 3.创建路由规则
// request：对请求报文的封装；response：对响应报文的封装
app.get("/server", (request, response) => {
//设置响应头：
response.setHeader("Access-Control-Allow-Origin","*");
//设置响应体：
response.send("HELLO AJAX !");
});
// 4.设置端口监听
app.listen(8000, ()=>{
console.log("服务器已经启动，正在监听8000端口中......")
});HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px rgb(0, 81, 255);
}
</style>
</head>
<body>
<button id="btn">点击发送请求</button>
<div id="result"></div>
</body>
<script>
//获取按钮元素：
var btn = document.getElementById("btn");
var div = document.getElementById("result")
//给按钮绑定点击事件：
btn.onclick = function(){
//1.创建对象：
const xhr = new XMLHttpRequest();
//2.初始化 设置Ajax请求方法和url：
xhr.open("GET", "http://127.0.0.1:8000/server");
//3.发送：
xhr.send();
//4.事件绑定，处理服务器端返回的结果：（readystate是xhr中的属性）
xhr.onreadystatechange = function(){
//判断：（4：服务器返回了所有结果）
if(xhr.readyState === 4){
//判断响应状态码：
if(xhr.status >= 200 && xhr.status < 300){
//处理返回的结果：
//1.响应行：
console.log(xhr.status); //响应状态码
console.log(xhr.statusText); //响应字符串
console.log(xhr.getAllResponseHeaders()); //所有响应头
console.log(xhr.response); //响应体
//设置result div的文本：
div.innerHTML = xhr.response;
} else{
}
}
};
};
</script>
</html>Ajax在发送GET请求时，需要传入一个URL参数时，直接在URL地址中使用？和&进行参数的拼接即可！！！例如：/md?checkout=123456&articleId=123456
2.POST请求：
POST的参数，直接设置在xhr.send(); 形参列表中，例如：xhr.send("obj01:{}&obj02:{}"); ,只要服务器能解析，send可以传输任意类型格式数据！！！
server.js中添加POST接口：
app.post('/server', (request, response) => {
// 设置响应头, 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置响应体
response.send("Hello Ajax POST");
});
HTML前端发送POST请求：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax POST 请求</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
// 获取元素对象
const result = document.getElementById('result');
// 绑定事件
result.addEventListener("mouseover", function(){
// 1. 创建对象
const xhr = new XMLHttpRequest();
// 2. 初始化 设置类型（请求方式）与url
xhr.open('POST', 'http://127.0.0.1:8000/server');
// 3. 发送 设置请求参数（请求体）
xhr.send('a=100&b=200&c=300');
// 4. 事件绑定
xhr.onreadystatechange = function(){
// 判断
if(xhr.readyState === 4){
if(xhr.status >=200 && xhr.status < 300){
// 处理服务端返回的结果
result.innerHTML = xhr.response;
}
}
}
});
</script>
</body>
</html>
设置响应头信息：
// 设置请求体内容的类型
xhr.setRequesHeader('Content-Type','application/x-www-from-urlencoded');
// 自定义头信息
xhr.setRequesHeader('name', 'ykyk');
server.js中设置响应头允许自定义请求头 post改成all：
response.setHeader('Access-Control-Allow-Header','*');
3.JSON数据请求：
app.all('/json-server', (request, response) => {
// 设置响应头, 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置响应头, 设置允许自定义头信息
response.setHeader('Access-Control-Allow-Headers', '*');
// 响应一个数据
const data = {
name: 'atguigu'
};
// 对 对象 进行 字符串 转换
let str = JSON.stringify(data)
// 设置响应体
response.send(str);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #89b;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
const result = document.getElementById('result');
// 绑定键盘按下事件
window.onkeydown = function(){
// 发送请求
const xhr = new XMLHttpRequest();
// *2*.(自动转换) 设置响应体数据的类型(自动转换)
xhr.responseType = 'json';
// 初始化
xhr.open('GET', 'http://127.0.0.1:8000/json-server');
// 发送
xhr.send();
// 事件绑定
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
console.log(xhr.response);
// 1. 手动对数据转化 (字符串再转换成json)
// let data = JSON.parse(xhr.response); //转换成json
// result.innerHTML = data.name;
// *2*. (自动转换)自动转换(自动转换)
result.innerHTML = xhr.response.name; //已经自动变成json
}
}
}
}
</script>
</body>
</html>
4.网络超时和异常处理：
// 超时设置 （2秒）
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function(){
alert('网络超时，请稍后重试')
}
// 网络异常回调
xhr.onerror = function(){
alert('网络异常，请稍后重试')
}
5.解决IE缓存问题：
问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据url 地址来记录的，所以我们只需要修改url 地址即可避免缓存问题
xhr.open("get","/testAJAX?t="+Date.now());
6.Ajax请求取消：
// 手动取消
xhr.abort()
7.请求重复发送问题：
当Ajax请求正在发送同一个请求时，可以通过添加一个标识符，判断当前请求是否正在发送，如果有相同的新的请求发送，则取消当前请求，发送新的请求！
六、XMLHttpRequest解析：
使用XMLHttpRequest (XHR)对象可以与服务器交互, 也就是发送ajax 请求。前端可以获取到数据，而无需让整个的页面刷新。这使得Web 页面可以只更新页面的局部，而不影响用户的操作。
扫一扫
5713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
