Basic jquery Ajax applications]

Ajax is an essential web development technology for creating interactive web applications in project development. It includes multiple technologies:

1. XHTML + CSS
2. Dom
3. xml and XSLT
4. XMLHttpRequest
5. Use JavaScript to bind everything together

The above may be complicated for beginners. This article uses a jquery Ajax instance to quickly get started with the application in the project.

Preview:

JqueryCode:

 1   VaR Tabs = $ ('. tabs_1' );  2   VaR Tabscon = $ ('. tabs_con_1' );  3   VaR _ CSS = 'active';  4   5 Tabs. Click ( Function  (){  6       VaR $ This = $ ( This  );  7       VaR Ajaxurl = $ This . Data ('url' );  8       VaR Index = tabs. Index ( This  );  9       VaR Currentcon = Tabscon. Hide (). eq (INDEX );  10   Tabs. removeclass (_ CSS );  11 $ This  . Addclass (_ CSS );  12   Currentcon. Show ();  13       If (! Currentcon. Data ('axaxlock') _ Ajax (ajaxurl, currentcon );  14   });  15   16 $ ('.' + _ CSS). Trigger ('click' );  17   18   Function  _ Ajax (ajaxurl, currentcon ){  19   $. Ajax ({  20   URL: ajaxurl,  21 Beforesend:Function  (){  22 Currentcon.html ('loading ...' );  23   },  24 Success: Function  (Response ){  25               If  (Response) currentcon.html (response );  26 Currentcon. Data ('ajaxlock ', True );  27   },  28 Error: Function  (){  29 Currentcon.html ('loading error! ' );  30 Currentcon. Data ('ajaxlock ', False  );  31   }  32   }); 33 }

Jquery Ajax core:

 1   $. Ajax ({  2 URL: ajaxurl, //  The URL is the address of the Ajax request. This address isProgramWe only need to request data and display the data.  3 Beforesend: Function (){ //  Beforesend is the operation performed before the Ajax request. This example outputs a sentence: "loading ..."  4 Currentcon.html ('loading ...' ); 5   },  6 Success: Function (Response ){ //  Success is the operation performed after the Ajax request is successful. In this example, the returned data (HTML + content) is placed in the content box (currentcon.  7           If  (Response) currentcon.html (response );  8 Currentcon. Data ('ajaxlock ', True  );  9   }, 10 Error: Function (){ //  Error indicates the operation that fails to be executed if the request fails. In this example, the following message is displayed: "loading error !"  11 Currentcon.html ('loading error! ' );  12 Currentcon. Data ('ajaxlock ', False  );  13   }  14 });

After reading the above Code and comments, Do you think Ajax is actually very simple? In fact, as long as you understand its principles, writing code will be very easy. However, jqury indeed simplifies Ajax steps and makes them easy to use.

Of course, jquery also provides some parameter configurations, such as type. You can download the jquery reference manual on this site for reference.