根据视频进行整理
【https://www.bilibili.com/video/BV1WC4y1b78y?p=1】
视频资料
百度网盘：
链接：【https://pan.baidu.com/s/1nYiBc4hKzs8sYvAT5BZEZw】
提取码：1234
1. AJAX 简介
AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
2. XML 简介
XML 可扩展标记语言。
XML 被设计用来传输和存储数据。在早期，AJAX使用XML进行数据传输，现在被JSON取代。
XML 和 HTML 类似，不同的是 HTML 中都是预定义标签(官方提前制定好的)，而 XML 中没有预定义标签， 全都是自定义标签，用来表示一些数据。
比如，有一个学生数据：
name = "孙悟空" ; age = 18 ; gender = "男" ;
用 XML 表示：
<student> <name>孙悟空</name> <age>18</age> <gender>男</gender> </student>
用 JSON 表示：
{ "name":"孙悟空", "age":18, "gender":"男" }
3. AJAX 的特点
3.1 AJAX 的优点
- 可以无需刷新页面而与服务器端进行通信。
- 允许你根据用户事件来更新部分页面内容(局部刷新、动态加载)。
3.2 AJAX 的缺点
- 没有浏览历史，不能回退
- 存在跨域问题(同源) (a.com向b.com请求数据就为跨域，AJAX默认是不允许的)
- SEO 不友好(由于使用AJAX动态加载数据，所以动态加载的数据在最初的页面html中不存在，不利于爬虫爬取数据)
4. HTTP 协议
HTTP（hypertext transport protocol）协议：
超文本传输协议，详细规定了浏览器和万维网服务器之间互相通信的规则。就是浏览器和服务器之间进行通讯的一种约定和规则。
HTTP协议：
通过浏览器向服务器发生请求报文和服务器向浏览器返回响应报文的方式，进行浏览器和服务器之间的通讯和数据传输。
4.1 请求报文
请求报文包括：
- 请求行：包括：
- 请求类型：GET/POST/PUT/DELETE/…
- url路径：/s?ie=utf-8
- http协议的版本：HTTP/1.1 (常用版本为1.1)
- 请求头：
包含的信息都为键值对
Host: atguigu.com
Cookie: name=guigu
Content-type: application/x-www-form-urlencoded
User-Agent: chrome 83 - 空行
- 请求体：
向服务器发送的信息(可以为空)
4.2 响应报文
响应报文包括：
- 响应行：
- http协议的版本：HTTP/1.1
- 响应状态码：200/404/403/401…
- 响应状态字符串: OK/…
- 响应头：
包含的信息都为键值对
Content-Type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip - 空行
- 响应体 ：
服务器响应给浏览器的数据
4.3 浏览器中查看请求信息
- 鼠标右键 => 检查
- F12
- 笔记本 Fn => F12
5. Node.js
在Node.js环境下运行js文件(一定要在文件对应的位置运行)
node js文件名
6. Express
AJAX阶段只是需要一个简单的服务器端进行请求的响应，只要能够创建一个基本的服务器即可
// 导入express const express = require('express') // 创建应用对象 const app = express() // 创建路由对象 // request 是对请求报文的封装 // response 是对响应报文的封装 app.get('/', (request, response) => { // 向客户端发送数据 response.send( 'Hello from express' ) }) // 启动服务器进行监听 // 8000 端口 服务端在8000端口监听客户端向8000端口发送过来的请求 app.listen(8000, () => { console.log('服务端在8000端口监听') } )
app.get('/server', (request, response) => { //设置响应头 设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); ... });
7. 发送GET请求
<!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 #90b; } </style> </head> <body> <button>发送GET请求</button> <div id="result"></div> <script> // 获取按钮 const btn = document.querySelector('button') // 获取div const div = document.querySelector('div') // 绑定事件 btn.addEventListener( 'click', function() { // 创建发送AJAX请求的对象 const xhr = new XMLHttpRequest() // 初始化 // 设置请求的方法和url xhr.open( 'GET', 'http://127.0.0.1:8000/' ) // 发送请求 xhr.send() // 处理返回的数据 // on 当...时候 // readystate xhr 对象中的属性, 表示状态 0(未初始化的状态) 1(open方法调用完毕) 2(send方法调用完毕) 3(服务端返回部分结果) 4(服务端返回全部结果) // change 改变 // 当状态改变会触发 xhr.onreadystatechange = function() { // 服务端返回了所有的结果 if ( xhr.readyState===4 ) { // 响应状态码 2xx 为成功 if ( xhr.status>=200 && xhr.status<300 ) { // 返回的响应状态码 console.log(xhr.status) // 返回的响应状态字符串 console.log(xhr.statusText) // 返回的所有响应头 console.log(xhr.getAllResponseHeaders) // 响应体(返回的数据) console.log(xhr.response) // 设置div中的文本 div.innerHTML = xhr.response } } } } ) </script> </body> </html>
7.1 GET请求设置参数
在请求地址url后加上?，后面再加上 参数名=参数值&参数名=参数值&...，&为参数之间分隔
// 绑定事件 btn.addEventListener( 'click', function() { // 创建发送AJAX请求的对象 const xhr = new XMLHttpRequest() // 初始化 // 设置请求的方法和url xhr.open( 'GET', 'http://127.0.0.1:8000/?name=zs&age=18' ) ... })
edge浏览器
