[Ajax Introduction]
Ajax is a Web application development method that uses client script to exchange data with a Web server. Web pages can be updated dynamically without interrupting the interactive process. With Ajax, users can create a direct, highly available, richer, more dynamic Web user interface that is close to local desktop applications.
asynchronous Javascrīpt and XML (AJAX) are not new technologies, but use several existing technologies-including cascading style sheets (CSS), javascrīpt, XHTML, XML, and Extensible Style Language Transformations (XSLT), Develop Web applications that look and operate like desktop software.
[Ajax implementation Principles]
An AJAX interaction begins with a Javascrīpt object called XMLHttpRequest. As the name implies, it allows a client script to execute the HTTP request and will parse an XML-formatted server response. The first step in the AJAX process is to create a 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 hang up and wait for the server to respond, instead, you want to continue to interact with the user's interface through the page and process them after the server response has actually arrived. To do this, you can register a callback function with XMLHttpRequest and distribute XMLHttpRequest requests asynchronously. Control is immediately returned to the browser, and the callback function is invoked when the server response arrives.
[Ajax Practical Application]
1. Initialize Ajax
Ajax is actually calling the XMLHttpRequest object, so first we have to call this object, and we build a function that initializes Ajax:
/**
* Initialization of a XMLHTTP object
*/
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;
}
You may say that this code because to call the XMLHTTP component, is not only IE browser can make, not by my experiment, Firefox can also be used.
So before we do any AJAX operation, we must first invoke our Initajax () function to instantiate an Ajax object.
2. Using Get method
Now the first step is to execute a GET request and join the data that we need to obtain/show.php?id=1, so what should we do?
Suppose there is a link: <a href= "/show.php?id=1" > news 1</a> When I click the link, I don't want any refreshing to see the link content, so what do we do?
Change the link to:
<a href= "#" ōnclick= "Getnews (1)" > News 1</a>
and set a layer to receive the news, and set to not show:
<div id= "Show_news" ></div>
Construct the corresponding javascrīpt function at the same time:
function Getnews (NewsID)
{
If you don't pass the parameter NewSID in,
if (typeof (NewsID) = = ' undefined ')
{
return false;
}
The URL address that needs to be Ajax
var url = "/show.php?id=" + NewsID;
Get the position of the news display layer
var show = document.getElementById ("Show_news");
Instantiating an Ajax object
var ajax = Initajax ();
Request using Get method
Ajax.open ("Get", url, True);
Get Execution status
Ajax.onreadystatechange = function () {
If the execution is in a normal state,
