【Dojo学习之六】Ajax 数据接受和发送

在各种javascript都展示其Ajax的情况下，怎么能少了Dojo，它的实现就更简单了，不多说，上代码！

1.dojo Ajax 数据接受

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> dojo Ajax 数据接受</title>
<style type="text/css">
@import "./dojo/dojo/resources/dojo.css";
@import "./dojo/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" djConfig="parSEOnLoad: true,isDebug: true" src="./dojo/dojo/dojo.js"></script>
<style type="text/css"> 
    #container { 
        border:1px dotted #b7b7b7; 
        background:#ededed; 
        width:75px; 
        height:55px; 
    } 
</style> 
<script type="text/javascript">
var init = function(){ 
    var contentNode = dojo.byId("content"); 
    dojo.xhrGet({ 
        url: "sample.txt",handleAs: "text",load: function(data,args){ 
            // fade out the node we're modifying 
            dojo.fadeOut({ 
                node: contentNode,onEnd: function(){ 
                  // set the data,fade it back in 
                  contentNode.innerHTML = data;  
                  dojo.fadeIn({node: contentNode}).play();     
                } 
            }).play(); 
        },// if any error occurs,it goes here: 
        error: function(error,args){ 
            console.warn("error!",error); 
        } 
    }); 
};  
dojo.addOnLoad(init); 
</script>
</head>
<body>
<div id="container" class="Box"> 
    <div id="content"> 
        I am some Inner Content. 
        I am going to be replaced 
    </div> 
</div> 
</body>
</html>

请求的文件 sample.txt 中的内容

I am a <em>remote</em> file. 
We used Ajax to put this text 
in our page.

2.dojo Ajax 数据发送

前台页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> dojo Ajax 数据发送</title>
<style type="text/css">
 @import "./dojo/dojo/resources/dojo.css";
 @import "./dojo/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" djConfig="parSEOnLoad: true,isDebug: true" src="./dojo/dojo/dojo.js"></script>
<style type="text/css"> 
    #container { 
        border:1px dotted #b7b7b7; 
        background:#ededed; 
        width:75px; 
        height:55px; 
    } 
</style> 
<script type="text/javascript">
//sumbit the form  
var formSubmit = function(e){ 
    // prevent the form from actually submitting 
    e.preventDefault();  
    // submit the form in the background     
    dojo.xhrPost({ 
        url: "alternate-submit.PHP",form: "mainForm",handle: function(data,args){ 
            if(typeof data == "error"){ 
                console.warn("error!",args); 
            }else{ 
                // show our response  
                console.log(data); 
            } 
        } 
    }); 
}; 
dojo.addOnLoad(function(){ 
    var theForm = dojo.byId("mainForm"); 
    // another dojo.connect Syntax: call a function directly     
    dojo.connect(theForm,"onsubmit",formSubmit); 
}); 
</script>
</head>
<body>
<form id="mainForm" action="ajax-submit.PHP" method="post"> 
    <label for="firstName">Name: </label> 
    <input type="text" id="firstName" value="Enter Name" name="firstname"/> 
    <input type="submit" value="submit" /> 
</form> 
</body>
</html>

请求的后台 alternate-submit.PHP 页面代码

<?PHP 
    print "DATA RECEIVED:";  
    print "<ul>";  
    foreach($_REQUEST as $key => $var){ 
        print "<li>".$key." = ".$var."</li>"; 
    } 
    print "</ul>";  
?>

【Dojo学习之六】Ajax 数据接受和发送

相关文章