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