目录
一、Ajax概述：
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
编辑
1.Ajax优点：
- 可以无需刷新页面而与服务器端进行通信
- 允许你根据用户事件来更新部分页面内容
2.Ajax缺点：
- 没有浏览历史，不能回退
- 存在跨域问题(同源)
- SEO 不友好（seo是搜索引擎优化）
二、XML概述：
XML 可扩展标记语言。XML 被设计用来传输和存储数据。XML 和HTML 类似，不同的是HTML 中都是预定义标签，而XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。现在已经被JSON 取代了。
三、HTTP协议：
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的学习笔记！
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 页面可以只更新页面的局部，而不影响用户的操作。
