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);
}