Ajax的初步认识

1.背景

　　2005年，JJG发表了一篇在线文章，介绍了AJAX（Asynchronous Javascript + XML），这项技术能够向服务器请求额外数据而无须卸载页面，说是改变了以前的“单击”，“等待”的交互模式。事实上，在JJG提出的这项技术，已经存在了很长一段时间，AJAX以前就叫远程脚本，功能也是能实现浏览器与服务器之间的远程通信，重命名为AJAX，在2005年底开始红极一时。

2.核心

　　Ajax的核心，XMLHttpRequest对象（简称XHR），微软第一个引入此特性（IE5），它作用是：

　　1）为服务器发送请求解析服务器响应提供流畅的接口

　　2）以异步的方式向服务器取得更多信息（无须刷新界面，得到数据后，通过DOM将数据插入页面）

3.XHR的用法

　　收到服务器响应数据之后，响应的数据会自动填充到XHR对象的属性当中，XHR对象的属性值如下：

　　responseText：作为响应主题被返回的文本

　　responseXML：如果想要内容为.XML文件，就会保存到XML DOM 文档当中，不为XML数据，则此字段为null

　　status：响应的HTTP状态（HTTP状态代码为200作为成功的标志；304表示请求的资源并没有修改，所以可以直接在缓存中可读取，这两种状态如果其中一个存在，responseText都能被访问到）

　　statusText：HTTP状态说明

　　3.1 XHR对象的创建

　　　　IE7+、Firefox、Opear、Chrome和Safari都支持原生的XHR对象，所以直接运用XHR对象的构造函数就能构造出xhr对象

var xhr = new XHRHttpRequest();

　　3.2 XHR对象的使用

　　　　1）同步状态下

// false代表取消异步，即现在为同步
// 调用open方法并不会真正发送请求，而是启动一个请求以备发送！！！！
xhr.open("get", "example.txt", false);
// send接受一个参数，即作为请求主体发送的数据，如果没有，就必须输入null
xhr.send(null);
// 得到服务器响应之后,http状态码status，不同浏览器各有差别，但是普遍认为【200，300）区间内，为请求成功
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
　　console.log(xhr.responseText);
} else {
　　console.log("请求不成功：" + xhr.status);
}

　　　　2）异步状态下

　　　　　　即把open的第三个参数由false改为true,为什么异步，因为此时可以检测到XHR对象的readState属性

　　　　　　readState：可检测请求~响应的各个阶段

　　　　0：未初始化

　　　　1：启动

　　　　2：发送

　　　　3：接收

　　　　4：完成 （我们一般只对4感兴趣，检测4就OK）

　　　怎么检测readState？可以使用readystatechange事件，因为radState每一次改变，都会触发该事件。值得注意的是，必须在调用open()之前调用onreadystatechange事件才能确保跨浏览器兼容性。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if(xhr.readState === 4){
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
　　        console.log(xhr.responseText);
        } else {
　　        console.log("请求不成功：" + xhr.status);
        }
    }
}
xhr.open("get", "example.txt", true);
xhr.send(null);

　　　　3）get方法使用技巧

xhr.open("get", "url", true);

　　　通常此url都会伴随参数，并且经常因为这些查询字符串的格式问题而保持，所以添加参数的时候要用到encodeURLComponent(string)来进行编码

　　　为了不使用那种直接手动在url添加？&这种很繁琐的步骤，我们可以封装一个好玩的函数，如下

function addURLParam(url, name, value) {
    url += (url.indexOf("?") === -1 ? "?" : "&");
    url += encodeURLComponent(name) + "=" + encodeURLComponent(value) ;
}
//下面就构建一个url，超级方便
var url = "example.php";
// 添加参数
url = addUrlParam(url, "name", "Psg");
url = addUrlParam(url, "age", 23);
// 初始化请求
xhr.open("get", url, true)

ps：

encodeURLComponent的作用？

作用：文本字符串编码为一个有效的统一资源标识符 （URL）

假如我不用它来编码字符串，很有可能发发生下面的事情：

var username = "psg&age=23";
var url = "http://www.baidu.com?username=" + username; 

console.log(url) // 输出 http://www.baidu.com?username=psg&age=23

看到没有，莫名奇妙变成了两个参数了。使用了encodeURLComponent就不会出现这种情况。