Getting started with Ajax

ArticleDirectory

• Onreadystatechange attribute
• Readystate attributes
• Responsetext attributes

1.

Ajax = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML)

Ajax is not a newProgramming LanguageIs used to create better, faster, and more interactive web applications.Program.

Through Ajax, your javascript can use the XMLHTTPRequest object of JavaScript to directly communicate with the server. With this object, your javascript can exchange data with the Web server without reloading the page.

Ajax uses asynchronous data transmission (HTTP request) between the browser and the web server, so that the webpage can request a small amount of information from the server, rather than the whole page.
2.

Ajax uses HTTP requests

In traditional JavaScript programming, if you want to obtain any information from files or databases on the server, or send information to the server, you must use an HTML form to get or post data to the server. The user needs to click the "Submit" button to send/obtain information, wait for the server to respond, and then a new page will load the results.

Since the server returns a new page after the user submits the input, traditional Web applications become slow and unfriendly.

By using Ajax, your JavaScript willXMLHttpRequestObject to directly communicate with the server.

By using HTTP requests, web pages can send requests to the server and receive responses from the server without loading the page. The user can stay on the same page. He or she does not notice that the script has requested the page in the background or sent data to the server.

3.

Ajax-browser support

The main point of AJAX is the XMLHTTPRequest object.

Different browsers use different methods to create XMLHttpRequest objects.

Use the IE browserActivexobjectWhile other browsers useXMLHttpRequestJavascript built-in objects.

Use XMLHTTP = new XMLHttpRequest () to create this object. This statement is applicable to Firefox, opera, and Safari browsers. If it fails, try XMLHTTP = new activexobject ("msxml2.xmlhttp") for Internet Explorer 6.0 +. If it fails, then try XMLHTTP = new activexobject ("Microsoft. XMLHTTP ").

If these three methods do not work, the browser used by the user is too outdated. He or she will see a prompt stating that the browser does not support Ajax.

4. Ajax-XMLHTTPRequest object
Ajax-learn more about XMLHttpRequest objects

Before sending data to the server, it is necessary to explain the three important attributes of the XMLHTTPRequest object.

Onreadystatechange attribute

The onreadystatechange attribute contains functions for processing server responses. The followingCodeDefine an empty function and set the onreadystatechange attribute at the same time:

 
XMLHTTP. onreadystatechange = function (){// We need to write some code here}
 

Readystate attributes

The readystate attribute contains the status information of the server response. When the readystate changes, the onreadystatechange function is executed.

This is the possible value of the readystate attribute:

Status	Description
0	Request not initialized (before calling open)
1	Request Submitted (before sending () is called)
2	The request has been sent (here we can usually get the Content Header from the response)
3	Request Processing (some data is usually available in the response, but the server has not completed the response)
4	The request has been completed (you can access the server response and use it)

We need to add an if statement to this onreadystatechange function to test whether our response has been completed (meaning data can be obtained ):

XMLHTTP. onreadystatechange = function () {If (XMLHTTP. readystate = 4) {// Obtain data from the server's response }}
 

Responsetext attributes

You can use the responsetext attribute to retrieve the data returned by the server.

In our code, we will set the value of the time text box to be equal to responsetext:

 
XMLHTTP. onreadystatechange = function () {If (XMLHTTP. readystate = 4) {document. myform. Time. value =XMLHTTP. responsetext;}}
 

5. A complete example

Ajax HTML page

This is an HTML page. It contains a simple HTML form and a link to JavaScript.

 
<HTML> Id = "txt1" onkeyup = "showhint (this. Value )"/> </Form> <p> suggestions: <SpanId = "txthint"> </Span> </P> </body>  
 
The javascript code is listed below.
 
Ajax Javascript
This is JavaScript code, stored in the file "clienthint. js:
 

 
VaR XMLHTTPFunction showhint (STR){If (Str. length = 0) {document. getelementbyid ("txthint "). innerhtml = ""; return;} XMLHTTP = getxmlhttpobject () if (XMLHTTP = NULL) {alert ("your browser does not support Ajax! "); Return;} var url =" gethint. asp "; url = URL + "? Q = "+ STR; url = URL +" & SID = "+ math. random (); XMLHTTP. onreadystatechange = statechanged; XMLHTTP. open ("get", URL, true); XMLHTTP. send (null);} function statechanged () {If (XMLHTTP. readystate = 4) {document. getelementbyid ("txthint "). innerhtml = XMLHTTP. responsetext ;}}Function getxmlhttpobject (){Var XMLHTTP = NULL; try {// Firefox, opera 8.0 +, SafariXMLHTTP = new XMLHttpRequest ();} catch (e ){// Internet ExplorerTry {XMLHTTP = new activexobject ("msxml2.xmlhttp");} catch (e) {XMLHTTP = new activexobject ("Microsoft. XMLHTTP");} return XMLHTTP ;}
 
Ajax Server Page-Asp and PHP
 
There is actually no "Ajax server ". Ajax pages can be provided by any Internet server.
 

In the previous example, the server page called by JavaScript is a simple ASP file named "gethint. asp.
 

 
Below we list the Server Page code instances, written using ASP.
 
Ajax ASP instance
 
The Code on the "gethint. asp" page is written for IIS using VBScript. It checks an array of names and returns the corresponding names to the client:
 

 <% response. expires =-1dim A (30)  'assign a value to the array by name  A (1) = "Anna" A (2) = "Brittany" A (3) = "Cinderella" A (4) = "Diana" A (5) = "Eva" A (6) = "Fiona" A (7) = "Gunda" A (8) = "hege" A (9) = "Inga" A (10) = "Johanna" A (11) = "kitty" A (12) = "Linda" A (13) = "Nina" A (14) = "Ophelia" A (15) = "Petunia" A (16) = "Amanda" A (17) = "Raquel" A (18) = "Cindy" A (19) = "Doris" A (20) = "Eve" A (21) = "Evita" A (22) = "sunniva" A (23) = "Tove" A (24) = "unni" A (25) = "Violet" A (26) = "Liza" A (27) = "Elizabeth" A (28) = "Ellen" A (29) = "wenche" A (30) = "Vicky"  'obtain the parameter q from the URL  q = ucase (request. querystring ("Q")  'If the length of Q is greater than 0, query all hint  If Len (q)> 0 thenhint = "" for I = 1 to 30if q = ucase (mid (a (I), 1, Len (q ))) thenif hint = "" thenhint = a (I) elsehint = hint & "," & A (I) End ifend ifnextend If  'If the hint cannot be found, output "no suggestion"   'or output the correct value  If hint = "" thenresponse. write ("no suggestion") elseresponse. write (hint) end if %>