AJAX native study notes

AJAX is the abbreviation of Asynchronous JavaScript and XML, the literal translation is asynchronous js and XML.

What it means:
Exchange data with the server and update parts of a web page without reloading the entire page.

Knowledge point:
The XMLHttpRequest object is the basis of AJAX.
Modern browsers support the XMLHttpRequest object (IE5 and IE6 use ActiveXObject).

Native usage flow:
1. Create an XHR object

var xhr = new XMLHttpResquet();

2. XHR sends a request to the server

xhr.open("get",url,async);
xhr.send(string);

eg:

    xhr.open("POST",'http://localhost:8080/getName',true);
    xhr.send();

a. Set the send header

setRequestHeader(header,value)

eg:

// 设置POST请求的请求头  
xmlrequest.setRequestHeader("Content-Type"  
        , "application/x-www-form-urlencoded"); 

b. Add parameter
GET:

    xhr.open("GET",'http://localhost:8080/getName?id=001&area=0536',true);
    xhr.send();

POST:

    xhr.open("POST",'http://localhost:8080/getName,true);
    xhr.send("id=001&area=0536");

3. Server response

Get data:
through the responseText or responseXML properties of the XMLHttpRequest object.

Events:
When readyState changes, the onreadystatechange event is fired.

readyState:
0: Request not initialized
1: Server connection established
2: Request received
3: Request processing
4: Request completed and response ready

status:
200: "OK"
404: Page not found
More status codes: https://baike.baidu.com/item/HTTP%E7%8A%B6%E6%80%81%E7%A0%81/5053660 ?fr=aladdin

* When readyState is equal to 4 and the state is 200, it means the response is ready:
eg:

xhr.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        console.log('result:'+xmlhttp.responseText);
    }
}

P.S.
The jQuery way:

    type : "POST",
    url : REQUEST_BASE_PATH + "/LoginController/login",
    data : {
        "name":'ch'
        "pwd":'123'
    },
    dataType : "json",
    success : function(data) {
        console.log('data:回调成功数据');
    },
    error : function(data) {}
});

EXT way:

Ext.Ajax.request({
     url: 'ajax_demo/sample.json',

     success: function(response, opts) {
         var obj = Ext.decode(response.responseText);
         console.dir(obj);
     },

     failure: function(response, opts) {
         console.log("server-side failure with status code" + response.status);
     }
 });