Asp. NET AJAX Series (iii)

We learned from the first two articles, have mastered the Ajax implementation method, but also can compare the pros and cons of two different ways. But we still don't know how the real AJAX implementation works, and what the most primitive, unpackaged Ajax is, and today we're going to explore these things that we didn't know before.

First in the previous article also mentioned that Ajax is asynchronous JavaScript and XML, then the smart you should have guessed that JS script is essential. Here we introduce a browser object: XMLHttpRequest, maybe everyone is unfamiliar with this object, then we begin to understand its properties. It has three properties: the onReadyStateChange property, the ReadyState property, and the ResponseText property, which we can roughly see from the name, the first property, which is onreadystatechange Is the function that handles the server response when the state changes, the second property is the state that holds the server response (such as the common ok,404 not found, and so on), and the third property is the information after the server responds.

After describing the three properties, we start to get to the point, and as with all the processes, we need to initialize the XMLHttpRequest object first, but due to browser problems, different browsers need to be initialized in different ways:

　　

<script type= "Text/javascript" >varXMLHTTP; functionCheckUser () {XMLHTTP=NULL; varName = document.getElementById ("txtID"). Value; if(window. XMLHttpRequest) {XMLHTTP=NewXMLHttpRequest (); }//this applies to Firefox, Google and the high-version IE browser            Else if(window. ActiveXObject) {XMLHTTP=NewActiveXObject ("Microsoft.XMLHTTP"); }//this applies to low-version ie, such as IE4,IE5, etc.Xmlhttp.open ("GET", "handler1.ashx?name=" + Name,true); Xmlhttp.onreadystatechange=function () {                if(Xmlhttp.readystate = = 4) {                    if(Xmlhttp.status = = 200) {document.getElementById ("Lblshow"). InnerHTML =Xmlhttp.responsetext; }}} xmlhttp.send (NULL); }        </script>

From the code we once again verified that Microsoft's "do not take the ordinary road," said a digression, did so long b/s, found compatibility is really a headache problem, especially IE, each version of compatibility is inconsistent, write JS when the miserable, recommended the use of jquery, its compatibility is not! Often! Good! After initializing the object, we started the journey of sending the request, and this time we are still submitting it to ashx and processing it. Xmlhttp.open ("GET", "handler1.ashx?name=" + name, true); There are 3 parameters in this code, the first parameter is used to specify a GET commit or a post commit, here you need to pay attention to uppercase, the second argument is the URL to commit, The third parameter specifies whether the pattern is asynchronous. Next we need to deal with the service side state changed function, first determine the status of the server response information: 0 for the request uninitialized (before calling open (), 1 for the request has been raised (call Send () before), 2 for the request has been sent (here can usually get the content header from the response), 3 is in request processing (the response typically has some of the data available, but the server has not yet completed the response), and 4 is the request completed (the server can be accessed and used to respond).

We know that the server is a busy person, it has to deal with a lot of things, if the interruption is not good, so we have to wait for its status of 4, in order to proceed to the next step, so, after 4 to determine whether the response is 200 (here is the HTTP protocol, no longer elaborated, interested can find the information), The response text for the server is then processed. OK, after the introduction of the principle, we start to run:

　　

Still input our dear peas ... From the first two databases we "already know" beans this nickname is there, so we did not guess the process, we have guessed the results, hey. Next we look at the server side:

　　

We found that we have successfully entered the breakpoint, indicating that our previous request has been successful! I also, because this method is more complex than the previous two, so I also tried several times, more excited. The commented out part is the method in the previous article, I remember Ajax with ashx use, it seems like a request will correspond to a ashx file (here is not sure, you are welcome to correct), the real dry is not commented out below the part, get the parameters passed in, and then to compare.

　　

Because we have "predicted" the results, it is expected that this is the case, but it also shows that the AJAX implementation of our approach has been successful, and then a graph that is not registered:

　　

OK, so here's the tutorial for today, Ajax is actually the principle, send the request-wait response-response completion-the subsequent processing, but it can be in the entire page without a postback in the case of processing alone, so it is favored by the people. Ajax series is over, do not know whether you have the harvest? If you have any questions or ideas, you can also put them in the comments section and discuss them together. Finally give everyone a suggestion, the implementation of the best use of the second jquery+ashx way to achieve, simple violent flow! Hope you like, thank you!