BlogJava 联系 聚合 管理  

Blog Stats

文章档案

相册



   就这个经典的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>
<href="javascript:sayHello();">Say Hello</a><br />
<!--<span id="span_result"></span>-->
</body>
</html>

 


5、参考:《Ajax基础教程

posted on 2008-04-12 12:04 学习者 阅读(307) 评论(1)  编辑  收藏

评论

# re: 从Ajax的HelloWorld说起 2015-05-07 21:43 fadsfdsaf
dafdasfdsf  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: