Ajax

• Ajax是Asynchronous JavaScript and XML的缩写，这一技术能够向服务器请求额外的数据而无需卸载整个页面，会带来良好的用户体验。传统的HTTP请求流程大概是这样的：

  • 浏览器向服务器发送请求
  • 服务器根据浏览器传来数据生成response
  • 服务器把response返回给浏览器
  • 浏览器刷新整个页面显示最新数据

• AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求）从服务器获取数据：这里的异步是指脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了

XMLHttpRequest对象

• Ajax的核心是JavaScript对象XMLHttpRequest，这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口。XMLHttpRequest可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
• Ajax通信和
• 对象方法：
  • open(method, url, async):规定请求的类型(get,post),URL以及是否一步处理请求
  • send(string): 将请求发送到服务器，string仅用于POST请求
• open方法：
  • open方法中的URL是相对于当前页面的路径，也可以使用绝对路径
  • 调用open方法不会真正发送请求，而是初始化一个请求准备发送，发送是由send来完成的
  • 只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错（同源策略）
• 请求发往服务器，服务器根据请求生成响应(response)，传回给XMLHttpRequest对象，在收到响应后响应数据会填充到XMLHttpRequest对象的属性：
  • responseText：作为响应主体被返回的文本
  • responseXML：如果响应内容的类型是”text/xml”或”application/xml”，这个属性将保存包含着相应数据的XML文档
  • status：响应的HTTP状态（200， 404， 500等）
  • statusText：HTTP状态说明
• XMLHttpRequest的其他属性
  • readyState：表示请求/响应过程中的当前活动阶段
    • 0：请求未初始化
    • 1：服务器连接已建立
    • 2：请求已接收
    • 3：请求处理中
    • 4：请求已完成，且响应就绪
  • onreadystatechange：每当readyState值改变的时候都会触发一次onreadystatechange事件
  • 注意： 必须在open方法之前指定onreadstatechange事件处理程序
  • 可以在接受想赢之前调用abort方法取消异步请求

var xhr =new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        setContainer('Original Ajax: ' + xhr.responseText);
    }
}
xhr.open('get', 'ajax.aspx?action=getTime', true);
xhr.send();

HTTP Header

• 每个HTTP请求都会带有Header信息，XMLHttpRequest在默认情况下，发送HTTP请求还会发送下列头部信息：

  • Accept：浏览器能够处理的内容类型
  • Accept-Charset：浏览器能够处理的字符集
  • Accept-Encoding：浏览器能够处理的压缩编码
  • Accept-Language：浏览器当前设置的语言
  • Connection：浏览器与服务器的连接类型
  • Cookie：当前页面的cookie
  • Referer:发送请求的页面的URI

• 可以使用setRequestHeader方法设置自定义的请求Header信息，这个方法接受两个参数：

  • 头部字段的名称
  • 头部字段的值
  • 注意：要想成功发送头部信息，必须在 调用open方法之后，调用send方法 之前调用setRequestHeader方法

• 可以在服务器端接收自定义Header然后做响应操作。同时在服务器端也可以向浏览器发送额外的数据，在没有自定义信息的情况下我们可以得到默认response header，response header包含以下信息：

  • Date：响应时间
  • Server：服务器类型
  • Very：验证Encoding类型
  • X-Power-By：语言

XMLHttpRequest常用方法和属性:

• open()
• send()
• xhr.responseText:作为响应主体被返回的文本,主要就是对它的操作,来获取所需(格式)的数据
• xhr.status
• xhr.readState
• xhr.readystatechange = function(){}
• xhr.setRequestHeader(头部字段名称,字段对应的值):自定义请求头部信息
• xhr.getResponseHeader(头部字段名称):获取相应头部信息
• xhr.getAllResponseHeaers():获取包含所有头部信息的长字符串