一个AJAX的例子：点击页面相应的按钮从服务器的parseXML.xml返回值
本例子有两个文件parseXML.html、parseXML.xml
parseXML.html如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Parsing XML Responses with the W3C DOM</title>
<script type="text/javascript">
var xmlHttp;
var requestType = "";
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
//页面点击按钮事件 --主函数
function startRequest(requestedList) {
requestType = requestedList; //从点击事件传参数给requestType赋值
createXMLHttpRequest(); //第一步：创建XMLHttpRequest对象
xmlHttp.open("GET", "parseXML.xml", true); //第二步：建立与服务器的调用
xmlHttp.onreadystatechange = handleStateChange; //第三步：监听状态-->转到函数 andleStateChange
xmlHttp.send(null); //第四步：发送请求，并且立即返回
}
//监听状态函数
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
if(requestType == "north") { //根据点击事件时requestStata参数判断
listNorthStates(); //-->转到函数listNorthStates()，只显示所有北部州名
}
else if(requestType == "all") {
listAllStates() ;//-->转到函数listNorthStates()，显示所有州名
}
}
}
}
function listNorthStates() {
var xmlDoc = xmlHttp.responseXML; //-->xmlDoc取到值，由xmlHttp对象的responseXML方法从服务器的parseXML.xml文件取到
var northNode = xmlDoc.getElementsByTagName("north")[0]; //返回 xml文件中 指定标记值
var out = "Northern States";
var northStates = northNode.getElementsByTagName("state"); //返回该标记内的指定标记数组
outputList("Northern States", northStates); //-->转到在客户端输出的函数outputlist()
}
function listAllStates() { //本函数意义基本同上
var xmlDoc = xmlHttp.responseXML;
var allStates = xmlDoc.getElementsByTagName("state");
outputList("All States in Document", allStates);
}
//输出函数
function outputList(title, states) {
var out = title;
var currentState = null;
for(var i = 0; i < states.length; i++) {
currentState = states[i];
out = out + "/n- " + currentState.childNodes[0].nodeValue;
}
alert(out); //弹出提示框
}
</script>
</head>
<body>
<h1>Process XML Document of U.S. States</h1>
<br/><br/>
<form action="#">
<input type="button" value="View All Listed States" οnclick=" startRequest('all');"/> /！--调用主函数--/
<br/><br/>
<input type="button" value="View All Listed Northern States" οnclick=" startRequest('north');"/>
</form>
</body>
</html>
parseXML.xml如下：
<?xml version="1.0" encoding="UTF-8"?>
<states>
<north>
<state>Minnesota</state>
<state>Iowa</state>
<state>North Dakota</state>
</north>
<south>
<state>Texas</state>
<state>Oklahoma</state>
<state>Louisiana</state>
</south>
<east>
<state>New York</state>
<state>North Carolina</state>
<state>Massachusetts</state>
</east>
<west>
<state>California</state>
<state>Oregon</state>
<state>Nevada</state>
</west>
</states>
从这个简单的AJAX的例子看出，AJAX调用服务器的XML文件不同的书讲解的步骤不一样，大致分为四步：
第一步：创建XMLHttpRequest对象
第二步：建立与服务器的调用
第三步：监听状态-->转到函数handleStateChange()
第四步：发送请求，并且立即返回
}
本例子有两个文件parseXML.html、parseXML.xml
parseXML.html如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Parsing XML Responses with the W3C DOM</title>
<script type="text/javascript">
var xmlHttp;
var requestType = "";
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
//页面点击按钮事件 --主函数
function startRequest(requestedList) {
requestType = requestedList; //从点击事件传参数给requestType赋值
createXMLHttpRequest(); //第一步：创建XMLHttpRequest对象
xmlHttp.open("GET", "parseXML.xml", true); //第二步：建立与服务器的调用
xmlHttp.onreadystatechange = handleStateChange; //第三步：监听状态-->转到函数 andleStateChange
xmlHttp.send(null); //第四步：发送请求，并且立即返回
}
//监听状态函数
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
if(requestType == "north") { //根据点击事件时requestStata参数判断
listNorthStates(); //-->转到函数listNorthStates()，只显示所有北部州名
}
else if(requestType == "all") {
listAllStates() ;//-->转到函数listNorthStates()，显示所有州名
}
}
}
}
function listNorthStates() {
var xmlDoc = xmlHttp.responseXML; //-->xmlDoc取到值，由xmlHttp对象的responseXML方法从服务器的parseXML.xml文件取到
var northNode = xmlDoc.getElementsByTagName("north")[0]; //返回 xml文件中 指定标记值
var out = "Northern States";
var northStates = northNode.getElementsByTagName("state"); //返回该标记内的指定标记数组
outputList("Northern States", northStates); //-->转到在客户端输出的函数outputlist()
}
function listAllStates() { //本函数意义基本同上
var xmlDoc = xmlHttp.responseXML;
var allStates = xmlDoc.getElementsByTagName("state");
outputList("All States in Document", allStates);
}
//输出函数
function outputList(title, states) {
var out = title;
var currentState = null;
for(var i = 0; i < states.length; i++) {
currentState = states[i];
out = out + "/n- " + currentState.childNodes[0].nodeValue;
}
alert(out); //弹出提示框
}
</script>
</head>
<body>
<h1>Process XML Document of U.S. States</h1>
<br/><br/>
<form action="#">
<input type="button" value="View All Listed States" οnclick=" startRequest('all');"/> /！--调用主函数--/
<br/><br/>
<input type="button" value="View All Listed Northern States" οnclick=" startRequest('north');"/>
</form>
</body>
</html>
parseXML.xml如下：
<?xml version="1.0" encoding="UTF-8"?>
<states>
<north>
<state>Minnesota</state>
<state>Iowa</state>
<state>North Dakota</state>
</north>
<south>
<state>Texas</state>
<state>Oklahoma</state>
<state>Louisiana</state>
</south>
<east>
<state>New York</state>
<state>North Carolina</state>
<state>Massachusetts</state>
</east>
<west>
<state>California</state>
<state>Oregon</state>
<state>Nevada</state>
</west>
</states>
从这个简单的AJAX的例子看出，AJAX调用服务器的XML文件不同的书讲解的步骤不一样，大致分为四步：
第一步：创建XMLHttpRequest对象
第二步：建立与服务器的调用
第三步：监听状态-->转到函数handleStateChange()
第四步：发送请求，并且立即返回
}
421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
