"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 oajax = new XMLHttpRequest ();   For IE6 above var oajax = new ActiveXObject (' microsoft.xmlhttp '); For IE6

Merge the above code:

var oajax = null;if (window. XMLHttpRequest) {    Oajax = new XMLHttpRequest ();} else{    oajax = 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.

Oajax.open (' GET ', url, 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:

function ajax (URL, fnsucc, fnfaild) {    //1. Create Object    var oajax = null;    if (window. XMLHttpRequest) {        Oajax = new XMLHttpRequest ();    } else{        oajax = new ActiveXObject ("Microsoft.XMLHTTP");    }          2. Connect      the server Oajax.open (' GET ', url, true);   Open (method, URL, whether asynchronous)          //3. Send Request      oajax.send ();          4. Receive return    Oajax.onreadystatechange = function () {  //onreadystatechange event        if (oajax.readystate = = 4) {  //4 to complete            if (oajax.status = =) {    //200 for Success                FNSUCC (oajax.responsetext)             }else{                if ( Fnfaild) {                    fnfaild ();}}}}    ;}

Finally, an example is attached:

<! DOCTYPE html>
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.
"JavaScript" Ajax Basics