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 insensitiveIf set method to ' POST ', the size of data sended to server was limited to 4MBIf set method to ' GET ', the size was limited to 256KB url:the request address, browser have the same origin security policy , so the script should have the same hostname and portname with the Urlasync: ' true ' or ' false ', ' true ' means the request I s asynchronous, default to True, ' false ' means synchronoususer,password:optional, which set the authentication of access URL, if it is setted, it would override the default authentication owned by URL
2. Send (body): Send request to ServerIf the method parameter in open () are 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 is sent by send ()In server side, using Request.Form () to get the Request Form dataif the method parameter in open () is set to ' get 'No need to set header for the requestThe request data can be contained by URL to being 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 requestThe five possible values is 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 and 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 Stylevar 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 Stylevar 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 Stylevar 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);}
Primitive JS completion of AJAX
