Ajax学习
2005 年Jesse James Garrett 发表了一篇文章，标题为：“Ajax：A new Approach to Web Applications”。
他在这篇文章里介绍了一种技术，用他的话说，就叫：Ajax，是Asynchronous JavaScript + XML 的简写。
这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。一时间，席卷全球。
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。虽然Ajax 中的x 代表的是XML，但Ajax 通信和数据格式无关，也就是说这种技术不一定使用XML。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
1. 创建XMLHttpRequest对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。它是AJAX的基础.
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
不同的浏览器创建方法如下:
var xhr;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 等浏览器执行代码
xhr = new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
2. 发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
open()方法并不会真正发送请求，而只是启动一个请求以备发送。通过send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如果不需要则，必须填null。执行send()方法之后，请求就会发送到服务器上。
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求: method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）, 默认是异步 |
| send(string) | 将请求发送到服务器。 string：仅用于 POST 请求, 如果是 GET 请求则必须填入null |
使用 GET 方法发送请求:
xhr.open("GET","url?key=value",true);
xhr.send(null);
使用 POST 方法发送略有不同:
//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来设置HTTP 头。“骗”过服务器,以表单的方式提交过去的
//然后在 send() 方法中规定希望发送的数据
xhr.open("POST",url);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("key=value");
3. 获取响应
当请求发送到服务器端，收到响应后，响应的数据会自动填充 XMLHttpRequest 对象的属性。
| 属性名 | 说明 |
|---|---|
| responseText | 作为响应主体被返回的文本 |
| responseXML | 如果响应主体内容类型是“text/xml”或“application/xml”, 则返回包含响应数据的 XML DOM 文档 |
| status | 响应的 HTTP 状态 |
| readyState | HTTP 状态的说明 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化, 尚未调用open()方法 1: 服务器连接已建立, 已经调用open()方法, 但尚未调用send()方法 2: 请求已发送, 已经调用send()方法, 但尚未接受响应 3: 解析响应数据中, 已经开始接受响应数据 4: 解析已完成，已经接受到全部响应数据 |
如果来自服务器的响应并非 XML，请使用 responseText 属性。
responseText 属性返回字符串形式的响应，因此您可以这样使用：
var text = xhr.responseText;
4. onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
我们需要重写 onreadystatechange 事件方法:
重写 onreadystatechange 方法
xhr.onreadystatechange=function(){
// 当 readyState 等于 4 且 HTTP 状态码为 200 时，表示响应接受成功：
if (xhr.readyState == 4 && xhr.statu s== 200){
// 获取响应数据
var text = xhr.responseText;
}
}
一个AJAX的完整实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX实例</title>
</head>
<body>
<p id="p"></p>
<script type="text/javascript">
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) { // ajax状态码
if (ajax.status == 200) { // 服务器状态码
var text = ajax.responseText; // 获取响应数据
p.innerText = text;
}
}
}
ajax.open("get", "/web07/ajaxTest?name=xxx", true);
ajax.send(null);
</script>
</body>
</html>
1047
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
