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就不会出现这种情况。
