mootools框架里如何使用ajax

ajax在mootools
服务器君一共花费了874.575 ms进行了5次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

ajax可通过直接写源码实现,但有点繁琐,现在流行的ajax框架都集成了ajax的功能,而且写起来非常简单方便。当然mootools也不例外。mootools是一个非常优秀的javascript的库,有些地方跟prototype颇有相似(指按面向对象做js)。mootools的Request实现了对XMLHttpRequest的功能包装类,下面是我写的一个小示例:

function scoring(score){  
	//var url = document.getElementById("url").value;  
	var url = 'test';
	var pingRequest = new Request({  
    	method: "post",  
     	url:    "http://www.nowamagic.net/librarys/veda/",  
		data:	score, 
  		onSuccess:  function(responseText){  
          	if(responseText=="success"){  
          		//alert(responseText);
          	}  
          	else{  
          		//alert(responseText);
       		}  
     	},  
  		onFailure:  function(){  
       		//alert(responseText);
   		}  
    });  
  	pingRequest.send("url="+ url +"&score=" + score + "&id=" + id);  
}

在后台可以使用$_POST[]来获得ajax传过来的数据。

ajax类的使用:

var ajax = new Ajax(url, options);
ajax.request();

url是提交到后台处理的路径。options有2个经常使用的参数:{onComplete:handleFun,data:postArgs}

function handleFun(req){
	alert(req);
}

onComplete参数指向处理返回的文本函数;data(老版本用postBody名)是按doPost方式提交的字符串。

下面用ajax的2种方法提交form表单(相当于点击form中的submit按钮):

<form action="test.php" id="form1">
<input name="user_name" />
<input name="user_id" />
<input type="button" onclick="ajaxSubmit();" />
</form>

方法1:

function ajaxSubmit(){
    var postArgs = $('form1').toQueryString();
    new Ajax('test.php',
        {data:postArgs,onComplete:handleFun}).request();
}

方法2:

function ajaxSubmit(){
    var postArgs = $('form1').toQueryString();
    $('form1').send({onComplete:showResponse,data:postArgs});
}

$()函数相当于js的document.getElementById(),toQueryString()函数是得到form中提交元素的字符串。

用例1时无需在form中指定action,而必须指定Ajax中的url,例2则必须指定form中action,而无需指定Ajax中的url,另外在 test.php 中接受参数一律用 $_POST[''] 接受即可。

下面再来几个示例:

示例一

<script type="text/javascript">
	window.addEvent("domready",function(){
		$("send").addEvent("click",function(){
     		var url="nowamagic.php?areaid="+$("areaidvalue").value+"&say="+escape($("say").value);
        		// escape()是处理编码函数,没有它传替中文时会出乱码
                new Ajax(url,{method:'post',onComplete:function(){
                    $("Content").innerHTML=this.response.text;
                    alert('发表成功!');
                }}).request();
            });
        });
</script>

示例二

<script type="text/javascript">
window.addEvent("domready",function(){
    $('btnSent').addEvent('click',function(){
        if($('txtContent').innerText==''){
            alert('发送内容不能空!');
            return;
        }
        var url='Default2.aspx';
        var postData=$("postMessage").toQueryString();
        new Ajax(url,{method:'post',onComplete:function(){
            $('messageBox').innerHTML += this.response.text;
            }
        }).request(postData);
    });
});
</script>

示例三

	<script type="text/javascript">
        window.addEvent("domready",function(){
            $('myForm').addEvent('submit', function(e) {
                new Event(e).stop();
                if($("message").value==""){
                    alert('请输入要发送的消息');
                    return;
                }
             this.send({
              onComplete: function() {
                  var request=Json.evaluate(this.response.text);
                  $("messagebox").innerHTML=request.msg;
                  $("namebox").innerHTML=request.name;
               alert('发送成功!');
              }
             });
            });
            
        });
    </script>

本文地址:http://www.nowamagic.net/librarys/veda/detail/618,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/618

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《敏捷软件开发(原则模式与实践)》 马丁 (作者), 邓辉 (译者)

《敏捷软件开发:原则模式与实践》由享誉全球的软件开发专家和软件工程大师Robert C.Martin将向您展示如何解决软件开发人员、项目经理及软件项目领导们所面临的最棘手的问题。这本综合性、实用性的敏捷开发和极限编程方面的指南,是由敏捷开发的创始人之一所撰写的。1.讲述在预算和实践要求下,软件开发人员和项目经理如何使用敏捷开发完成项目;2.使用真实案例讲解如何用极限编程来设计、测试、重构和结对编程;3.包含了极具价值的可多次使用的C++和JAVA源代码;4.重点讲述了如何使用UML和设计模式解决面向客户系统的问题。

更多计算机宝库...