The Ajax framework provides a set of modular Ajax functions. The Ajax framework can be implemented in various languages (for example, SAJAX has implementation in various languages). Ajax is only part of jquery,
Instance 1
Copy codeThe Code is as follows:
$. Ajax ({
Type: 'post', // optional get
Url: 'action. php', // The php program that receives data.
Data: 'Data = 'dsa ', // data transmitted to PHP. Use & to connect multiple parameters.
DataType: 'text', // the data type returned by the server can be XML or Json jsonp script html text.
Success: function (msg ){
// Here is the data processing function returned by the PHP program after ajax is submitted successfully. Msg is the returned data. The data type is defined in the dataType parameter!
},
Error: function (){
Processing Function for ajax submission failure!
}
})
PHP action. php
Copy codeThe Code is as follows:
<? Php
Echo 'www .jb51.net! ';
?>
Next, let's take a look at the jquery ajax user's unrefresh login instance.
Instance 2
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> jQuery Ajax instance demonstration </title>
</Head>
<Script src = "./js/jquery. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function () {// This is jQueryready. It is like all the main operations in C are included in it.
$ ("# Button_login"). mousedown (function (){
Login (); // click the button with the ID "button_login" to trigger the function login ();
});
});
Function login () {// function login ();
Var username = $ ("# username"). val (); // obtain the username in the box.
Var password = $ ("# password"). val (); // obtain the password in the box.
$. Ajax ({// an Ajax Process
Type: "post", // post communication with the background
Url: "login. php", // communicate with this php page
DataType: 'json', // The value returned from php is interpreted in json format.
Data: 'username = '+ username +' & password = '+ password, // There are two data items sent to php, namely u and p from above
Success: function (json) {// If php is successfully called
// Alert (json. username + 'n' + json. password); // return the returned value (json. username) in php to alert
Certificate ('{result'}.html ("name:" + json. username + "<br/> password:" + json. password); // display the return value in php at the predefined result location
}
});
// $. Post () method:
$ ('# Test_post'). mousedown (function (){
$. Post (
'Login. php ',
{
Username: $ ('# username'). val (),
Password: $ ('# password'). val ()
},
Function (data) // return function
{
Var myjson = '';
Eval ('myjson = '+ data + ';');
Certificate ('{result'}.html ("name 1:" + myjson. username + "<br/> password 1:" + myjson. password );
}
);
});
// $. Get () method:
$ ('# Test_get'). mousedown (function ()
{
$. Get (
'Login. php ',
{
Username: $ ('# username'). val (),
Password: $ ('# password'). val ()
},
Function (data) // return function
{
Var myjson = '';
Eval ("myjson =" + data + ";");
Certificate ('{result'}.html ("name 2:" + myjson. username + "<br/> password 2:" + myjson. password );
}
);
});
}
</Script>
<Body>
<Div id = "result" style = "background: orange; border: 1px solid red; width: 300px; height: 200px;"> </div>
<Form id = "formtest" action = "" method = "post">
<P> <span> input name: </span> <input type = "text" name = "username" id = "username"/> </p>
<P> <span> enter the password: </span> <input type = "text" name = "password" id = "password"/> </p>
</Form>
<Button id = "button_login"> ajax submit </button>
<Button id = "test_post"> post submission </button>
<Button id = "test_get"> get submit </button>
</Body>
</Html>
Php code
Copy codeThe Code is as follows:
<? Php
Echo json_encode (array ('username' = >$ _ REQUEST ['username'], 'Password' = >$ _ REQUEST ['Password']);
?>
Advantages and disadvantages of using jquery ajax
Advantages
Small. After compression, the code is only 20 KB (94 KB without compression code ).
Convenience of Selector and DOM operations: Comparison of jQuery Selector and mootools's Element. Selectors. js, CSS Selector and XPath Selector (deleted after 1.2)
Chaining: always returns a jQuery object, which can be operated continuously.
Documentation is complete and easy to use (each API has a complete example, which is incomparable to other frameworks currently), and there are many other documents and books on the Internet.
JQuery is also widely used, including google code.
Use jQuery site: http://docs.jquery.com/Sites_Using_jQuery
Core development teams and core personnel: John Resig.
Simple and short syntax, easy to remember.
Scalability: There are a lot of user-developed plug-ins available (http://jquery.com/plugins)
JQuery UI (http://jquery.com/plugins/, Based on jquery, but independent of the core jquery) continues to develop.
Friendly and active community: google groups: http://docs.jquery.com/Discussion
There are many convenient methods for event processing, such as click, rather than a single addEvent.
Disadvantages
Because the design concept is efficient and concise, there is no object-oriented extension. The design concept is different from that of Mootools.
The speed of CSS Selector is a little slow (but the speed has been greatly improved)