A simple Ajax example: if you select a book, the relevant name will be obtained in real time through Ajax.
Put four html files under the same file on the web site.
Index.html
Copy codeThe Code is as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> A simple Ajax instance that does not involve servers </title>
<Script type = "text/javascript">
// Declare a variable that references XMLHttpRequest
Var xhr = null;
// Select a function called when writing
Function updateCharacters (){
Var selectShow = document. getElementById ("selShow"). value;
If (selectShow = ""){
Document. getElementById ("divCharacters"). innerHTML = "";
Return;
}
// Instantiate an 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 is the function that will 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>
</Head>
<Body>
Our first Ajax instance
<Br> </br>
Select a masterpiece:
<Br>
<Select onchange = "updateCharacters ();" id = "selShow">
<Option value = ""> </option>
<Option value = "xyj"> travel to the West </option>
<Option value = "hlm"> Dream of Red Mansions </option>
<Option value = "shz"> Water Margin </option>
<Option value = "sgyy"> Romance of the Three Kingdoms </option>
</Select>
<Br> </br>
Back, main tasks in famous books:
<Br>
<Div id = "divCharacters">
<Select>
</Select>
</Div>
</Body>
</Html>
Xyj.html
Copy codeThe Code is as follows:
<Select>
<Option> Tang Seng </option>
<Option> Sun Wukong </option>
<Option> pig Bajie </option>
<Option> Tang Seng </option>
<Option> sister Guanyin </option>
<Option> westday Ruilai </option>
</Select>
Hlm.html
Copy codeThe Code is as follows:
<Select>
<Option> Jia Baoyu </option>
<Option> Lin Daiyu </option>
<Option> Xue Baochai </option>
</Select>
Shz.html
Copy codeThe Code is as follows:
<Select>
<Option> Lin Chong </option>
<Option> Li Yun </option>
<Option> Song Jiang </option>
<Option> time migration </option>
</Select>
Sgyy.html
Copy codeThe Code is as follows:
<Select>
<Option> Liu Bei </option>
<Option> Guan Yu </option>
<Option> Zhang Fei </option>
<Option> CAO Cao </option>
<Option> Xiao Qiao </option>
<Option> Zhuge Liang </option>
</Select>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
