目录
一、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 页面可以只更新页面的局部,而不影响用户的操作。