Ajax学习笔记1之第一个Ajax应用程序
代码
<head>
<title>An Ajax demo</title>
<script src="../js/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
//XMLHttpRequest对象:初始化为false;
var XMLHttpRequestObject = false;
//Netscape Navigator(7.0版及更高版本),Apple Safari(1.2及更高版本)和Firefox
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
}
//在Internet Explorer(5.0及更高版本)
else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID) {
//如果创建的XMLHttpRequest对象无效，则退出
if (XMLHttpRequestObject) {
var obj = document.getElementById(divID);
//打开XMLHttpRequest对象并配置好以便和服务器通信
XMLHttpRequestObject.open("GET", dataSource);
//处理数据下载
XMLHttpRequestObject.onreadystatechange = function () {
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
//获取数据
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
//真正执行下载的代码使用post方法时send("data="+data)
XMLHttpRequestObject.send(null);
}
else {
var obj = document.getElementById("targetDiv");
obj.innerHTML = "Sorry,your browser can't do Ajax.";
}
}
</script>
</head>
<body>
<h1>
An Ajax demo</h1>
<form>
<!--data.txt文件和index.htm必须确保位于服务器的同一目录中,如果不在同一目录，必须加上上几级目录,例:data/data.txt-->
<input type="button" value="Fetch the message" onclick="getData('data.txt','targetDiv')" /></form>
<div id="targetDiv">
<p>
The fetched message will appear here</p>
</div>
</body>
</html>
运行结果：
代码说明：
创建XMLHttpRequest对象
//在Netscape Navigator(7.0版及更高版本),Apple Safari(1.2及更高版本)和Firefox中，可以用下列代码创建XMLHttpRequest对象
//window.XMLHttpRequest:判断window.XMLHttpRequest对象是否存在(存在则浏览器可以用下面的方法创建XMLHttpRequest对象)
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
}
//在Internet Explorer(5.0及更高版本)中可以用下列代码创建XMLHttpRequest对象
//假如用户使用的是Microsoft Internet Explorer则应判断window.ActiveXObject对象是否存在(存在则浏览器可以用下面的方法创建XMLHttpRequest对象)
else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
打开XMLHttpRequest对象
//open("Method","URL"[,asyncFlag[,"userName"[,"password"]]])方括号[]中的内容是可选的
//各个参数含义如下:
//Method:用于打开HTTP的方法,如GET,POST,PUT,HEAD或PROPFIND
//URL:请求的URL
//asyncFlag:表示是否为异步调用的布尔值,默认为true
//userName:用户名
//password:密码
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequest.readyState和XMLHttpRequest.status
//readyState //0:未初始化 //1:正在加载 //2:已加载 //3:交互式 //4:完成,表示数据已下载完毕 //status //200:正常,表示下载正常 //404:未找到 if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { //下载的数据是简单文本对象,可从XMLHttpRequest对象的responseText属性读取这些数据 //下载的数据是XML格式,可从XMLHttpRequest对象的responseXml属性读取这些数据 obj.innerHTML = XMLHttpRequestObject.responseText; }
//真正执行下载的代码
XMLHttpRequestObject.send(null);
总结：
创建Ajax的一般步骤: (1)、创建一个XMLHttpRequest对象 (2)、使用XMLHttpRequest对象的open方法对其进行配置 (3)、将一个处理下载的JavaScript匿名函数通XMLHttpRequest对象的onreadystatechange属性关联起来 (4)、使用GET HTTP方法来获取数据，发送一个null值给服务器，这样将开始下载数据
注：在IE浏览器上按F12调试，只有在版本为10以上时才得到正确结果，在360上没任何问题
