How does an Ajax HTTP request work? How does Ajax request a server? (with instance resolution)

This article focuses on the basics of Ajax, the history of Ajax, and the basic use of Ajax, and now let's look at this article.

AJAX Basics
AJAX refers to asynchronous JavaScript and XML (asynchronous JavaScript and XML).
AJAX is a programming model that was popularized by Google in the 2005.
AJAX is not a new programming language, but a new method of using existing standards.
With AJAX, you can create better, faster, and more user-friendly WEB applications.
AJAX is based on JavaScript and HTTP requests (HTTP requests).
Introduction to AJAX
AJAX refers to asynchronous JavaScript and XML (asynchronous JavaScript and XML).
The basics you should have
Before you continue your study, you need to have a basic understanding of the following knowledge:
* html/xhtml
* JavaScript
If you want to learn these items first, please visit these tutorials on our homepage.
AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML)
AJAX is not a new programming language, but rather a technique for creating better, faster, and more interactive Web applications.
With AJAX, your JavaScript can use JavaScript's XMLHttpRequest object to communicate directly with the server. Through this
Object, your JavaScript WEB server exchanges data. You can do this without overloading the page with the
AJAX uses asynchronous data transfer (HTTP requests) between the browser and the Web server, which allows the Web page to request a small amount of information from the server, while
Not the entire page.
AJAX can make Internet applications smaller, faster, and friendlier.
AJAX is a browser technology that is independent of WEB server software.
AJAX WEB-based standards
AJAX is based on the following WEB standards:
* JavaScript
* XML
* HTML
* CSS
The WEB standards used in AJAX have been well-defined and supported by all major browsers. AJAX applications are independent of browsers and platforms.
AJAX is about better apps
WEB applications have many advantages over desktop applications, they can involve a wide range of users, they are easier to install and maintain, and are more easily developed.
However, Internet applications are not as perfect and friendly as traditional desktop applications.
With AJAX, Internet applications can become more complete and friendlier. (Want to see more on the Topic.alibabacloud.comAJAX Development Manual section of the study)

AJAX Http Requests
A JAX using Http requests
In traditional JavaScript programming, if you want to get any information from a file or database on a server, or send a message to the server
, you must take advantage of an HTML table-one-way server GET or POST data. The user will need to click the Submit button to send/receive the letter
Wait for the server to respond, and a new page will load the results.
Because the server will return a new page each time the user submits the input, the traditional Web application becomes slow and less friendly.
By using AJAX, your JavaScript communicates directly with the server through JavaScript's XMLHttpRequest object.
By using an HTTP request, a Web page can make a request to the server and get a response from the server without loading the page. Users can stay in the same
A page, he or she will not notice that the script has requested pages in the background or sent data to the server.
XMLHttpRequest Object
By using the XMLHttpRequest object, the Web developer can update the page from the server after the page has been loaded!
AJAX was promoted by Google in 2005 (Google Suggest).
Google recommends using the XMLHttpRequest object to create a highly dynamic Web interface: When you start typing in Google's search box
When queried, JavaScript issues these words to a server, and the server returns a series of search suggestions.
XMLHttpRequest objects are supported by the following browsers: Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0/firefox, Opera 8+, and Netscape 7.

Your first AJAX application
To give you an idea of how Ajax works, we'll create a small AJAX application.
First, we need an HTML form with two text boxes: username and time. The User Name text box is filled in by the user, and the time text box uses
AJAX to fill in.
This HTML file is named "testajax.htm" (please note that this HTML form does not have a submit button!) ）：

AJAX Browser Support
AJAX-Browser support
The main point of AJAX is the XMLHttpRequest object.
There are differences in the way that different browsers create XMLHttpRequest objects.
Internet Explorer uses ActiveXObject, while other browsers use JavaScript built-in objects called XMLHttpRequest.
To create this object for a different browser, we'll use a try and catch statement. You can take a tutorial in our JavaScript
Read more about the try and catch statements.
Let's update our "testajax.htm" file with this section of JavaScript that creates XMLHttpRequest objects:


Example Explanation:
First, declare a xmlHttp variable that holds the XMLHttpRequest object.
Then use Xmlhttp=new XMLHttpRequest () to create this object. This statement is for Firefox, Opera, and Safari browsers.
If you fail, try Xmlhttp=new activexobject ("Msxml2.xmlhttp") for Internet Explorer 6.0+, if you do not
Successful, try Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP") for Internet Explorer 5.5+.
If none of the three methods work, then the browser used by the user is too outdated and he or she will see a statement that this browser does not support
AJAX hints.
Note: The above browser-customized code is very long and complex. However, whenever you want to create a XMLHttpRequest object, the code
Can be useful, so you can copy and paste the code at any time you need to use it. The above code is compatible with all major browsers:
Internet Explorer, Opera, Firefox, and Safari.
Ajax-xmlhttprequest Object
AJAX-More knowledge about XMLHttpRequest objects
Before sending data to the server, it is necessary to explain the three important properties of the XMLHttpRequest object.
onReadyStateChange Property
The onReadyStateChange property has functions that handle server responses. The following code defines an empty function that can be used to
The onReadyStateChange property is set:
Xmlhttp.onreadystatechange=function ()
{
We need to write some code here.
}
ReadyState Property
The ReadyState property holds state information about the server response. The onreadystatechange function is executed whenever readyState changes.
This is the possible value of the ReadyState property:
Status description
0
Request not initialized (before calling open ())
1
Request has been made (before calling send ())
2
The request has been sent (the content header can usually be obtained from the response)
3
In request processing (usually some of the data in the response is available, but the server has not yet completed the response)
4
Request completed (Can access server response and use it)

We're going to add an if statement to this onreadystatechange function to test if our response is complete (which means we can get the data)
：
Xmlhttp.onreadystatechange=function ()
{
if (xmlhttp.readystate==4)
{
Getting data from the server's response
}
}
ResponseText Property
The data returned by the server can be retrieved through the ResponseText property.
In our code, we will set the value of the time text box to equal to ResponseText:
Xmlhttp.onreadystatechange=function ()
{
if (xmlhttp.readystate==4)
{
Document.myform.time.value=xmlhttp.responsetext;
}
}
AJAX-Request Server
AJAX-Sending a request to the server
To send the request to the server, we need to use the open () method and the Send () method.
The open () method requires three parameters. The first parameter defines the method (GET or POST) that is used to send the request. The second parameter specifies a server-side

The URL of the script. The third parameter specifies that the request should be processed asynchronously.
The Send () method can send the request to the server. If we assume that the HTML file and the ASP file are in the same directory, then the code is:
Xmlhttp.open ("GET", "time.asp", true);
Xmlhttp.send (NULL);

Now we have to decide when to execute the AJAX function. When a user types something in the User name text box, we make the function "behind the scenes"

Perform.


AJAX-server-side scripting
Now we're going to create a script that shows the current server time.
The ResponseText property stores the data returned from the server. Here, we want to pass the current time back. This is the code for "time.asp":

<%response.expires=-1response.write (Time)%>
Note: The Expires property sets the time (in minutes) that the page will be cached before the page cache expires. Response.expires=-1 indicates that the page will not be
Cache.
Run your AJAX application
Type some text in the text box below, and then click the Time text box:
User: Time:
The time text box can get the server's time from "time.asp" without loading the page!

This is the end of this article (want to see more on the Topic.alibabacloud.comAJAX User manual section of the study), there are questions can be in the message below the question.