您的位置：首页 > 其它

Ajax学习笔记1之第一个Ajax应用程序

2015-09-24 17:01 399 查看

代码

<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上没任何问题

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航