JavaScript Learning Note--ajax (i)

The basic techniques used by AJAX applications:

• HTML is used to establish WEB forms and to determine the fields used by other parts of the application.
• JavaScript code is the core code that runs Ajax applications, helping to improve communication with server applications.
• DHTML or dynamic HTML, which is used to dynamically update the form. We will use div , span and other dynamic HTML elements to tag the HTML.
• The Document Object Model DOM is used (through JavaScript code) to process the HTML structure and (in some cases) the XML returned by the server.

Request/Response in the Ajax world

The principle of Ajax is simply to send an asynchronous request to the server via the XMLHttpRequest object, get the data from the server, and then use JavaScript to manipulate the DOM and update the page. One of the most critical steps is getting the request data from the server. To understand this process and principle, we must have some knowledge of xmlhttprequest.

XMLHttpRequest is the core mechanism of Ajax, which was first introduced in IE5 and is a technique that supports asynchronous requests. Simply put, JavaScript can request and process responses to the server in a timely manner without blocking the user. Achieve a no-refresh effect.

So let's start with XMLHttpRequest and see how it works.

First, let's take a look at the properties of the XMLHttpRequest object.

Its properties are:

onReadyStateChange event handlers for events that are triggered by each state change.

ResponseText the string form of the data returned from the server process.

Responsexml a DOM-compatible document data object that is returned from the server process.

Status number codes returned from the server, such as common 404 (not Found) and 200 (ready)

Status Text string information accompanying the state code

ReadyState Object State Value

0 (uninitialized) object has been established but not initialized (the open method has not been called)

1 (Initialize) object has been established, the Send method has not been called

2 (send data) The Send method has been called, but the current state and HTTP headers are unknown

3 (data transfer) has received some of the data, because the response and HTTP header is not complete, then through Responsebody and ResponseText to obtain some of the data will be error,

4 (complete) The data is received, at which time the complete response data can be obtained by Responsexml and ResponseText

Now that we have introduced Ajax, we XMLHttpRequest have a basic understanding of the object and how to create it. If you read carefully, you may already know that you are dealing with a WEB application on a server that is JavaScript technology, rather than an HTML form that is submitted directly to that application.

What is missing? Exactly how to use it XMLHttpRequest . Because this code is very important, every ajax application you write is going to use it in some form, first look at the basic request/response model of Ajax.

Make a request

You already have a brand new XMLHttpRequest object, now let it do some work. First, you need a JavaScript method that the Web page can invoke (such as when the user enters text or selects an item from the menu). The next step is basically the same process in all Ajax applications:

1. Get the data you want from your Web form.
2. Establish the URL to connect to.
3. Open the connection to the server.
4. Sets the function to run after the server finishes.
5. Send the request.

functionAjax (URL, fnsucc, fnfaild) {//1. Creating an Ajax Object    varoajax=NULL; if(window. XMLHttpRequest) {Oajax=NewXMLHttpRequest (); }    Else{Oajax=NewActiveXObject ("Microsoft.XMLHTTP"); }        //2. Connect to the serverOajax.open (' GET ', url,true); //3. Sending the requestOajax.send (); //4. Return of the receiving serverOajax.onreadystatechange=function ()    {        if(oajax.readystate==4)//Completion object state value, 0-Uninitialized 1-loading 2-Finished loading 3-interactive 4-Done        {            //Status The numeric code returned from the server, such as a common 404 (not Found) and 200 successful (followed by the answer document for Get and post requests)            if(oajax.status==200)//Success{FNSUCC (oajax.responsetext);//the string form of the data returned from the server process.             }            Else            {                if(Fnfaild) fnfaild (oajax.status); }        }    };}

<!DOCTYPE HTML><HTML><HeadLang= "en"><MetaCharSet= "UTF-8"><title></title>    <Scriptsrc= "Ajax.js"></Script><Script>window.onload=function(){    varbtn=document.getElementById ("btn"); Btn.onclick=function(){        //Ajax (' Abc.txt ', function (data) {Ajax ('abc.txt?t='+NewDate (). GetTime (),function(data) {//? t= ' +new Date (). GetTime () block cachealert (data)}) }}</Script></Head><Body><ButtonID= "BTN">Read file</Button></Body></HTML>

JavaScript Learning Note--ajax (i)