A simple example of Ajax: Selecting a book will get the relevant name in real time via Ajax.
Put 4 HTML files under the same file in your Web site.
Index.html
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> A simple Ajax instance that does not involve the server </title>
<script type= "Text/javascript" >
Declare a variable that references XMLHttpRequest
var xhr = null;
function to call when selecting a book
function Updatecharacters () {
var selectshow = document.getElementById ("Selshow"). Value;
if (Selectshow = = "") {
document.getElementById ("Divcharacters"). InnerHTML = "";
return;
}
Instantiate a XMLHttpRequest Object
if (window. XMLHttpRequest) {
Non IE
XHR = new XMLHttpRequest ();
} else {
Ie
XHR = new ActiveXObject ("Microsoft.XMLHTTP");
}
Xhr.onreadystatechange = CallbackHandler;
url = selectshow + ". html";
Xhr.open ("Post", url, True);
Xhr.send (NULL);
}
This are the function that would repeatedly be called by our
XMLHttpRequest object during the life cycle of request
function CallbackHandler () {
if (xhr.readystate = = 4) {
document.getElementById ("Divcharacters"). InnerHTML = Xhr.responsetext;
}
}
</script>
<body>
Our first example of Ajax
<br></br>
Choose a masterpiece:
<br>
<select onchange= "updatecharacters ();" id= "Selshow" >
<option value= "" ></option>
<option value= "Xyj" > Journey to the Westward </option>
<option value= "HLM" > Dream of Red Mansions </option>
<option value= "Shz" > Marsh </option>
<option value= "Sgyy" > The Kingdoms </option>
</select>
<br></br>
Return, the main task of the masterpiece:
<br>
<div id= "Divcharacters" >
<select>
</select>
</div>
</body>
Xyj.html
Copy Code code as follows:
<select>
<option> Tang's monk </option>
<option> Monkey King </option>
<option> Pig </option>
<option> Tang's monk </option>
<option> Kwan-Yin Sister </option>
<option> Buddha </option>
</select>
Hlm.html
Copy Code code as follows:
<select>
<option> Jia Baoyu </option>
<option> Lin Daiyu </option>
<option> Xue Chai </option>
</select>
Shz.html
Copy Code code as follows:
<select>
<option> Lin Chong </option>
<option> Likui </option>
<option> Song Jiang </option>
<option> Time to move </option>
</select>
Sgyy.html
Copy Code code as follows:
<select>
<option> Liu Bei </option>
<option> Guan Yu </option>
<option> Zhang Fei </option>
<option> Caocao </option>
<option> Little Joe </option>
<option> Zhuge Liang </option>
</select>
