从Ajax的HelloWorld说起
从Ajax的HelloWorld说起 收藏就这个经典的HelloWorld示例，学习Ajax的交互模式。
还是从如何创建HelloWorld说起吧：
1、创建 XmlHttpRequest 对象
function createXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //Not IE
}
else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); //IE
}
else {
//Display your error message here.
//and inform the user they might want to upgrade
//their browser.
alert("Your browser doesn't support the XmlHttpRequest object. Better upgrade to Firefox.");
}
}
var receiveReq = createXmlHttpRequestObject();
2、初始化异步请求，XmlHttpRequest对象如何做“中转站”的工作，就在这里体现：
先获取个客户端事件信号，再把它传给服务器；
服务器根据readyState属性的变化情况回馈给XmlHttpRequest对象；（建立对服务器的调用，open（））
XmlHttpRequest对象根据回馈，CallBack()函数就会在客户端上做些有意思的工作。
function sayHello() {
//4表示请求完成，0表示未初始化;(点击按钮会初始化一个发到服务器的异步请求3333)
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
//建立对服务器的调用，call to SayHello.html(555)
receiveReq.open("GET", 'simpleResponse.xml', true);
//每个改变时都会触发这个事件处理器，通常会调用一0个javascript函数！(666) Set the function that will be called when the XmlHttpRequest objects state changes.
receiveReq.onreadystatechange = CallBack;
//向服务器发送请求
receiveReq.send(null);
}
}
2.2 CallBack()函数:
function CallBack() {
//Check to see if the XmlHttpRequests state is finished.
if (receiveReq.readyState == 4) {
//Set the contents of our span element to the result of the asyncronous call.
//document.getElementById('span_result').innerHTML = receiveReq.responseText;
alert("The"+receiveReq.responseText);
}
}
3、示意图：
4、完整代码（HelloWorld.HTML）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>The Hello World of AJAX</title>
<script language="JavaScript" type="text/javascript">
//创建 XmlHttpRequest 对象
function createXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //Not IE
}
else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); //IE
}
else {
//Display your error message here.
//and inform the user they might want to upgrade
//their browser.
alert("Your browser doesn't support the XmlHttpRequest object. Better upgrade to Firefox.");
}
}
var receiveReq = createXmlHttpRequestObject();
//Initiate the asyncronous request.初始化异步请求。
//点击按钮会初始化一个发到服务器的异步请求
//服务器将发回一个简单的静态文本作为响应
function sayHello() {
//4表示请求完成，0表示未初始化;(点击按钮会初始化一个发到服务器的异步请求（示意图中第3步)
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
//建立对服务器的调用，call to SayHello.html （示意图中第5步)
receiveReq.open("GET", 'simpleResponse.xml', true);
//每个改变时都会触发这个事件处理器，通常会调用一0个javascript函数！（示意图中第6步)
//Set the function that will be called when the XmlHttpRequest objects state changes.
receiveReq.onreadystatechange = CallBack;
//向服务器发送请求
receiveReq.send(null);
}
}
//Called every time our XmlHttpRequest objects state changes.
//handleStateChange回调函数，这个函数会检查XmlHttpRequest对象的readyState属性，
//然后查看服务器返回的状态码，如果一切正常，handleStateChange就会在客户端上做些有意思的工作
//CallBack()
function CallBack() {
//Check to see if the XmlHttpRequests state is finished.
if (receiveReq.readyState == 4) {
//Set the contents of our span element to the result of the asyncronous call.
//document.getElementById('span_result').innerHTML = receiveReq.responseText;
alert("The"+receiveReq.responseText);
}
}
</script>
</head>
<body>
<a href="javascript:sayHello();">Say Hello</a><br />
<!--<span id="span_result"></span>-->
</body>
</html>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/chjk1/archive/2008/04/12/2285300.aspx
页:
[1]