Ajax Instance Tutorial: A program that is invoked asynchronously

Article Introduction: Ajax (asynchronous JavaScript and XML), so that users in the use of Web applications, do not have to return to the post, can almost real-time from the client received the server returned information, without the need to refresh, greatly rich user's operating experience.

Ajax (asynchronous JavaScript and XML), so that users in the use of Web applications, do not have to return to the post, can almost real-time from the client received the server returned information, without the need to refresh, greatly rich user's operating experience.

XMLHttpRequest object is the core object of Ajax

Different browsers, different ways to create objects here is an example of IE
var request = new ActiveXObject ("Microsoft.XMLHTTP")

Methods and properties for XMLHttpRequest objects:

Open (Request-type,url,asynch,username,password): Creates a new request to the server.
Request-type type of request sent: Get,post,head
URL to connect to the URL
Asynch Optional parameters, such as using asynchronous connections to true, such as using a synchronous connection to false, and the default value of True
Username optional parameter, if authentication is required, you can specify a user name here, no optional parameters
Password optional parameter, if authentication is required, you can specify a password here, no optional parameters

Send (content): sends a request to the server.
Content to send

Abort (): Exits the current request.

ReadyState: Provides the ready state of the current HTML.
0: Request not initialized
1: The request has been established, but has not yet been sent (send () has not been called)
2: Request sent, in process (usually can now get content headers from the response)
3: Request in processing, usually some of the data in the response is available
4: The response is complete

Status: Provides state code for current HTML
401: Unauthorized
403: No Access
404: No access page found
200: Normal

XMLHttpRequest object's head request

Get header of response
Request.getallresponseheaders ();
Request.getresponseheader ("Server");
Request.getresponseheader ("Connection");
Request.getresponseheader ("Date");
Request.getresponseheader ("Content-length");
Request.getresponseheader ("keep-alive");
Request.getresponseheader ("X-cache");
Request.getresponseheader ("Content-type");

Set header for request
Request.setrequest ("Server") = "";
Request.setrequest ("Connection") = "";
Request.setrequest ("Date") = "";
Request.setrequest ("content-length") = "";
Request.setrequest ("keep-alive") = "";
Request.setrequest ("x-cache") = "";
Equest.setrequest ("content-type") = "";

Example of an asynchronous calling program

<script language= "JavaScript" >

var request = new ActiveXObject ("Microsoft.XMLHTTP"); Create a XMLHttpRequest Object
function SendRequest ()
{
url = "Http://www.webjx.com/web_design.asp?Name=" + Value; Set the URL to send, the value to be sent is the key value pair

Request.open ("Get", url,true); Calling the Open method

Request.onreadystatechange = ShowMessage; To set a method for the server to callback
Request.send (NULL); Send
}

function ShowMessage ()
{
if (request.readystate = = 4 && request.status = 200)
{
alert (Request.responsetext);
}
}
</script>
Second, the Synchronization caller sample

<script language= "JavaScript" >

var request = new ActiveXObject ("Microsoft.XMLHTTP"); Create a XMLHttpRequest Object

function SendRequest ()
{
url = "Http://www.webjx.com/web_design.asp?Name=" + Value; Set the URL to send, the value to be sent is the key value pair

Request.open ("Get", url,false); Calling the Open method


Request.send (NULL); Send


alert (Request.responsetext);

}

</script>
The asynchronous requestor example demonstrates that the program first establishes the XMLHttpRequest object, and then executes the request asynchronously, onreadystatechange the client method that the server will call back when the request state changes, before the Send () method is set, In the ShowMessage () method, when the status of the ReadState is 4 and the status is 200, the difference between the execution synchronous request and the asynchronous request is that the client is going to wait when the request is synchronized, and the following procedure is executed when the server finishes processing the request, and the asynchronous request does not have to be The client's program can proceed after the request has been made, without having to wait until the server is processed before invoking the onReadyStateChange registration method.

Third, the request Head program example

<script language= "JavaScript" >
var request = new ActiveXObject ("Microsoft.XMLHTTP"); Create a XMLHttpRequest Object

function SendRequest ()
{
url = "Http://www.webjx.com/web_design.asp"; The URL to send

Request.open ("Head", url,true); Calling the Open method

Request.onreadystatechange = ShowMessage; To set a method for the server to callback
Request.send (NULL); Send
}

function ShowMessage ()
{
if (request.readystate = = 4 && request.status = 200)
{
Alert (Request.getallresponseheaders ()); Gets the value of the header
}
}

</script> This method differs from the previous method in that the first parameter of the open () method is head, and we can rewrite showmessage to get the corresponding head value

function ShowMessage ()
{
if (request.readystate = = 4 && request.status = 200)
{
Alert (Request.getresponseheader ("Server"));
Alert (Request.getresponseheader ("Connection"));
Alert (Request.getresponseheader ("Date"));
Alert (Request.getresponseheader ("content-length"));
Alert (Request.getresponseheader ("keep-alive"));
Alert (Request.getresponseheader ("X-cache"));
Alert (Request.getresponseheader ("Content-type"));
}
Iv. Sending XML data

The XMLHttpRequest object can send XML-formatted data to the server, but doing so reduces the response speed of the program, because XML-formatted data, when compared to plain text, handles more of the extra stuff, suggesting that it is not necessary to use XML

Example of a program sending XML data

<script language= "JavaScript" >

var request = new ActiveXObject ("Microsoft.xmlhttprequest"); Create a XMLHttpRequest Object

function Sendxmlrequest ()
{
XML = ""; XML data

url = "Http://www.webjx.com/web_design.asp"; Set the URL to send

Request.open ("Post", Url,false); Calling the Open method

Request.setrequestheader ("Content-type", "Text/xml"); Set headers for sending requests

Request.send (XML);

The program to execute
}
</script>