To apply Ajax, you must first understand the implementation principle of Ajax: Ajax interaction starts with a JavaScript Object called XMLHttpRequest. As the name implies, it allows a client script to execute an HTTP request and parse a server response in XML format. The first step in Ajax processing is to create an XMLHttpRequest instance. Use the HTTP method (get or post) to process the request and set the target URL to the XMLHTTPRequest object.
When you send an HTTP request, you do not want the browser to suspend and wait for the response from the server. Instead, you want to continue responding to user interface interactions through the page, and post-processing them after the server response actually arrives. To complete this, you can register a callback function with XMLHttpRequest and asynchronously dispatch the XMLHttpRequest request. The Control Right is immediately returned to the browser. When the server responds, the callback function will be called.
You may not be able to understand this. It's too abstract! The following is an example of Ajax:
1. initialize Ajax
Ajax actually calls the XMLHTTPRequest object. First, we must call this object. We construct an Ajax initialization function:
Function initajax ()
{
VaR Ajax = false;
Try
{
Ajax = new activexobject ("msxml2.xmlhttp ");
}
Catch (E)
{
Try
{
Ajax = new activexobject ("Microsoft. XMLHTTP ");
}
Catch (E)
{
Ajax = false;
}
}
If (! Ajax & typeof XMLHttpRequest! = 'Undefined ')
{
Ajax = new XMLHttpRequest ();
}
Return Ajax;
}
Before executing any Ajax operation, we must call the initajax () function to instantiate an Ajax object. This function can be used as a general function. Of course, this function also has other writing methods. It is relatively simple to write here, because most browsers support Ajax.
2. Use the get Method
Now let's first execute a GET request. Do we need to get/show. php? Id = 1 data, so what should we do?
Assume there is a link: <a href = "/show. php? Id = 1 "> News 1 </a>. When I click this link, I don't want to refresh it to see the link content. What should I do?
// Change the link:
<A href = "#" onclick = "getnews (1)"> News 1 </a>
// Set a layer for receiving news, and set it to not display:
<Div id = "show_news"> </div>
At the same time, construct the corresponding JavaScript function:
Function getnews (newsid)
{
// If newsid is not passed in
If (typeof (newsid) = 'undefined ')
{
Return false;
}
// URL for Ajax
VaR url = "/show. php? Id = "+ newsid;
// Obtain the position of the news display Layer
VaR show = Document. getelementbyid ("show_news ");
// Instantiate an Ajax object
VaR Ajax = initajax ();
// GET requests
Ajax. Open ("get", URL, true );
// Obtain the execution status
Ajax. onreadystatechange = function (){
// If the execution is normal, the returned content is assigned to the layer specified above.
If (Ajax. readystate = 4 & Ajax. Status = 200)
{
Show. innerhtml = Ajax. responsetext;
}
}
// Sending Blank
Ajax. Send (null );
}
When you click "News 1", the retrieved content is displayed at the corresponding layer below, and the page is not refreshed. Of course, the show. php file is omitted above. we just assume that the show. php file exists and can normally extract the news with ID 1 from the database. This method is applicable to any elements in the page, including forms. In fact, there are many form operations in the application. For forms, the POST method is more used.
The following is a simple example:
1. Test. php file code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> Ajax test page </title>
<Style type = "text/CSS">
<! --
Body {
Margin-left: 10%;
Margin-Right: 10%;
}
# Layer1 {
Position: absolute;
Width: 256px;
Height: 326px;
Z-index: 1;
Left: pixel PX;
Top: 16px;
}
-->
</Style>
<SCRIPT type = "text/JavaScript">
Function initajax ()
{
VaR Ajax = false;
Try
{
Ajax = new activexobject ("msxml2.xmlhttp ");
}
Catch (E)
{
Try
{
Ajax = new activexobject ("Microsoft. XMLHTTP ");
}
Catch (E)
{
Ajax = false;
}
}
If (! Ajax & typeof XMLHttpRequest! = 'Undefined ')
{
Ajax = new XMLHttpRequest ();
}
Return Ajax;
}
Function getimages (ID)
{
VaR url = "images. php? Picture = "+ ID;
VaR show = Document. getelementbyid ("layer1 ");
VaR Ajax = initajax ();
Ajax. Open ("get", URL, true );
Ajax. onreadystatechange = function ()
{
If (Ajax. readystate = 4 & Ajax. Status = 200)
{
Show. innerhtml = Ajax. responsetext;
}
}
Ajax. Send (null );
}
</SCRIPT>
</Head>
<Body>
<Table width = "226" Height = "433" border = "1" align = "Left" cellpadding = "3" rules = "NONE" frame = "RHS">
<Tr>
<TH Height = "69" Scope = "col" align = "right"> <input type = "button" name = "" value = "Image 1" onclick = "getimages (1) "> </Th>
</Tr>
<Tr>
<TH Height = "69" Scope = "col" align = "right"> <input type = "button" name = "" value = "Image 2" onclick = "getimages (2) "> </Th>
</Tr>
<Tr>
<TH Height = "69" Scope = "col" align = "right"> <input type = "button" name = "" value = "picture 3" onclick = "getimages (3) "> </Th>
</Tr>
<Tr>
<TH Height = "214" Scope = "col"> </Th>
</Tr>
</Table>
<Div id = "layer1"> </div>
</Body>
</Html>
2. Images. php file code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> image </title>
</Head>
<Body>
<? PHP
$ Id = $ _ Get ["picture"];
If ($ id = 1)
{
Printf (" ");
}
If ($ id = 2)
{
Printf (" ");
}
If ($ id = 3)
{
Printf (" ");
}
?>
</Body>
</Html>
You only need to have these three images in the images folder!
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
