---Basics of entering Ajax gates

AJAX refers to asynchronous JavaScript and XML (asynchronous JavaScript and XML).

The basics you should have

before continuing your study, you need to have a basic understanding of the following knowledge: html/xhtml JavaScript

AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML)

AJAX is not a new programming language, but a technology 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. With this object, your JavaScript can exchange data with the WEB server without overloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the WEB server, which allows a Web page to request a small amount of information from the server, rather than an entire page.

AJAX can make Internet applications smaller, faster, and friendlier.

AJAX is a browser technology that is independent of WEB server software.

AJAX based on WEB standards

AJAX is based on the following WEB standards: JavaScript XML HTML CSS

The WEB standards used in AJAX are 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 easier to develop.

However, Internet applications are not as sophisticated and friendly as traditional desktop applications.

With AJAX, Internet applications can become more sophisticated and friendlier.

AJAX uses 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 a server, you must use an HTML table to go through the server Gets or POST data. The user then needs to click the Submit button to send/Get information, wait for the server's response, and a new page will load the result.

Since the server returns a new page every time the user submits the input, the traditional Web application becomes slow and increasingly unfriendly.

By leveraging AJAX, your JavaScript communicates directly with the server via JavaScript's XMLHttpRequest object.

By using HTTP requests, a Web page can request a server and get a response from the server without loading the page. The user can stay on the same page and he or she will not notice that the script has requested the page in the background or sent the data to the server.

XMLHttpRequest Objects

by using the XMLHttpRequest object, Web developers can update the page from the server after the page has been loaded.

In 2005 AJAX was promoted by Google (Google suggest).

Google recommends using the XMLHttpRequest object to create a dynamic Web interface: When you start typing queries into Google's search box, JavaScript sends these words to a server, and the server returns a list of search suggestions.

The XMLHttpRequest object is 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 is filled with AJAX.

This HTML file is named "testajax.htm" (please note that this HTML form does not have a submit button.) ）：

 
We'll explain the fundamentals of AJAX in the next section.



The main point of AJAX is the XMLHttpRequest object.

There are differences in how different browsers create XMLHttpRequest objects.

IE browsers use ActiveXObject, while other browsers use JavaScript-built objects named XMLHttpRequest.

To create this object for a different browser, we use a "try and catch" statement.



Let's update our "testajax.htm" file with this section of JavaScript that creates the XMLHttpRequest object:

 
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 it fails, try the xmlhttp=new ActiveXObject ("msxml2.xmlhttp") for Internet Explorer 6.0+, and if it is unsuccessful, try XML for Internet Explorer 5.5+ Http=new ActiveXObject ("Microsoft.XMLHTTP").

If none of the three methods work, the browser used by the user is too outdated and he or she will see a hint that the browser does not support AJAX.

Note: These browsers have custom-crafted code that is very long and complex. However, whenever you want to create a XMLHttpRequest object, the code comes in handy, so you can paste the code at any time that you want to use. The above code is compatible with all major browsers: Internet Explorer, Opera, Firefox, and Safari.



Before sending data to the server, it is necessary to explain the three important properties of the XMLHttpRequest object. onReadyStateChange Property

The onReadyStateChange property contains functions that handle server responses. The following code defines an empty function that can be set on the onReadyStateChange property at the same time:

Xmlhttp.onreadystatechange=function ()
  {
  //We need to write some code here
  }
 
ReadyState Property 
The ReadyState property holds the status information for the server response. Every time readyState changes, the onreadystatechange function is executed.

This is the possible value of the ReadyState property:


  
 
 
   
 
    
 
     
State
 
     
Description
 
    
 
    
 
     
0
 
     
Request not initialized (before calling open ())
 
    
 
    
 
     
1
 
     
Request has been raised (before calling send ())
 
    
 
    
 
     
2
 
     
The request has been sent (it is usually possible to get content headers from the response)
 
    
 
    
 
     
3
 
     
In request processing (usually some of the data is available in the response, but the server has not yet completed the response)
 
    
 
    
 
     
4
 
     
The request has been completed (you can access the server response and use it)
 
    
 
   
 

  
 
We're going to add an if statement to this onreadystatechange function to test whether our response is complete (meaning we can get the data):

Xmlhttp.onreadystatechange=function ()
  {
  if (xmlhttp.readystate==4)
    {
    //data obtained from server response
    }
  }
 
ResponseText Property 
The data returned by the server can be retrieved by the ResponseText property.

In our code, we'll 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
    }
  }
 

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) used to send the request. The second parameter sets the URL of the server-side script. The third parameter provides 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 ASP file are in the same directory, then the code is like this:

Xmlhttp.open ("Get", "time.asp", true);
Xmlhttp.send (NULL);
 
Now we have to decide when to execute AJAX functions. When the user types something in the User name text box, the function "behind the scenes" is executed.

 
 
AJAX-server-side scripting

Now we want to create a script that displays the current server time.

The ResponseText property stores the data returned from the server. Here, we want to return the current time. This is the code for "time.asp":

<%
response.expires=-1
Response.Write (time)
%>
 
Note: The Expires property sets the time (in minutes) that the page will be cached before the page cache fails. Response.expires=-1 indicates that the page is not cached. running 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.