ajax客户端请求与服务端响应浅谈

Posted 2020-08-26 MarsQi

AJAX，即Asynchronous javascript And XML，AJAX本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

所谓的异步，是指某段程序执行不会阻塞其他程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序。
从而提升整体执行效率。

1：客户端请求
js内置http请求对象 XMLHttpRequest;
a、请求行
xhr.open() 发起请求，可以是get、post方式

get和post请求方式的差异

1、GET没有请求主体，使用xhr.send(null)

2、GET可以通过在请求URL上添加请求参数

3、POST可以通过xhr.send(‘name=itcast&age=10‘)

4、POST需要设置

5、GET效率更好（应用多）

6、GET大小限制约4K，POST则没有限制
b、请求头
xhr.setRequestHeader() 设置请求头
c、请求内容
xhr.send() 发送请求主体 get方式使用xhr.send(null)

2：服务端相应
HTTP响应是由服务端发出的，由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。
a、获取状态行（包括状态码&状态信息）
xhr.status 状态码，如200、304、404等； xhr.statusText 状态码信息如OK；
b、获取响应头
xhr.getResponseHeader(‘Content-Type‘)获取指定头信息；xhr.getAllResponseHeaders();获取全部响应头信息；
c、响应主体
xhr.responseText xhr.responseXML 都表示响应主体，我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML。

onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态，各种状态如下：
**readyState**
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。