1.1 AJAX 简介
AJAX 全称为 (Asynchronous JavaScript And XML)，就是异步的 JS 和 XML。 通过 AJAX 可以在浏览器中向服务器发送异步请求
最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式
1.2 XML简介
XML 可扩展标记语言。 XML 被设计用来传输和存储数据
XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签， 全都是自定义标签，用来表示一些数据
例如:
比如说我有一个学生数据：
name = "孙悟空" ; age = 18 ; gender = "男" ;
用 XML 表示：
现在已经被 JSON 取代了。
用 JSON 表示：
{
"name":"孙悟空","age":18,"gender":"男"}
1.3 AJAX 的特点
1.3.1 AJAX 的优点
可以无需刷新页面而与服务器端进行通信。
允许你根据用户事件来更新部分页面内容。
1.3.2 AJAX 的缺点
没有浏览历史，不能回退
存在跨域问题(同源)
seo不友好
2. HTTP相关问题
2.1 MDN 文档
Http概述:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview
2.2 HTTP 请求交互的基本过程
前后应用从浏览器端向服务器发送HTTP 请求(请求报文)
后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
浏览器端接收到响应, 解析显示响应体/调用监视回调
2.3 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}
2.4 HTTP 响应报文
1.响应状态行:
status statusText
2.多个响应头:
Content-Type: text/html;charset=utf-8 Set-Cookie: BD_CK_SAM=1;path=/
3.响应体:
html 文本/json 文本/js/css/图片...
2.5 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 用于文件上传请求
2.6 常见的响应状态码
200 OK 请求成功。 一般用于GET 与POST 请求
201 Created 已创建。 成功请求并创建了新的资源
401 Unauthorized 未授权/请求要求用户的身份认证
404 Not Found 服务器无法根据客户端的请求找到资源
500 Internal Server Error 服务器内部错误，无法完成请求
// 判断(服务端返回了所有的结果)
if (xhr.readyState === 4) {
//判断响应码 200 404 403 401 500
//2xx 成功
if (xhr.status >= 200 && xhr.status < 300) {
// 处理结果 行 头 空格 体
// // 1/响应行
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串
// console.log( xhr.getAllResponseHeaders);//所有响应头
2.7 不同类型的请求及其作用
GET: 从服务器端读取数据（查）
POST: 向服务器端添加新数据 （增）
PUT: 更新服务器端已经数据 （改）
DELETE: 删除服务器端数据 （删）
2.8 区别 一般http请求 与 ajax请求
ajax请求 是一种特别的 http请求
对服务器端来说, 没有任何区别, 区别在浏览器端
浏览器端发请求: 只有XHR 或fetch 发出的才是ajax 请求, 其它所有的都是非ajax 请求
浏览器端接收到响应
3. 原生AJAX 的基本使用 XHR
3.0 准备工作
3.0.1 安装node.js
node.js 官网: http://nodejs.cn/
3.0.2 安装express（服务端框架）
安装express(服务端框架)
初始化环境
npm init --yes
2.下载express包
npm install express --save
编写js代码
// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// request:是对请求报文的封装
// response:是对响应报文的封装
app.get('/server', (request, response) => {
// 设置响应头,设置为允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置响应
response.send('孙飞')
})
// 4.监听端口启动服务
//开启一个8000的服务器端口
app.listen(8000, () => {
console.log("服务已经启动,8000服务端口监听中...");
})
4.运行js程序
右击文件,在集成终端打开
node .\01express使用.js
3.0.3安装nodemon自动重启工具 文件内容有修改自动重新启动服务
https://www.npmjs.com/package/nodemon
1.安装
npm install -g nodemon
2.启动服务
nodemon server.js
3.问题:
如果显示无法加载文件 C:\Program Files\nodejs\node_global\nodemon.ps1，因为在此系统上禁止运行脚本。
在启动的时候 指令前面加上npx
3.1 理解
使用XMLHttpRequest (XHR)对象可以与服务器交互, 也就是发送ajax 请求
前端可以获取到数据，而无需让整个的页面刷新。
这使得Web 页面可以只更新页面的局部，而不影响用户的操作。
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的
3.2 核心对象使用步骤
3.2.1 创建XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
3.2.2 设置请求信息（请求方法和url）
// 请求方式
xhr.open(method, url);
//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
3.2.3 发送请求
xhr.send(body) *//get请求不传 body 参数，只有post请求使用*
3.2.4 接收响应（事件绑定，处理服务端返回的结果）
//xhr.responseXML 接收 xml格式 的响应数据
//xhr.responseText 接收 文本格式 的响应数据
xhr.onreadystatechange = function (){
// readyState 是 xhr对象中的属性, 表示状态 0 1 2 3 4
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text);
}
}
3.3 使用案例
使用AJAX_get发送请求
3.3.1前端html网页
```html