Ajax frameworks are a collection of modular Ajax capabilities that can be implemented in a variety of languages (such as Sajax with a variety of language implementations), and Ajax is just one part of jquery,
Instance 1
The code is as follows |
Copy Code |
$.ajax ({ Type: ' Post ',//optional get URL: ' action.php ',//Here is the PHP program to receive the data Data: ' data= ' DSA ',//pass to PHP, multiple parameters & connection DataType: ' text ',//server returned data type optional XML, Json jsonp script HTML text, etc. Success:function (msg) { Here is the data processing function returned by the PHP program after the successful AJAX submission. MSG is the returned data, and the data type is defined in the datatype parameter! }, Error:function () { Ajax commit failed processing function! } }) |
PHP action.php
The code is as follows |
Copy Code |
<?php Echo ' www.111cn.net! '; ?> |
Here's a jquery Ajax user no refresh logon instance
Instance 2
The code is as follows |
Copy Code |
<title>jquery Ajax Example Demo </title> <script src= "./js/jquery.js" type= "Text/javascript" ></script> <script type= "Text/javascript" > $ (document). Ready (function () {//This is Jqueryready, it's like the C language main all operations contained inside it $ ("#button_login"). MouseDown (function () { Login (); Click the button with ID "Button_login" to trigger the function login (); }); }); function login () {//functions login (); var username = $ ("#username"). Val ();//The user name in the Fetch box var password = $ ("#password"). Val ();//password in the Fetch box $.ajax ({//an AJAX process Type: "POST",//post to communicate with the background URL: "login.php",//Communication with this PHP page DataType: ' json ',//return value from PHP interpreted in JSON Data: ' username= ' +username+ ' &password= ' +password,//php to be sent to two items, the above is the U and P Success:function (JSON) {//If PHP is invoked successfully Alert (json.username+ ' n ' +json.password); Send the return value (json.username) in PHP to alert $ (' #result '). HTML ("Name:" + json.username + "<br/> Password:" + Json.password); Display the return value in PHP at the predefined result locator location } }); $.post () Way: $ (' #test_post '). MouseDown (function () { $.post ( ' Login.php ', { username:$ (' #username '). Val (), password:$ (' #password '). Val () }, function (data)//postback functions { var myjson= '; Eval (' myjson= ' + data + '; '); $ (' #result '). HTML ("Name 1:" + myjson.username + "<br/> password 1:" + Myjson.password); } ); }); $.get () Way: $ (' #test_get '). MouseDown (function () { $.get ( ' Login.php ', { username:$ (' #username '). Val (), password:$ (' #password '). Val () }, function (data)//postback functions { var myjson= '; Eval ("myjson=" + Data + ";"); $ (' #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> Enter Name: </span><input type= "text" name= "username" id= "username"/></p> <p><span> input Password: </span><input type= "text" name= "password" id= "password"/></p> </form> <button id= "Button_login" >ajax submit </button> <button id= "Test_post" >post submit </button> <button id= "Test_get" >get submit </button> </body> |
PHP code
The code is as follows |
Copy Code |
<?php echo json_encode (Array (' username ' =>$_request[' username '), ' password ' =>$_request[' password ')); ?> |
Advantages and disadvantages of using jquery Ajax
Advantages
Small, compressed code only 20 more K (no compression code 94k).
Selector and Dom easy to operate: jquery Selector compared to MooTools Element.Selectors.js, CSS Selector, XPath Selector (deleted after 1.2)
Chaining: Always returns a JQuery object that can be continuously manipulated.
The integrity of the document, ease of use (each API has a complete example, which is not comparable to other frameworks now), and there are many other documents on the Web, books.
Extensive application, including Google Code, also uses jquery.
Sites using jquery: Http://docs.jquery.com/Sites_Using_jQuery
Core development team and core personnel: John Resig and so on.
Concise and short grammar, easy to remember.
Scalability: A large number of user-developed plug-ins available (http://jquery.com/plugins/)
The jquery UI (http://jquery.com/plugins/, based on jquery, but with the core of jquery is independent), continues to evolve.
Friendly and active community: Google Groups:http://docs.jquery.com/discussion
Event handling has many convenient methods, such as Click, not single addevent.
Disadvantages
because design idea is the pursuit of efficiency and simplicity, there is no object-oriented extension. Design ideas and MooTools are not the same.
CSS selector slightly slower (but now the speed has increased dramatically)