HTTP响应
HTTP是什么?
HTTP是英⽂“Hyper Text Transfer Protocol”的缩写，中⽂译为：超⽂本传输协议。
HTTP请求是什么？
定义：
HTTP请求指浏览器向服务器发送的请求。
HTML中的http请求有哪些？
- 1.href
- 2.src
JS中的http请求
- 1.使用JS操作src会产生http请求
- 2.使用JS操作href会产生http请求
- 3.使用JS操作location会产生http请求
- 4.使用JS操作表单会产生http请求
请求的内容有两种：
- 1.请求下载⽂件。当在浏览器的地址栏输⼊URL,然后按下回⻋键，企图打开⼀个⻚⾯时，⼀个HTTP⽂件请求就
产⽣了。可以⽐喻为“伸⼿要"。 - 2.请求处理数据。当提交表单，请求服务器处理表单数据时,⼀个HTTP处理数据的请求就产⽣了。可以⽐喻为“伸⼿给”。
HTTP响应
定义：
HTTP响应指服务器对浏览器请求做出的回应/响应。
服务器收到请求后必须处理请求，处理的结果有两种：
- 处理请求成功：返回请求的⽂件并通知浏览器请求成功。
- 处理请求失败：通知浏览器请求失败。
AJAX
- AJAX是“Asynchronous JavaScript and XML”的缩写。中⽂译为“异步JavaScript和XML”。
- AJAX 只是⼀个流⾏的词语，不属于web API。
- AJAX也不是一种技术，AJAX是一种方法，通过多种技术组合，实现动态更新页面的目的
- AJAX的最大特点：在不刷新的情况下，更新⻚⾯数据。
- AJAX的实现方式有多种：
- 方式1：XMLHttpRequest API
- 方式2：操作标签的src属性
- 方式3：JSONP
1.通过XMLHttpRequest API实现
所有浏览器都⽀持 XMLHttpRequest 对象，能实现get请求，也能实现post请求
2. 通过src属性实现
使⽤脚本操作 <img> 标签的 src 属性时，浏览器会发起HTTP GET请求，把经过编码的数据作为URL的查询字符串传递给服务器。特点：数据交换是单向的，客户端能发送数据到服务器，但服务器返回的只是⼀张1*1像素的透明图⽚。
<script> ： 该标签的src属性能设置URL并发起HTTP GET请求。可以跨域通信。服务器的响应采取JSON的数
据格式，当执⾏脚本时，js解析器能⾃动将其解码，因此这种AJAX传输协议也叫 JSONP<iframe> ：⾸先把数据编码到URL中，然后设置 <iframe> 的src属性为该url，服务器能创建⼀个包含响应
内容的HTML⽂档，并返回给客户端，缺点：受限于同源策略问题。
XMLHttpRequest API
- XML：是英文”Extension Markup Language“的缩写，中文是：可扩展的标记语言。
- 用途：格式化数据
- HTML：是英文”Hyper Text Markup Language“的缩写，中文是：超文本协议。
- 用途：编写网页文档
- http：超文本传输协议
- Request：请求
- 字面意思：HTTP请求XML数据
- XML表示一种数据/文件格式。但是在这里，xml是一个误会：不代表XMLHttpRequest只能请求
- xml数据，实际上，它可以请求任意类型的数据，使用最多的数据类型是JSON。
定义：
XMLHttpRequest是一种处理浏览器和服务器之间通信的API。XMLHttpRequest是对HTTP协议的一种实现
- 1.它的核心对象是XMLHttpRequest对象
- 2.它的最大特点：页面布局数据的更新
- 3.它是AJAX的最重要的实现手段
- 主要处理浏览器端：主要处理请求，不处理响应
- 请求是前端工作
- 响应是后端工作
-
XMLHttpRequest通常有人在这么简写：- xhr
- http
- xhttp
请求数据的步骤
第一步：从实例化一个xhr对象开始
const xhr = new XMLHttpRequest() //目的：使用xhr处理HTTP请求
第二步：创建一个HTTP请求
xhr.open() //创建一个HTTP请求
请求数据的步骤
第一阶段：请求阶段
1.实例化一个xhr对象
2.准备发起请求：xhr.open('GET','./data.html',true)
3.发送请求：xhr.send()
第二阶段：响应阶段
4.监控xhr实例对象的状态：xhr.onreadystatechange = function(){}
5.查询xhr实例的状态：xhr.readyState
- 0: 没有被调用open()
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 正在处理请求
- 4: 请求已完成且响应已就绪
第三阶段：处理数据
6.响应已经完成，接下来要获取数据：
- xhr.reponseText：获取字符串格式的数据
- xhr.responseXML：获取XML格式的数据
XMLHttpRequest()
定义：
XMLHttpRequest()是一个构造函数。用于创建一个xhr实例对象。
语法
返回值：
示例
xhr.open()
定义：
xhr.open()方法用于创建一个HTTP请求
语法
xhr.open('GET','./data.html',true) //要，地址
返回值：
示例
xhr.send()
定义：
xhr.open()方法用于发送一个HTTP请求
语法
xhr.send()
xhr.send(数据)
返回值：
示例
https://www.w3school.com.cn/js/js_ajax_http_response.asp
xhr.readyState()
定义：
xhr.readyState()用于查询xhr的状态码
每当 readyState 发生变化时就会调用 onreadystatechange 函数。
语法
返回值：
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 正在处理请求
- 4: 请求已完成且响应已就绪
示例
xhr.status()
定义：
xhr.status()属性用于查询xhr的htp的状态码
语法
返回值：
- 200: "OK"
- 403: "Forbidden"
- 404: "Page not found"
示例
xhr.statusText()
定义：
xhr.status()属性用于查询xhr的htp的状态码
语法
返回值：
返回状态文本（例如 "OK" 或 "Not Found"）
示例
xhr.responseText()
定义：
responseText属性以 JavaScript 字符串的形式返回服务器响应
xhr.responseText()获取字符串形式的响应数据
语法
document.getElementById("demo").innerHTML = xhttp.responseText;
返回值：
示例
xhr.onreadystatechange()
定义：
每当 readyState 发生变化时就会调用 onreadystatechange 函数。
onreadystatechange 被触发五次（0-4），每次 readyState 都发生变化。
语法
返回值：
示例
