Native Ajax and JQ Ajax

Preface:This section describes a small example of Using ajax to exchange data with the background. Therefore, the demo must be opened on the server. The server environment is very well established. Download Wamp or XAMPP from the Internet, install it step by step, and then place the prepared page in the specified location on the server. When opening, enter "localhost/specified page" or "127.0.0.1/specified page" in the address bar of the browser to open the page.

The following lists the demo's HTML, PHP, native Ajax, and JQ Ajax code.

　HTML code:

<! Doctype HTML> 
　　PHP code:
<? PHP $ details = array ('spring' => " <p> April fangfei, the peach blossom in the temple is blooming. </P> ", 'summer '=>"  <p> the crystal curtain starts from the breeze, full rose one courtyard incense </P> ", 'fall' =>"  <p> Jinjing Wutong autumn leaf yellow, the curtain does not roll the night cream </P> ", 'Winter '=> " <p> Mei xueshen, snow but plum blossom </P> "); echo $ details [$ _ request ['liname'];?>
　Native Ajax:
<SCRIPT type = "text/JavaScript"> var Lis = document. getelementbyid ('LIST '). getelementsbytagname ('lil'); window. onload = initpage; function initpage () {for (VAR I = 0; I <Lis. length; I ++) {TXT = Lis [I]; TXT. onclick = function () {getdetails (this. ID) ;}} function creatrequest () {try {request = new XMLHttpRequest ();} catch (tryms) {try {request = new activexobject ("msxml2.xmlhttp ");} catch (OTH ERMS) {try {request = new activexobject ("miscrosoft. XMLHTTP ");} catch (failed) {request = NULL ;}} return request;} function getdetails (itemname) {request = creatrequest (); If (request = NULL) {alert ('failed to create request') return;} var url = "getdetails. PHP? Liname = "+ escape (itemname); Request. open ("get", URL, true); Request. onreadystatechange = displaydetails; request. send (null);} function displaydetails () {If (request. readystate = 4) {If (request. status = 200) {detaildiv = document. getelementbyid ("inf"); detaildiv. innerhtml = request. responsetext ;}}</SCRIPT>
　　JQ Ajax:
<script type="text/javascript">
$ ('# List li'). Click (function () {$. Ajax ({type: 'get', data: '', URL:" getdetails. php? Liname = "+ this. ID, success: function (data) {response ('{inf'}.html (data) ;}, datatype: 'text', error: function () {alert (" failed! ");}})});

</script>
Native Ajax and JQ Ajax