An instance for obtaining site file content through Ajax does not involve servers

Source: Internet
Author: User

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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.