Ajax简介
一、什么是Ajax
Ajax是Asynchronous JavaScript and XML（异步JavaScript和XML）的简称，是指一种创建交互式网页应用的网页开发技术，实际它是多种技术的融合：
1. ECMAScript
2. DOM以及CSS,XHTML
3. XML及XML的一些扩展语言
4. XMLHttpRequest对象，这个是浏览器提供的可以用于异步通信的JavaScript对象，几乎所有的浏览器都支持
5. 服务器脚本的支持，服务器脚本可以是其他任何一步脚本语言
二、网页发展历史：
1. 文本
2. CGI
3. Sun的Java Applet
4. Netscape的JavaScript(MS的VBScript)
5. Sun引入serverlet，MS的ASP, Sun的JSP
6. Rich Internet Applications， SilverLight, Adobe Flash
7. Dynamic HTML，DHTML(动态HTML),它结合了HTML、CSS、JavaScript和DOM
三、Ajax的问题
1. 依赖JavaScript,影响浏览器的默认行为如后退收藏等
2. 用户习惯了请求/响应的模式，Ajax只修改页面的一部分，用户不适应，因此要告诉用户页面正在“异步”与服务器交互
使用Ajax的一个小例子：
主页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ajax简介</title>
<script type="text/javascript"></script>
</head>
<body>
<h1>Ajax简介</h1>
<iframe src="test.php" id="testFrame"></iframe>
<a herf="#" id="btn">异步加载</a>
<script type="text/javascript">
var iframe=document.getElementById("testFrame");
var btn=document.getElementById("btn");
btn.onclick=function () {
/*
iframe.onload=function () {
alert(iframe.contentWindow.document.body.innerHTML);
};*/
iframe.src="test.aspx?"+Math.random();
return false;
};
</script>
</body>
</html>
test.aspx
<script type="text/javascript">
var d = new Date();
alert(d);
</script>
四、XMLHttpRequest对象
XMLHttpRequest对象其实最早是由MS提出来的，并在IE5中就提供了支持。
使用方法：
var xhr=new XMLHttpRequest();
var xhr=new ActiveXObject("Microsoft.XMLHTTP");// ActiveXObject仅在MS的IE6/IE7上使用
判断是否可以使用XMLHttpRequest对象：
if(window.XMLHttpRequest){
var xhr=new XMLHttpRequest();
} else if (window.ActiveXObject){
var xhr=new ActiveXObject(Microsoft.XMLHTTP);
}
可以放到一个function里:
function createXHR(){
return window.XMLHttpRequest?
new XMLHttpRequest():
new ActiveXObject("Microsoft.XMLHTTP");
}
示例代码：
btn.onclick=function(){
var xhr=createXHR(),
url="test.aspx";
//xhr.open("get",url);
xhr.open("get",url+"?"+Math.random());// 使用?+Math.random()是为了避免缓存不刷新
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.getAllResponseHeaders());
alert(xhr.getResponseHeader("Content-Length"));
alert(xhr.responseText);
}
};
xhr.send();//向服务器发送请求
//xhr.abort();//取消此请求，一般用不着
}
XMLHttpRequest open使用方法：
oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
参数含义：
bstrMethod：http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。
bstrUrl：请求的URL地址，可以为绝对地址也可以为相对地址。
varAsync[可选]：布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
bstrUser[可选]：如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
bstrPassword[可选]：验证信息中的密码部分，如果用户名为空，则此值将被忽略。
readyState的含义：
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
需要知道的返回当前请求的http状态码（status）
200: OK
400: Bad Request
404: Not Found
XMLHttpRequest还可以返回xml,要注意编码问题。
使用POST的方法：
btn.onclick=function(){
var xhr=createXHR(),
url="test.aspx";
//xhr.open("get",url);
xhr.open("post",url+"?"+Math.random(),true);// 使用?+Math.random()是为了避免缓存不刷新
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")//使用POST多出这一句
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.getAllResponseHeaders());
alert(xhr.getResponseHeader("Content-Length"));
alert(xhr.responseText);
}
};
xhr.send("qs=true&userName=abc&pwd="+encodeURIComponent(new Date));//对于值传递必须调用encodeURIComponent
}
