就这个经典的HelloWorld示例,学习Ajax的交互模式。
还是从如何创建HelloWorld说起吧:
1、创建 XmlHttpRequest 对象
还是从如何创建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();
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);
}
}
//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);
}
}
//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 >
< 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 >
5、参考:《Ajax基础教程》