即 Asynchronous Javascript And XML，AJAX 不是一门的新的语言，而是对现有持术的综合利用。本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
异步
- 指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。
- 其优势在于不阻塞程序的执行，从而提升整体执行效率。
7.png
8.png
现实生活中的一个例子
打电话是同步 发消息是异步
XMLHttpRequest可以以异步方式的处理程序。
XMLHttpRequest
浏览器内建对象，用于在后台与服务器通信(交换数据) ，由此我们便可实现对网页的部分更新，而不是刷新整个页面。
- 1、下面是一个简单的例子
见代码示例8-1.html和8-1.php
9.png
- 2、同步
见代码示例8-2.html 和 8-2.php
![Upload 11.png failed. Please try again.]
由于XMLHttpRequest本质基于HTTP协议实现通信，所以结合HTTP协议和上面的例子我们分析得出如下结果
请求
- 1、请求行
a) 需要有一个请求方式
b) 一个请求地址url
xhr.open('get','index.php');
- 2、请求头
a) 设置请求头
b) post方式请求时，必须设置
xhr.setRequestHeader('Conten-Type','application/x-www-form-urlencoded');
get方式请求可以不设置
-
3、请求主体
a) 实际上是客户端请求的数据
b) 当以post方式请求时，需要xhr.send(‘key=val&key1=val2’)的形式
c) 当以get方式请求时，参数是放在请求url上的，所以一般写成xhr.send()或xhr.send(null);
xhr.send(null);
响应
- HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。
- HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。
- 由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。
12.png
上图中的onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态
- 1、获取状态行（包括状态码&状态信息）
xhr.status // 状态码
xhr.statusText //状态信息
- 2、获取响应头
//获取指定头信息
xhr.getResponseHesder('Content-Type);
//获取所有响应头信息
xhr.getAllResponseHeaders();
- 3、响应主体
xhr.responseText;
xhr.responseXML;
API详解
xhr.open() 发起请求，可以是get、post方式
xhr.setRequestHeader() 设置请求头
xhr.send() 发送请求主体get方式使用xhr.send(null)
xhr.onreadystatechange = function () {} 监听响应状态
xhr.readyState = 0时，UNSENT open尚未调用
xhr.readyState = 1时，OPENED open已调用
xhr.readyState = 2时，HEADERS_RECEIVED 接收到头信息
xhr.readyState = 3时，LOADING 接收到响应主体
xhr.readyState = 4时，DONE 响应完成
不用记忆状态，只需要了解有状态变化这个概念
xhr.status表示响应码，如200
xhr.statusText表示响应信息，如OK
xhr.getAllResponseHeaders() 获取全部响应头信息
xhr.getResponseHeader('key') 获取指定头信息
xhr.responseText、xhr.responseXML都表示响应主体
-
注：GET和POST请求方式的差异（面试题）
- 1、GET没有请求主体，使用xhr.send(null)
- 2、GET可以通过在请求URL上添加请求参数
- 3、POST可以通过xhr.send('name=itcast&age=10')
- 4、POST需要设置
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
- 5、GET效率更好（应用多）
- 6、GET大小限制约4K，POST则没有限制
网友评论