ajax 与XMLHttpRequest对象(1/4)

创建一个XMLHttpRequest的引用
告诉XMLHttpRequest对象，哪个函数会处理XMLHttpRequest对象状态的改变，为此要设置onreadystatechange属性
指定请求的属性。open()
将请求发送给服务器。send()
xmlHttp.responseText将响应提供为一个串

以下示例代码包括两个文件，分别为：
simpleRequest.html和simpleResponse.xml

以下为其完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>simpleRequest.html</title>
<Meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<script type="text/javascript" >
var xmlHttp;
//创建一个XMLHttpRequest对象
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
//开始一个请求
function startRequest()
{
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET","simpleResponse.xml",true);
xmlHttp.send(null);
}
//当xmlHttp对象的内部状态发生变化时候，调用此处理函数
//一旦接受到相应（readyState为4）
function handleStateChange()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
alert("The server replied with:"+xmlHttp.responseText);
document.getElementById("result").innerHTML = xmlHttp.responseText;
}
}
}
</script>
<body>
<form>
<input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();" />
</form>
<div id="result" style="boder:1px solid red;width:400px;height:200px;">Box</div>
<hr/>
<ul>使用XMLHttpRequest对象发送请求的基本步骤如下：
<li>创建一个XMLHttpRequest的引用</li>
<li>告诉XMLHttpRequest对象，哪个函数会处理XMLHttpRequest对象状态的改变，为此要设置onreadystatechange属性</li>
<li>指定请求的属性。open()</li>
<li>将请求发送给服务器。send()</li>
<li>xmlHttp.responseText将响应提供为一个串</li>
</ul>
</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<books>
<book>
<author>Henry</author>
<pubdate>2011-11-11</pubdate>
<Subject>西游记</Subject>
</book>
<book>
<author>Kater</author>
<pubdate>2015-11-11</pubdate>
<Subject>娃哈哈</Subject>
</book>
</books>

效果：当点击页面上的button后，会alert出一个框，其中内容为xml文件中的内容。然后在html页面中id=result的div中显示xml中的信息。

ajax 与XMLHttpRequest对象(1/4)

猜你在找的Ajax相关文章