Primitive JS completion of AJAX

Firstly , let us explain XMLHttpRequest open(), send(), readyState

1. open(method, url, async, user, password) : create request, initialize parameters for send()

method: 'POST' , 'GET' , 'HEAD' or 'post' , 'get' , 'head', case insensitive

if set method to 'POST', the size of data sended to server is limited to 4MB

if set method to 'GET', the size is limited to 256KB 

url: the request address, browser has the same origin security policy, so the script should has the same hostname and portname with the url

async: 'true' or 'false', 'true' means the request is asynchronous, default to true, 'false' means synchronous

user,

password: optional, which set the authentication of access url, if it is setted, it will override the default authentication owned by url 

2. send(body) : send request to server

if the method parameter in open() is set to 'POST' (which in from, sety <form  method='post'>)

We need set header for the request: xmlHttpReq.setRequestHeader('content-Type', 'application/x-www-form-urlencoded');

The request data can only be sent by send()

In server side, using Request.Form() to get the request form data

if the method parameter in open() is set to 'GET'

No need to set header for the request

The request data can be contained by url to be sent to server, or sent by send()

In server side, using Request.QueryString() to get the url address parameter or the request form data

3. readyState: the state of the request

The five possible values are 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, and 4 = complete

0(uninitialized): create XMLHttpRequest object, when successfully, the readyState = 0

1(loading): call open(url, method, sync), according to the parameters, initialize the XMLHttpRequest object; call send(), send request to server. readyState = 1 means the request is sending...

2(loaded):  send() completed, receive entire response, which is raw data that could not used directly. readyState = 2 means received entire response.

3(interactive): parsing the response, according to MIME Type contained by header in server response, parsing data to form of responseBody, responseText or responseXML. readyState = 3 means the response is parsing...

4(complete): The parse process is completed. Access data by XMLHttpRequest object attribute. readyState = 4 means the parse is done.

Then List some examples:

Exp1: Asnynchronous Style

var xmlHttpReq;

function startAjax() {

xmlHttpReq = window.ActiveXObject ? window.ActiveXObject : window.XMLHttpRequest;

if(!xmlHttpReq) {

alert("Create failed!")

}

var body = 'name=brittany&age=24';

xmlHttpReq.open('POST', 'test.php', true);

xmlHttpReq.onreadystatechange = function() {

if(xmlHttpReq.readyState == 4) {

if(xmlHttpReq.status == 200) {

//...

}

}

}

xmlHttpReq.setRequestHeader('Content-Type', 'applicaiton/x-www-form-urlencoded');

xmlHttpReq.send(body);

}

Exp2: Synchronous Style

var xmlHttpReq;

function startAjax() {

//...

var body = 'name=brittany&age=24';

xmlHttpReq.open('POST', 'test.php', false);

xmlHttpReq.setRequestHeader('Content-Type', 'applicaiton/x-www-form-urlencoded');

xmlHttpReq.send(body);

}

Exp3: Asnynchronous Get Style

var xmlHttpReq;

function startAjax() {

//...

var url = 'test.php' + '?name=' + 'brittany' + '?age=' + '24';

xmlHttpReq.open('GET', url, true);

xmlHttpReq.onreadystatechange = function() {

if(xmlHttpReq.readyState == 4) {

if(xmlHttpReq.status == 200) {

//...

}

}

}

xmlHttpReq.send(null);

}

or 

var xmlHttpReq;

function startAjax() {

//...

var body = 'name=brittany&age=24';

xmlHttpReq.open('GET', 'test.php', false);

xmlHttpReq.setRequestHeader('Content-Type', 'applicaiton/x-www-form-urlencoded');

xmlHttpReq.send(body);

}