How to Use ajax in the mootools framework

Ajax can be implemented by Directly Writing the source code, but it is a little complicated. Currently, popular ajax frameworks integrate ajax functions and are easy to write. Of course, mootools is no exception. Mootools is a very good javascript library, which is similar to prototype in some places (js based on object-oriented ). The Request of mootools implements the function packaging class for XMLHttpRequest. Below is a small example I wrote:

function scoring(score){  //var url = document.getElementById("url").value;  var url = 'test';var pingRequest = new Request({      method: "post",       url:    "http://www.bkjia.com/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);  }

In the background, you can use $ _ POST [] to obtain data transmitted by ajax.

Use of ajax classes:

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

The url is the path submitted to the background for processing. Options has two frequently-used parameters: {onComplete: handleFun, data: postArgs}

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

The onComplete parameter points to the text function to be processed. data (the postBody name is used in earlier versions) is a string submitted in doPost mode.

The following two ajax methods are used to submit a form (equivalent to clicking the submit button in form ):

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

Method 1:

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

Method 2:

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

The $ () function is equivalent to the document. getElementById () function of js. The toQueryString () function is used to obtain the string of the elements submitted in form.

In Case 1, you do not need to specify action in form, but url in Ajax. In case 2, you must specify action in form instead of url in Ajax. all accepted parameters in php are accepted using $ _ POST.

The following are examples:

Example 1

<Script type = "text/javascript"> window. addEvent ("domready", function () {$ ("send "). addEvent ("click", function () {var url = "bkjia. php? Areaid = "+ $ (" areaidvalue "). value + "& say =" + escape ($ ("say "). value); // escape () is a processing encoding function. If it is not passed as a Chinese character, garbled new Ajax (url, {method: 'post', onComplete: function () {$ ("Content "). innerHTML = this. response. text; alert ('published successfully! ') ;}}). Request () ;}); </script>

Example 2

<Script type = "text/javascript"> window. addEvent ("domready", function () {$ ('btnsent '). addEvent ('click', function () {if ($ ('txtcontent '). innerText = '') {alert ('sent content cannot be blank! '); Return;} var url = 'default2. aspx '; var postData = $ ("postMessage "). toQueryString (); new Ajax (url, {method: 'post', onComplete: function () {$ ('messagebox '). innerHTML + = this. response. text ;}}). request (postData) ;}); </script>

Example 3

<Script type = "text/javascript"> window. addEvent ("domready", function () {$ ('myform '). addEvent ('submit ', function (e) {new Event (e ). stop (); if ($ ("message "). value = "") {alert ('Enter the message to send'); return;} this. send ({onComplete: function () {var request = Json. evaluate (this. response. text); $ ("messagebox "). innerHTML = request. msg; $ ("namebox "). innerHTML = request. name; alert ('sent successfully! ') ;}}) ;}); </Script>