Introduction and Application of XMLHTTPRequest object principles

 

Transferred from: bytes

I supported EKP a while ago and found that JQuery has been used in front-end development in Xiao Jiang's code. So I thought that every developer could master JQuery in MAP3.0, this will improve the development efficiency and quality. Why have I never used it? Speaking of this, there is a problem. prototype is very popular and early js development libraries are not mastered by every developer, so there will be some problems, the code you write cannot be understood by others. If you modify it, it will cause some pain and confusion to other colleagues and project developers. In a long-term environment, most developers are used to the "copy-paste-modify" work habit. Like me, I am used to this development method now, and it seems that there is no problem, this kind of consciousness will continue to deepen in the long-term accumulation, coupled with the pressure of normal progress, has not taken the initiative to accept new things, therefore, we hope that the quality and performance reform of the company will blow off our developers, including me, therefore, my learning plan for this year is to try my best to pick up what I learned and share some of it with you. I would like to share with you the strength of jQuery and its efficient development. But jquery has been around for the past few days. After a while, I will think about how to introduce it to you. If you just want to use common methods, attribute columns may be a bit boring, so you need to use a simple and easy-to-understand method. Since jquery is not introduced, why do you still write this ?? Because I think of jquery, I think of Ajax, I think of ajax, I think of Guo Hao, and then I think of the openXMLHTTP method in our code, and finally I think of the first section: because we are used to the copy mode, we may not be able to learn and understand some of the principles, so let's first introduce the XMLHTTPRequest object to everyone, because it is the basis of Ajax applications, there is a nice name in jquery: ajax engine!     XMLHTTPRequest was first introduced by Microsoft IE5 as an ActiveXObecjt object. The purpose of introducing this object is to send an asynchronous request to the server. However, this object is only useful until the emergence of Ajax technology, other browser vendors also recognize the importance of this object and introduce it in succession, but not as an ActiveXObject object, but as a standard browser object. Now IE7, IE8 Microsoft has fixed introducing it as a standard browser object, and W3C organizations may also need to standardize it. So our Code may not be written in the future. Var xmlhttp = new ActiveXObject ("Miscrosoft. XMLHTTP"); var xmlhttp = new XMLHTTPRequest (); so what is XMLHTTPRequest and how can it be used? If you understand the http protocol, it is easy to understand. Currently, all web applications are based on the http protocol, which sets the standards that the request and response parties should comply, communication can be achieved if this standard is met. For example, we can create a form and submit the information to the server, waiting for the server to process it, the essence of this process is that the browser formats the information in our request, including the form, into a standard http request header and request body, and then transmits it to the server. we generally do this, in essence, XMLHTTPRequest can also do this, format the request, send the request, and return the server response content. This is exactly the essence of ajax applications: taking only the data that the client cares about, instead of sending the whole page back, achieving the effect of no refresh! So how does XMLHTTPRequest work? The following describes the methods and attributes of the XMLHTTPRequest object and shows you how it works.   Scenario: I want to ask someone to help me ask Li Si: Does Wang Wu go home? Step 1: var xmlhttp = new XMLHTTPRequest (); // instantiate an XMLHTTPRequest object Analogy: Ask Michael to help me with this, but now Michael only knows how to help me.   Step 2: xmlhttp. onreadystatechane = callback; // register the callback function Analogy: James has a cell phone to tell the progress.   Step 3: xmlhttp. open ("get/post", URL, isAsyn, username, password) five parameters. Get/post: which method is used to request the URL, synchronous or Synchronous Step (true asynchronous, default value), username verified by username, password corresponding to the password, the last two parameters are optional, default value is omitted for the third parameter. // Initialize the http request and prepare to send the request Analogy: I now tell Michael (xmlhttp) to ask Mr. Li (URL ). In the get direction, is the url directly? Question = Wang Wu is not home yet, Using post, I wrote "question = Wang Wu is not going home" to the paper and told Li Si that what you want to ask is the question on the paper. How to Choose synchronization means that I have to wait until James comes back to do other things. If I choose exceptions, I will do my own things, let me know the result when John comes back. The following two parameters: If Li Si does not trust that Michael Jacob was sent by me, he will ask Michael to provide a "Hidden number". Otherwise, he will refuse to answer the question! Michael Jacob is ready and ready to go!   Step 4: xmlhttp. send (null); if you use post to write xmlhttp. send (data) Scenario: James go! John has set out.   Scenario 5: function callback () { If (xmlhttp. state = 4 & xmlhttp. status = 200) Alert (xmlhttp. responseText); // the result of the question } Scenario: Li Si's answer is received! However, in scenario 5, why are there judgments, 4 Code, 200 code, and so on? Because there are other States when Michael does this, john asked her if she was back with Michael on the way back. When John comes back, the 4-code data is received. 200 what is the code, because there are other situations, such as the failure of Michael Jacob to find the Error 404. John finds Li Si, and Li Si cannot make it clear (unable to handle). Although Li Si is ill, he cannot speak (the server cannot respond to the request correctly), So Li Si, Code 200, has no other situation, yes. So you need to add a judgment!   I should have understood this. The following describes the methods, attributes, and events! Method: The abort method ignores the xmlhttp object and returns to the uninitialized status. This also means that the request is terminated. Open method, initialize the request. Send request. SetRequestHead sets the request header. For example, the request encoding format is like telling Li sizhang that the English language is not understood in Chinese. GetResponseHead obtains the specified response header. GetAllResponseHead obtains all the response headers. Attribute: The readystate State describes the status of Michael Jacob, which has five values starting from 0. 0 Zhang San does not know what to do. 1. I know what to do. I haven't done it yet. 2 has gone to 3 and has not arrived yet. 4. Status stores the response status code. StatusText provides a brief description of the response status code. ResponseText stores the response text in text format. ResponseXML stores the response's XML document mode object. If the returned text value is null. Onreadystatechange registers the callback handler. Event: Onreadystatechange is triggered when the state status changes, that is, the registered callback function is called for processing!