JavaScript in a series of AJAX applications

One what is Ajax

Ajax is (asynchronous JavaScript and XML) is asynchronous JavaScript and XML. That is, asynchronous requests for newer technologies. Ajax is a new application of the existing technology, not a new language. It is written in JavaScript. The relationship to XML is that the XML file can be read and returned.

Ajax in 2005, in the rapid development of 2006,2007 years, many Web sites are now using AJAX technology, in recruiting software engineers, AJAX technology must be required to master. Ajax, the "Asynchronous JavaScript and XML" Ajax technology, contains several techniques: JavaScript, XML, CSS, Xstl, Dom, XHTML, and XMLHttpRequest Seven technologies, So Ajax is like an adhesive that integrates seven technologies to the advantage of each technology, and is incredibly powerful.

①ajax (asynchronouse JavaScript and XML) asynchronous JavaScript and XML

② is a synthesis of 7 technologies that contains seven techniques (JavaScript XML xstl XHTML dom XMLHttpRequest, CSS), and Ajax is a binder,

③ajax is a technology unrelated to the service-side language. That can be used on (Php/java ee/.net website/asp)

④ajax can return three formats of data (text format, XML, JSON format) to the client

⑤ No Refresh data exchange technology has the following: Flash, Java applet, framework, IFRAME, Ajax)

Description of objects and methods in two Ajax

The core object of Ajax is XMLHttpRequest.
XMLHttpRequest is used to exchange data with the server in the background. This means that you can update a part of a webpage without reloading the entire page.
(a) method

The Xmlhttprequst object interacts with the server using the Send () and open () methods. Open (Method,url,async) method: The type of the request; GET or PostURL: The location of the file on the server async:true (asynchronous) or False (synchronous) Send (String) string: only for POST If the request is a POST request, you must use setRequestHeader () to add the HTTP header. Then set the sent data in the Send () method:

Xmlhttp.open ("POST", "ajax_test.asp",true); Xmlhttp.setrequestheader ("Content-type", " Application/x-www-form-urlencoded "); Xmlhttp.send ("fname=bill&lname=gates");

(ii) Attributes
(1) readyState
0: Request not initialized
1: Server Connection established
2: Request received
3: In Request processing
4: The request is complete and the response is ready

(2) state

$: "OK"
404: Page Not Found
(3) ResponseText
Gets the response data in the form of a string.
(4) Responsexml
Get the response data in XML form.
(5) onReadyStateChange
The function (or function name) is called whenever the ReadyState property is changed.

Three: How Ajax works

Ajax performs operations through XMLHttpRequest objects, where the XMLHttpRequest object is an object built into the browser that works by creating a request agent that interacts with the server through a proxy. In the process of interaction, the customer does not need to wait, also can do other work, after the interaction is completed, the agent will return the results of the interaction to the customer page.

The first step: Create the XMLHttpRequest object, each browser is created not the same.

varif  (window. XMLHttpRequest)   {//    xmlhttp=new  XMLHttpRequest ();    Else    {//    xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP" );    

Usually for compatibility with all browsers, each must be written.
Step Two: Set the Open () method and the setRequestHeader () method parameters.
Set the request method, the request destination address, and the request type to the open method, and if it is a POST request, you need to set the setRequestHeader () parameter

Step three: Send execution
Use the Send method to perform a real interaction with the server
Fourth step: Get execution results
First, determine whether the execution is complete, and then return the returned responsetext to the page

xmlhttp.onreadystatechange=function()   {     //  if ( xmlhttp.readystate==4 && xmlhttp.status==200)     {     //        return  xmlhttp.responsetext;     }   

four synchronous and asynchronous

AJAX refers to asynchronous JavaScript and XML (asynchronous JavaScript and XML).
The async parameter of the open () method must be set to True if the XMLHttpRequest object is to be used with AJAX:

Xmlhttp.open ("GET", "ajax_test.html",true);

For Web developers, sending asynchronous requests is a huge step forward. Many tasks performed on the server are quite time consuming. This may cause the application to hang or stop before AJAX occurs.
Instead of waiting for a response from the server, Ajax,javascript does:

• Execute additional scripts while waiting for the server to respond
• Handle responses when they are ready

async=true

When using Async=true, specify the function to be executed when responding to the ready state in the onReadyStateChange event:
Instance

xmlhttp.onreadystatechange=function() {  if (xmlhttp.readystate==4 && xmlhttp.status==200) {      document.getElementById ("mydiv"). innerhtml=xmlhttp.responsetext;  }} Xmlhttp.open ("GET", "/try/ajax/ajax_info.txt",true); Xmlhttp.send ();

Async = False

To use Async=false, change the third parameter in the open () method to False:
Xmlhttp.open ("GET", "Test1.txt", false);
We do not recommend the use of Async=false, but for some small requests it is also possible.
Keep in mind that JavaScript waits until the server responds in readiness to continue. If the server is busy or slow, the application hangs or stops.
Note: When you use Async=false, do not write the onreadystatechange function-put the code behind the Send () statement:

Xmlhttp.open ("GET", "/try/ajax/ajax_info.txt",false), Xmlhttp.send ();d Ocument.getelementbyid (" Mydiv "). Innerhtml=xmlhttp.responsetext;

Five onreadystatechange Events

when a request is sent to the server, we need to perform some response-based tasks. The onreadystatechange event is triggered whenever the readyState changes. The ReadyState attribute holds state information for XMLHttpRequest. the following are three important properties of the XMLHttpRequest object:

In the onReadyStateChange event, we specify the tasks that are performed when the server responds to readiness to be processed.
When ReadyState equals 4 and the status is 200, the response is ready:

 xmlhttp.onreadystatechange= function   () { if  ( xmlhttp.readystate==4 && xmlhttp.status==200   document.getElementById (   "mydiv"). innerhtml=  xmlhttp.responsetext;    }}   

A callback function is a function that is passed to another function as an argument.
If you have multiple Ajax tasks on your site, you should write a standard function for creating XMLHttpRequest objects and call that function for each AJAX task.
The function call should contain the URL and the task that is performed when the onReadyStateChange event occurs (each call may be different):
Instance

function myFunction () {  loadxmldoc("/try/ajax/ajax_info.txt",function() {    if (xmlhttp.readystate==4 && xmlhttp.status==200) {      document.getElementById ("mydiv"). Innerhtml=Xmlhttp.responsetext;}}  );}

Reference: "Javasript Advanced Programming"

Http://www.cnblogs.com/aksir/p/6857342.html

JavaScript in a series of AJAX applications