Brief summary of AJAX service Request principle

At first I thought Ajax was a new language, and it was only after the touch that Ajax was the technology used to Exchange data and update Web applications for some Web pages.

The first time to see the AJAX request code, feel a face, the code unexpectedly to the background data request came, magical ah. But it was written that the next day, when it was written, it was discovered that the code was a heap that was never remembered.

Did not think of a good way, the old-fashioned, copied ten times, in fact, the money three times in the copy, directly behind the dictation out. This just smoothed the train of thought. Sort out the ideas and now share the ideas. It's a cliché to offer the code first.

/********** request Process ************/1, create request object Var xhr; if (window. XMLHttpRequest) {xhr = new XMLHttpRequest ();} else if (window. ActiveXObject) {var versionarr = ["Msxml2.xmlhttp", "Microsoft.XMLHTTP"]; for (var tempversion of Versionarr) {xhr = new Act Ivexobject[tempversion]; if (XHR) {break}}}else{     throw new Error ("Your browser version is too Low")}//2 Establish Connection Xhr.open ("GET", "url")//3 send request Xhr.send (NULL)// 4 Receive Response Xhr.onreadystatechange = function () {     if (xhr.readystate = = 4&& Xhr.status ==200) {var rootobj = Json.parse (Xhr.responsetext) ...............     } }

Come on, just finished reading the code, here is the first to throw away the code. Ratione materiae on the code, start with this thing, when you want to request to the background data, first you can think of what to do? Don't say create a request instance, step by step with normal = logic backwards. At this point you should be sure to send the request first. So here's the question, where do you send the request? This is the time to find a way to get something to send the request, but not. It is time to come up with a good skill that has been practiced--to build objects. There is no request for the instance, it is necessary to create a request instance, this is the first step, of course, with him can go down, but send the request is not casually let hair, like the phone, first you have to open the phone, you can go to dial chat, this is the second step, to open a connection, and then click Dial , send out the number you pressed, this is the third one, send the request, and then deal with the reply received.

Here's a step-by-step, simple analysis.

Create XMLHttpRequest Request object, AJAX programming is done through this object.
Because the major manufacturers browser to XMLHttpRequest object support is different, especially ie ... Compatibility Considerations for different browser versions are required here.
Most mainstream browsers are now able to support XMLHttpRequest objects
Use new XMLHttpRequest () directly as the request object;
The following is the classic IE6 support type new ActiveXObject ("Msxml2.xmlhttp");
Finally, IE6 the following support type new ActiveXObject ("Microsoft.XMLHTTP");

Of course, there are these stubborn elements that are not supported at all .... Throw a mistake directly to them.

Then it opens the link open (method,url,flag) parameter method:get or post parameter URL: The request server's Path parameter flag whether the asynchronous request, now generally is asynchronous, not set the words will default async.

Next is sending the request send (), here to send different requests according to the request method, if it is a GET request, the parameters inside the Send method write a null on the line. However, if it is a post-type request, the haunted with the parameter is requested. This parameter is to be sent to the Send method, and also to set the request header Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded") The request header is not the same as the type page that the actual request is set on, and only a simple example is written here.

The final step is to accept that the server response can be tested through a console or a warning box with four output messages, so there are several different object status codes:

0: Uninitialized complete, just create XMLHttpRequest object, not call open method
1: Initialization completed, request started, start calling open method, no Send method called
2: Request sent, which means that the Send method has been called
3: Start receiving the response from the server.
4: Reads the data returned after the receiving server responds. (End of response)

The onReadyStateChange event will be punished at 234. We use the time is generally only concerned about the fourth, to the fourth, only to start the data processing, of course, to fourth does not necessarily mean that it is done, but also to see the server response status; General status code return value 200 404 500,

200 is the normal response, there is a headache of 404, can not find the page to visit, the most frustrating is 500, the server collapsed ...

Here we can use the Status property of the Request object to view the server status code, and when we go to step fourth and the server status code is 200, we get to the beginning of the data request.

The first article, not familiar with the routine, there is a problem, I will be on-line to respond in a timely manner.

Brief summary of AJAX service Request principle