AJAX编程

即 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则没有限制