Typical Ajax example

Source: Internet
Author: User
Ajax (Asynchronous JavaScript and XML) enables users Program You can receive the information returned by the server from the client in near real time without refresh. This greatly improves the user experience.

XMLHTTPRequest object is the core object of Ajax. Different browsers use different object creation methods. Here, we use IE as an example.
VaR request = new activexobject ("Microsoft. XMLHTTP ") XMLHTTPRequest object methods and attributes: open (request-type, URL, asynch, username, password): Create a new request to the server.
Request-type: Get, post, head
URL
Asynch is an optional parameter. For example, if asynchronous connections are used to set the value to true, if synchronous connections are used to set the value to false, the default value is true.
Username: an optional parameter. If authentication is required, you can specify the user name here. No optional parameter.
Password: an optional parameter. If authentication is required, you can specify a password here. No optional parameter "Send (content)": send a request to the server.
Content

Abort (): exit the current request. Readystate: Provides the ready status of the current HTML.
0: the request is not initialized.
1: The request has been created but has not been sent (send () has not been called ())
2: The request has been sent and is being processed. (You can obtain the Content Header from the response)
3: When a request is being processed, some data in the response is usually available.
4: Response completed status: Provide the status code of the current html
401: unauthorized
403: Access prohibited
404: no access page found
200: The head request of the normal XMLHTTPRequest object obtains the response header.
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"); sets the request header.
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") = ""; 1. program example of asynchronous call
<Script language = "JavaScript">

VaR request = new activexobject ("Microsoft. XMLHTTP"); // create an XMLHTTPRequest object
Function sendrequest ()
{
Url = "http: // test/test. asp? Name = "+ value; // set the URL to be sent. The sent value is request. Open (" get ", URL, true); // call the Open Method

Request. onreadystatechange = showmessage; // you can specify the callback method for the server.
Request. Send (null); // send
}

Function showmessage ()
{
If (request. readystate = 4 & request. Status = 200)
{
Alert (request. responsetext );
}
}
</SCRIPT> 2. Example of synchronous calling program
<Script language = "JavaScript">

VaR request = new activexobject ("Microsoft. XMLHTTP"); // create the XMLHTTPRequest object function sendrequest ()
{
Url = "http: // test/test. asp? Name = "+ value; // set the URL to be sent. The sent value is the key-Value Pair request. Open (" get ", URL, false); // call the Open Method


Request. Send (null); // send


Alert (request. responsetext );

} </SCRIPT> example of an asynchronous request program: The program first establishes an XMLHTTPRequest object and then executes the request in an asynchronous way. onreadystatechange is when the Request status changes, the client method to be called back by the server must be set before the send () method. In the showmessage () method, when the readstate status is 4 and the status is 200, the difference between synchronous requests and asynchronous requests is that when synchronous requests are executed, the client waits. After the server completes processing the requests, the following program is executed, which is not required for asynchronous requests, the client program can continue execution after the request is sent without waiting until the server processes it and then calls the onreadystatechange registration method back. 3. program example for request head <script language = "JavaScript">
VaR request = new activexobject ("Microsoft. XMLHTTP"); // create an XMLHTTPRequest object

Function sendrequest ()
{
Url = "http: // test/test. ASP "; // The URL request to be sent. open ("head", URL, true); // call the Open Method Request. onreadystatechange = showmessage; // sets the method for server callback.
Request. Send (null); // send
} Function showmessage ()
{
If (request. readystate = 4 & request. Status = 200)
{
Alert (request. getAllResponseHeaders (); // gets the header value
}
}
</SCRIPT>
This method differs from the previous method in that the first parameter of the open () method is head. We can override showmessage to obtain 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 "));
}
}
4. XML data sending the XMLHTTPRequest object can send XML data to the server, but this will reduce the response speed of the program, because compared with common text, XML data, we recommend that you do not use XML to send XML data without the need to process more. <script language = "JavaScript">

VaR request = new activexobject ("Microsoft. XMLHttpRequest"); // create an XMLHTTPRequest object

Function sendxmlrequest ()
{
Xml = ""; // XML data

Url = "http: // test/test. asp"; // you can specify the sent URL.

Request. open ("Post", URL, false); // call the Open Method Request. setRequestHeader ("Content-Type", "text/XML"); // you can specify the request header.

Request. Send (XML); // the program to be executed
}
</SCRIPT> this article from the csdn blog, reprinted please indicate the source: http://blog.csdn.net/sony87615/archive/2009/08/26/4486480.aspx
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.