Beginning Ajax with ASP.NET- P8

Beginning Ajax with ASP.NET- P8:Thank you for purchasing Beginning Ajax with ASP.NET. We know that you have a lot of options whenselecting a programming book and are glad that you have chosen ours. We’re sure you will be pleasedwith the relevant content and high quality you have come to expect from the Wrox Press line of books.
Nội dung trích xuất từ tài liệu:
Beginning Ajax with ASP.NET- P8 The XMLHttpRequest Object while the user is still manipulating the information within the browser. This represents the heart of Ajax and is the core advantage that it represents within traditional browser applications. A user can continue to work within the browser application uninterrupted, while in the background a request is sent and a response that contains the result of some server-side processing is received.Synchronous Requests Take a look at a following simple code example of a synchronous operation and then take a look at the explanation of exactly what is occurring that follows. Note: The code for the inclusion of the script include file mentioned previously has been omitted for brevity.Try It Out A Synchronous Operation function MakeXMLHTTPCall() { var xmlHttpObj; xmlHttpObj = CreateXmlHttpRequestObject(); if (xmlHttpObj) { xmlHttpObj.open(“GET”,”http://” + location.host + “/XmlHttpExample1/DataFile.xml”, false); xmlHttpObj.send(null); alert(“Request/Response Complete.”); } }How It Works The preceding code sample is very simple, however it does show the basic usage of the XMLHTTP object. If you examine the code in detail, you’ll see the following: 1. First you create a new XMLHTTP object and assign it to a variable. 2. After checking if the object is not null, that is, that the object creation in Step 1 was successful, you execute the open method passing in three parameters: xmlHttpObj.open(“GET”,”http://” + location.host + “/XmlHttpExample1/DataFile.xml”, false); ❑ The first parameter, “GET”, is the type of request to make (this can be any of the stan- dard HTTP verbs “GET”, “POST”, “PUT”, or “HEAD”) ❑ The second parameter is the server address, or endpoint, to make the request to. In this case, it’s an XML file located at http://localhost/XmlHttpExample1DataFile.xml. ❑ The third parameter, false, indicates whether a synchronous or asynchronous request should take place. In this case, false indicates that a synchronous request should occur. 3. The send method is executed on the XMLHTTP object instance to perform the actual request. xmlHttpObj.send(null); 81Chapter 4 4. Since you specified that a synchronous operation should occur, the next alert statement to dis- play a message box is not shown until the request has completed executing and returns from the server. alert(“Request/Response Complete.”); As already mentioned, the previous example shows a synchronous operation that offers no real change from the standard request/response paradigm that is prevalent in web applications. A request is issued, the user waits until a response is received, and the user can continue. Now, we can change this to be asynchronous.Asynchronous Requests Examine the code that follows, which performs exactly the same operation as the previous example, but operates in an asynchronous manner. Note: The code for the inclusion of the script include file men- tioned previously has been omitted for brevity.Try It Out An Asynchronous Operation function MakeXMLHTTPCall() { var xmlHttpObj; xmlHttpObj = CreateXmlHttpRequestObject(); if (xmlHttpObj) { xmlHttpObj.open(“GET”,”http:// “ + location.host + “/XmlHttpExample1/DataFile.xml”, true); xmlHttpObj.onreadystatechange = function() { if ( xmlHttpObj.readyState == READYSTATE_COMPLETE ) { alert(“Request/Response Complete”); } } xmlHttpObj.send(null); } }How It Works There are two main differences in this example as compared to the initial synchronous example: xmlHttpObj.open(“GET”,”http://” + location.host + “/XmlHttpExample1/DataFile.xml”, true); The first difference is the use of the true parameter as the last argument to the open method to indicate that the request should be executed in an asynchronous manner.82 The XMLHttpRequest ObjectThe second difference is the use of the onreadystatechange event and the readyState propertyvalue. The code: xmlHttpObj.onreadystatechange = function()assigns a function or event handler to the onreadystatechange event. When the state of the objectchanges, this event is triggered and the function is executed. The code: if ( xmlHttpObj.readyState == READYSTATE_COMPLETE )checks the state of the object to determine if any action should be taken. The ready state of theXMLHttpRequest object actually contains a numeric value representing its state. The numeric valuebeing checked for in the preceding example is a value of 4, which is represented by the variableREADYSTATE_COMPLETE. The valid list of XMLHttpRequest ready states is listed in the following table: Value Description 0 Uninitialized 1 Loading 2 Loaded 3 Interactive 4 CompleteA convenient place to put the values of the XMLHttpRequest ready states is in the library that wasdefined earlier to house the ...