180426 AJAX

Ajax与JavaScript的联系

Ajax提供了使用脚本操作HTTP的Web应用框架。
由脚本启动，客户端从服务器拉取数据。

---

什么是AJAX?

（Asynchronous javascript and xml）
用JavaScript以异步的形式操作XML（现在是操作JSON）

• 在Ajax模型中，客户端向服务器请求额外的数据而无需重载整个页面。
• AJAX的技术核心是 XMLHttpRequest 对象（XHR），XHR为向服务器发送请求和解析服务器响应提供了接口。
• 脚本实例化浏览器提供的XHR对象取得新数据，然后再通过DOM将新数据插入到页面中。
• 虽然名字中包含XML成分，但AJAX通信技术与数据格式无关。

---

XMLHttpRequest 对象（XHR）

• XMLHttpRequest 对象用于在后台与服务器交换数据。
• 浏览器在XMLHttpRequest类上定义了它们的HTTP API。
• XHR不是协议级的HTTP API，而是浏览器级别的。不需要考虑其它问题，只关心请求和响应。
• 脚本通过实例化生成XHR对象：

var xhr = new XMLHttpRequest();

XHR API

• open()方法，接收五个参数：
  
  • 要发送的请求的方法： GET/POST
  • 请求数据的地址： URL [ 通常使用相对路径，使用绝对路径时，跨域请求通常会报错 ]
  • 是否异步： true/false
  • 最后两个参数用于验证用户：账号和密码

xhr.open('GET','example.php',true);

xhr.open('POST','example.php',true);

• setRequestHeader(header, value) 方法

  • 设置HTTP请求头部信息。
  • 此方法必须在 open() 方法和 send() 之间调用。
  • 如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。
  • 安全起见，有些请求头的值只能由user agent设置

• getResponseHeader() 和 getAllResponseHeader()

  • 查询响应头。XHR会自动处理cookie：从方法返回集合中过滤cookie头。

• send()方法

  • 如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。
  • 接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。
  • 请求方法是 POST ,在发送请求即调用send（）方法之前使用setRequestHeader() 方法设置 Content-Type头部来指定数据流的MIME类型。并将请求主体作为参数传入。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);
xhr.onload = function () {
   
   // 请求结束后,在此处写处理代码
};
xhr.send(null);

--------------------------------------------
var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
   //Call a function when the state changes.
    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status ==