AJAX编程
即 Asynchronous [e'sɪŋkrənəs] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
-
异步：指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。
其优势在于不阻塞程序的执行，从而提升整体执行效率。
XMLHttpRequest可以以异步方式的处理程序。
-
XMLHttpRequest
浏览器内建对象，用于在后台与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。
/*js 内置的 http 请求对象 XMLHttpRequest*/
/*1.怎么使用 这个内置对象*/
var xhr = new XMLHttpRequest;
/*2.怎么样去组请求*/
/*请求的行*/
xhr.open('post','01.php');
/*请求头*/
//get 没有必要设置
//post 必须设置 Content-Type: application/x-www-form-urlencoded
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
/*请内容*/
/*3.发送请求*/
xhr.send("name=xjj&age=10");
http请求
- 一个完整的http请求过程，通常有下面七步骤
1、 建立tcp连接
2、 web浏览器向web服务器发送请求命令
3、 web浏览器发送请求头信息
4、 web服务器应答
5、 web服务器发送应答头信息
6、 web服务器像浏览器发送数据
7、 web服务器关闭tcp连接
- HTTP请求3个组成部分与XMLHttpRequest方法的对应关系
1、请求行：http请求的方法或动作，比如get或者是post请求，正在请求的URL，总得知道请求的地址是什么
xhr.open('post','01.php');
2、请求头：包含一些客户端环境信息，身份验证信息等
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//get请求可以不设置
3、请求主体：也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等
xhr.send("name=xjj&age=10");
//get可以传空
注意书写顺序
- get与post
get：
1、 一般用于信息获取，查询
2、 使用URL传递参数
3、 对发送信息的数量也有限制，一般在2000个字符（4k左右）
4、 发送的信息任何人都是可见的（不安全）
5、 get请求是幂等，执行一次和一万次效果一样，影响相同
post：
1、 一般用于修改服务器上的资源。一般用作于发送表单数据，新建，修改，删除等等
2、 对所发送信息的数量无限制
3、 数据会嵌入到http的请求体中，安全
- 一个http响应一般由三部分组成
1、 一个数字和文字组成的状态码，用来显示请求是成功还是失败
a) http状态码由三位数字构成，其中首位数字定义了状态码的类型：
b) 1xx：信息类，表示收到web浏览器请求，正在进一步的处理中
c) 2xx：成功，表示用户请求被正确接收，理解和处理例如：200 ok
d) 3xx：重定向，表示请求没有成功，客户必须采取进一步的动作
e) 4xx：客户端错误，表示客户端提交的请求有错误，例如：404 not found，意味着请求所引用的文档不存在
f) 5xx：服务器错误，表示服务器不能完成对请求的处理，例如：500
2、 响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型，日期时间，内容类型和长度等
3、 响应体，也就是响应正文
- XMLHttpRequest发送请求
1、 open（method【规定了发送的方式是get还是post】，url【必需，请求地址】，async【请求同步/异步（默认值true）】）
2、 send（string【get可以不填写或许null，post就一定要填写参数，否则无意义】）
这些方法可以将请求发送到服务器
- XMLHttpRequest取得响应
1、 responseText：获得字符串形式的响应数据
2、 responseXML：获得XML形式的响应数据
3、 status和statusText：以数字和文本形式返回http状态码
4、 getAllResponseHeader（）：获取所有的响应报头
5、 getResponseHeader（）：查询响应中的某个字段的值
注意书写顺序
HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。
HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。
由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。
if(xhr.readyState == 4 && xhr.status == 200){
console.log('ok');
console.log(xhr.responseText);
/*把内容渲染在页面当中*/
document.querySelector('#result').innerHTML = xhr.responseText;
}
**readyState**
1、获取状态行（包括状态码&状态信息）
xhr.status //状态码
xhr.statusText //状态码信息
2、获取响应头
xhr.getResponseHeader('Content-Type');
xhr.getAllResponseHeaders();
3、响应主体
xhr.responseText
xhr.responseXML
我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML
readyState属性
- 0：请求未初始化，open还没有调用
- 1：服务器连接已建立，open已经调用了
- 2：请求已接受，也就是接收到头信息了
- 3：请求处理中，也就是接收到响应主体了
- 4：请求已完成，且响应已就绪，也就是响应完成了
onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态
var xhr = new XMLHttpRequest();
/*设置请求行*/
xhr.open('get', '02.XMLHttpRequest.php');
/*设置请求头*/
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
/*设置请求主体并发送*/
xhr.send(null);
/*=========响应===========*/
/*什么时候去接受后台的数据*/
/*通过一些事件或者回调函数去监听*/
/*通过去监听 通讯的状态*/
/*通讯状态 就会有多个通讯的状态 请求发送前 请求中 响应中 响应完成 */
xhr.onreadystatechange = function() {
if (xhr.status === 200&xhr.readyState===4) {
console.log('获取响应的主体' + xhr.responseText);//做一些事情 xhr.responseText
} else {
alert('响应失败');
}
}
API详解
xhr.open() 发起请求，可以是get、post方式
xhr.setRequestHeader() 设置请求头
xhr.send() 发送请求主体get方式使用xhr.send(null)
xhr.onreadystatechange = function () {} 监听响应状态
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需要设置
5、GET效率更好（应用多）
6、GET大小限制约4K，POST则没有限制