Preface: This is the introduction of the use of Ajax and background data exchange of small examples, so the demo must be opened through the server. Server environment is very good to build, download Wamp or xampp from the Internet, the installation is OK step by step, and then put the written page in the server specified location. When open, enter "localhost/specified page" or "127.0.0.1/specified page" in the browser address bar.
The following lists the demo's HTML, PHP, native Ajax, JQ Ajax code.
HTML code:
Copy Code code as follows:
<!doctype html>
<title>ajax Example </title>
<meta charset= ' Utf-8 '/>
<link rel= "stylesheet" type= "Text/css" href= "Css/common.css"/>
<style type= "Text/css" >
. main{height:400px;width:800px;margin:100px Auto 0;border:1px solid #000;}
. List{height:400px;width:200px;float:left;background: #ddd;}
. Inf{height:400px;width:600px;float:right;background: #ccc; text-align:center;}
. list li{width:200px;text-align:center;margin:50px 0 0;font-size:24px;cursor:pointer;
}
. inf img{width:360px;height:270px;margin:15px Auto;
. inf p{width:580px;text-align:left;text-indent:2em;font-size:14px;margin:0 10px;}
</style>
<body>
<div class= ' main ' >
<div class= ' list ' id= ' list ' >
<ul>
<li name= ' Spring ' id= ' Spring ' > Spring </li>
<li name= ' summer ' id= ' Summer ' > Summer </li>
<li name= ' fall ' id= ' Fall ' > Autumn </li>
<li name= ' Winter ' id= ' Winter ' > Winter </li>
</ul>
</div>
<div class= ' inf ' id= ' INF ' >
<!--the content to be inserted-->
</div>
</div>
</body>
<script type= "Text/javascript" charset= "Utf-8" src= "Js/jquery.js" ></script>
PHP Code:
Copy Code code as follows:
<?php
$details = Array (
' Spring ' => ' <p> World April Fangfei, the Mountain Temple Peach Blossom begins to bloom </p> ",
' Summer ' => ' <p> ' The crystal curtain move breeze, full rose a courtyard incense </p> ",
' Fall ' => ' <p> golden Well Indus Autumn leaves yellow, beads not roll night to frost </p>
' Winter ' => ' <p> Merson snow three points white, but the snow loses a section of fragrant </p>
);
echo $details [$_request[' Liname ']];
?>
Native Ajax:
Copy Code code as follows:
<script type= "Text/javascript" >
var lis = document.getElementById (' list '). getElementsByTagName (' Li ');
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 (otherms) {
try {
Request = new ActiveXObject ("Miscrosoft.xmlhttp");
}
catch (Failed) {
request = NULL;
}
}
}
return request;
}
function Getdetails (itemname) {
Request = Creatrequest ();
if (request = = null) {
Alert (' No request created successfully ')
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:
Copy Code code as follows:
<script type= "Text/javascript" >
$ (' #list li '). Click (function () {
$.ajax ({
Type: ' Get ',
Data: ',
URL: "getdetails.php?" Liname= "+this.id,
Success:function (data) {
$ (' #inf '). HTML (data);
},
DataType: ' Text ',
Error:function () {
Alert ("Failed!") ");
}
})
});
</script>
