很早就听说过 Ajax 异步刷新的大名,在未学 Ajax 之前,一直以为异步刷新是一项很复杂的技术,今天看了看,发现 Ajax 只是 web 开发中一项很小的技术,也很简单,今天就简单介绍一下 Ajax。
1.0 什么是 Ajax ?
- Ajax是一种用于创建快速动态网页的技术
2.0 为什么要用 Ajax ?
- 传统的网页技术,如果更需要新网页内容的话,那么必须重载整个页面,即便我们只想请求页面中很小一部分数据,也必须重载整个网页才能完成,这就造成了网络资源的浪费。
- Ajax 通过核心对象 XMLHttpRequest 在后台与服务器进行少量数据交换,可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,这就提高了网页的响应速度。
3.0 Ajax 的核心对象 XMLHttpRequest :
(1) 创建 XMLHttpRequest 对象
- IE7+、Firefox、Chrome 浏览器: new XMLHttpRequest();
- IE5 和 IE6 等老版本浏览器: new ActiveXObject(“Microsoft.XMLHTTP”);
(2) XMLHttpRequest 属性
- responseText: 获得字符串形式的响应数据。
- responseXML: 获得 XML 形式的响应数据。
- status: 由服务器返回的 HTTP 状态代码,如 200 表示成功,而 404 表示 “Not Found” 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
- statusText: 跟 status 属性一样,它只是用“OK”代替了200,用“Not Found”代替了404
- readyState: HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时,这个属性的值从 0 开始,直到接收到完整的 HTTP 响应,这个值增加到 4。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
(3) XMLHttpRequest 方法
- abort(): 取消当前响应,关闭连接并且结束任何未决的网络活动。
- open(): 初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。
- send(): 发送 HTTP 请求。
- getResponseHeader(): 返回指定的 HTTP 响应头部的值。
- getAllResponseHeaders(): 把 HTTP 响应头部作为未解析的字符串返回。
- setRequestHeader(): 向一个打开但未发送的请求设置或添加一个 HTTP 请求。
(4)XMLHttpRequest 事件句柄
4.0 XmlHttpRequest 对象的局限性
- XmlHttpRequest 不支持跨域访问,这是由网景公司 (netscape) 在开发浏览器时定义的同源策略导致的。