Ajax随笔一 —— Ajax简介、使用步骤、XML常用属性与方法

Ajax概述

Asynchronous JavaScript And XML，异步的 js 和 XML

Google在2001年，为Google搜索加了“Google Suggest”功能，可以在用户浏览网页的同时，从服务器端获取更新后的搜索建议。命名为AJAX，目标：实现在无刷新、无提交的情况下页面内容局部更新,提高用户的浏览体验。
常用的场景：搜索建议、数据重复性判断、在线股票、在线聊天室、异步加载分页数据….

Ajax涉及到的技术：HTML、CSS、JS、DOM、HTTP、XML —— 属于纯客户端技术。

底层原理：在客户端浏览网页的同时，浏览器底层使用XMLHttpRequest对象，向服务器发起HTTP请求，并接收服务器的响应消息——浏览的同时服务器也在工作

使用Ajax的步骤

• 创建XHR对象

var xhr = getXML();
// 兼容ie6低版本
function getXML() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

• 监听XHR状态改变事件
  xhr.onstateschange = function () {...}

• 使用XHR连接到Web服务器
  xhr.open(method, uri, isAsysn);

• 使用XHR对象发起异步的HTTP请求
  xhr.send(null/data);

XHR对象常用的属性和方法

提示：XHR对象的作用：发起异步HTTP请求，并接收响应消息 —— 整个过程是不可见的，调试错误只能靠监视请求和响应消息。

XHR对象的成员属性

• readyState : 表示XHR当前的状态，即“请求-响应”过程进行到哪一步，可取值有5个，只能依次递增，无法回退，自动改变不能手动赋值

  • 0 : UNSEND 请求消息尚未发送
  • 1 : OPENED 已打开到服务器的连接
  • 2 : HEADERS_RECEIVED XHR已接收到响应消息起始行和头部
  • 3 : LOADING XHR正在加载响应主体
  • 4 : DONE XHR已经接收完成响应消息
    

• status : 0，响应消息状态码，只有在xhr.readyState变为2的时候才有值

• statusText : “”，响应消息中原因短句，只有在xhr.readyState变为2的时候才有值
• responseText : “”，响应消息的主体内容，只有在xhr.readyState变为3的时候才有值，变为4才稳定下来

XHR对象的成员事件

• onreadystatechange : xhr.readyState的值每次改变都会触发该事件

XHR对象的成员方法

• open(method, uri, isAsyn) : 打开到服务器的连接
• send(body/null) : 发送请求消息
• setRequestHeader(name, value) : 设置请求消息头部
• getResponseHeader(name) : 获得响应消息头部
• getAllResponseHeaders() : 获得响应消息中所有头部