AJAX简介_axcx-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44844866/article/details/122615103

AJAX（Asynchronous Javascript And XML，异步JavaScript和XML），用于在客户端和服务器之间进行数据传输，从前使用的是XML语言格式，现多使用更简洁JSON作为替代。

HTTP协议

包括以下2个报文（可通过F12Network查看报文的具体内容）：当客户端请求一个网页时，会先通过http协议将请求的内容封装在http请求报文之中，服务器收到该请求报文后根据协议规范进行报文解析，然后向客户端返回响应报文。

##请求报文（格式如下）

行          GET/POST/FETCH 等   +  url路径  +  HTTP协议版本
头          Host:
            Cookie:
            Content-type:
            User-Agent:
空行
体          username=admin&password=admin

##响应报文（格式如下）

行          HTTP协议版本   响应状态码（就是SEO爬虫抓取状态的那几个数字，404,403,200,401等）  OK（响应状态字符串）
头			Content-Type:
			Content-length:
			Content-encoding:
空行
体			<html>
				<head>
				</head>
				<body>
				</body>
			</html>
		    // 即html代码内容。服务器得到请求报文后，将html内容作为响应报文的体，发回给浏览器进行显示

AJAX具体内容（涉及到的技术）

*AJAX的内容必须在网站服务器的环境下才可以运行，直接双击html文件是无法打开的，因此我们需要使用Node.js创建服务器。

1.Javascript（AJAX不是一种新的语言，它使用的还是js）：AJAX的核心内容→XMLHttpRequest对象（浏览器内置对象）→使用指南
Step1.创建AJAX对象：XMLHttpRequest对象实例化，然后就可以访问对应的属性和方法了。
Step2.提出请求：XMLHttpRequest.open(‘请求方式’,‘请求地址’)
Step3.发送请求：XMLHttpRequest.send()
Step4.获取服务器传来的响应数据：由于网络延迟的问题，在send()之后不能直接获取数据，要先给XMLHttpRequest对象绑定一个onload事件，这样可以确保在服务器获得请求后再执行获取响应这一步。

XMLHttpRequest.onload = function {
	XMLHttpRequest.responseText  // 通过responseText属性获取服务器传来的响应数据
}

2.dom：获取html元素
3.css：处理视图、更新、美化
4.servlet：服务器端技术
5.数据格式：json

XMLHttpRequest对象的属性和方法

1.方法
.open()
.send()
2.属性
①readyState：请求的状态
0：表示创建异步对象时
1：表示初始异步对象的请求参数
2：表示发送了请求
3：表示异步对象从服务器接收了数据
4：表示异步对象接收了数据，并在异步对象内部处理完成（只有当readyState的属性值为4时，才代表我们从服务器端成功获取了数据内容，可以进行进一步的使用）
②status：请求的状态，和Http状态码对应
200：请求成功
404：服务器资源没有找到
500：服务器内部代码有错误
③responseText：服务器返回的数据内容