原生ajax

1 Ajax简介

Ajax，全称“Asynchronous JavaScript and XML”，即异步的 JavaScript 和 XML。

通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。

2 XML简介

XML是可扩展标记语言，XML与HTML类似，区别：

• XML被设计用来传输和存储数据
  HTML用来显示数据
• XML中的标签都是自定义的
  HTML中都是预定义标签

XML现在已经被JSON取代了。

3 Ajax的特点

3.1 优点

• 可以无需刷新页面与服务器端进行通信
• 允许根据用户事件来更新部分页面内容

3.2 缺点

• 没有浏览历史，不能回退
• 存在跨域问题（同源）
• SEO不友好，网页中的内容爬虫爬不到

4 HTTP协议

HTTP，超文本传输协议，协议详细规定了浏览器与服务器之间互相通信的规则。

4.1 HTTP请求报文

请求行： 请求类型-GET/POST URL 协议版本-HTTP/1.1
请求头：
Host：baidu.com
Cookie： name=baidu
User-Agent： chrome83
…
空行
请求体 GET请求可以为空

4.2 HTTP响应报文

响应行：协议版本-HTTP/1.1 状态码-200 状态字符串-OK
响应头：
Content-Type：text/html；charset=utf-8
Content-length：2048
…
空行
响应体：服务器返回的内容

5 原生Ajax的使用

5.1 基本使用步骤

1. 创建XMLHttpRequest对象
2. 设置请求方式和url
3. 发送请求
4. 拿到响应数据

// 创建xhr对象
const xhr = new XMLHttpRequest()
// 初始化xhr对象，设置请求方式和请求的url
xhr.open("GET","http://www.baidu.com")
// 发送请求
xhr.send()
// 处理数据
xhr.onreadystatechange() = function(){
   
	// 判断服务器是否已经响应完毕
	if(xhr.readystate === 4){
   
		// 判断请求是否成功
		if(xhr.status === 200){
   
			console.log(xhr.status)  // 响应状态码
			console.log(xhr.statusText) // 响应状态文本
			console.log(xhr.getAllResponseHeaders()) //获取响应头
			console.