"JavaScript" Ajax Basics

What is Ajax

Ajax is "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), i.e. no flush data read.

HTTP request

The first thing you need to know about HTTP request methods (GET and POST).

Get is used to get data. GET is the delivery of data in the URL, which has low security and low capacity.

POST is used to upload data. POST security in general, almost unlimited capacity.

Ajax requests

An AJAX request is generally divided into 4 steps.

1. Creating Ajax Objects

There are compatibility issues when creating objects:

var New XMLHttpRequest ();   // For IE6 above var New // For IE6

Merge the above code:

var NULL ; if (window. XMLHttpRequest) {    new  XMLHttpRequest ();} Else {    new activexobject (' microsoft.xmlhttp ');}

2. Connect to the server

The open () method is used here. The open () method has three parameters, the first parameter is the join method that is GET and POST, the second parameter is the URL is the address of the data to be read, the third parameter is asynchronous, it is a Boolean value, True is asynchronous, false is synchronous.

true);

3. Send Request

Send () method.

Oajax.send ();

4. Receive return value

onReadyStateChange event. 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.

ReadyState: The request state, which returns an integer (0-4).

0 (uninitialized): The Open () method has not been called yet.

1 (load): The Send () method is called and the request is being sent.

2 (Loading complete): The Send () method completes and all responses have been received.

3 (parsing): The response content is being parsed.

4 (complete): Response content resolution is complete and can be called on the client.

Status: Request result, return 200 or 404.

Success.

404 = failed.

ResponseText: Returns the content, which is the data we need to read. It is important to note that ResponseText returns a string.

oajax.onreadystatechange=function() {    if(oajax.readystate==4) {          If(oajax.status==200) {            fnsucc (oajax.responsetext);        } Else {            if(fnfaild) {                fnfaild ();     }}}};

Encapsulate the above code:

functionAjax (URL, fnsucc, fnfaild) {//1. Create an Object    varOajax =NULL; if(window. XMLHttpRequest) {Oajax=NewXMLHttpRequest (); }Else{Oajax=NewActiveXObject ("Microsoft.XMLHTTP"); }          //2. Connect to the serverOajax.open (' GET ', url,true);//open (method, URL, whether asynchronous)          //3. Sending the requestOajax.send (); //4. Receive returnOajax.onreadystatechange =function(){//onreadystatechange Events        if(Oajax.readystate = = 4) {//4 for completion            if(Oajax.status = = 200) {//200 for Successfnsucc (oajax.responsetext)}Else{                if(fnfaild) {fnfaild (); }            }        }    };}

<! DOCTYPE html>When you click the button, read the Abc.txt<input id= "btn" type= "button" value= "read"/><br/> <div id= "Con" ></div></body>window.onload=function(){    varOBTN = document.getElementById (' btn ')); varOcon = document.getElementById (' con ')); Obtn.onclick=function() {Ajax (' Abc.txt ',function(str) {ocon.innerhtml=str;    }); }}</script>

Abc.txt content:

This is the content of the AJAX call 1. This is the content of the AJAX call 2. This is the content of the AJAX call 3.

Reference

"JavaScript" Ajax Basics