Native Ajax Writing

<span id="Label3"></p><p><p>1. Create a XMLHttpRequest Object</p></p><p><p></p></p>JS Code <ol class="dp-c" start="1"> <li><li><span class="keyword">function Createxmlhttprequest () {</span></li></li> <li><li><span class="comment">//1. Creating a XMLHttpRequest object</span></li></li> <li><li><span class="comment">//this is the most complicated step in the use of Xmlhttpreuquest object five</span></li></li> <li><li><span class="comment">//need to write different code in different ways for IE and other types of browsers to build this object</span></li></li> <li><li><span class="keyword">var xmlhttprequest; </span></li></li> <li><li><span class="keyword">if (WINDOW. Xmlhttprequest) {</span></li></li> <li><li><span class="comment">//for FIREFOX,MOZILLAR,OPERA,SAFARI,IE7,IE8</span></li></li> <li><li>XMLHttpRequest = <span class="keyword">new XMLHttpRequest (); </span></li></li> <li><li><span class="comment">//fixed bug for some specific version of Mozillar browser</span></li></li> <li><li><span class="keyword">if (xmlhttprequest.overridemimetype) {</span></li></li> <li><li>Xmlhttprequest.overridemimetype (<span class="string">"text/xml"); </span></li></li> <li><li>}</li></li> <li><li>} <span class="keyword">Else <span class="keyword">if (window. Activexobject) {</span> </span></li></li> <li><li><span class="comment">//for ie6,ie5.5,ie5</span></li></li> <li><li><span class="comment">///two A control name that can be used to create a XMLHttpRequest object, saved in an array of JS</span></li></li> <li><li><span class="comment">//in front of newer version</span></li></li> <li><li><span class="keyword">var activexname = [ <span class="string">"MSXML2.     XMLHTTP ", <span class="string">" Microsoft.XMLHTTP "]; </span></span></span></li></li> <li><li>for <span class="keyword">( <span class="keyword">var i = 0; I < activexname.length; i++) {</span> </span></li></li> <li><li><span class="keyword">try {</span></li></li> <li><li><span class="comment">//remove A control name to create and terminate the loop if the creation succeeds</span></li></li> <li><li><span class="comment">//if creation fails, throw an exception back, then you can continue the loop and continue trying to create</span></li></li> <li><li>XMLHttpRequest = <span class="keyword">new ActiveXObject (activexname[i]); </span></li></li> <li><li><span class="keyword">if (xmlhttprequest) {</span></li></li> <li><li>break <span class="keyword">; </span></li></li> <li><li>}</li></li> <li><li>} <span class="keyword">catch (e) {</span></li></li> <li><li>}</li></li> <li><li>}</li></li> <li><li>}</li></li> <li><li><span class="keyword">return xmlhttprequest; </span></li></li> <li><li>}</li></li> </ol><p><p></p></p><p><p>2.get Request</p></p><p><p></p></p>JS Code <ol class="dp-c" start="1"> <li><li><span class="keyword">function Get () {</span></li></li> <li><li><span class="keyword">var req = createxmlhttprequest (); </span></li></li> <li><li><span class="keyword">if (req) {</span></li></li> <li><li>Req.open (<span class="string">"GET", <span class="string">"http://test.com/?keywords= phone", <span class="keyword">true); </span></span></span></li></li> <li><li>Req.onreadystatechange = <span class="keyword">function () {</span></li></li> <li><li><span class="keyword">if (req.readystate = = 4) {</span></li></li> <li><li><span class="keyword">if (req.status = =) {</span></li></li> <li><li>Alert (<span class="string">"success"); </span></li></li> <li><li>}<span class="keyword">else{</span></li></li> <li><li>Alert (<span class="string">"error"); </span></li></li> <li><li>}</li></li> <li><li>}</li></li> <li><li>}</li></li> <li><li>Req.send (<span class="keyword">null); </span></li></li> <li><li>}</li></li> <li><li>}</li></li> </ol><p><p></p></p><p><p>3.post Request</p></p><p><p></p></p>JS Code <ol class="dp-c" start="1"> <li><li><span class="keyword">function post () {</span></li></li> <li><li><span class="keyword">var req = createxmlhttprequest (); </span></li></li> <li><li><span class="keyword">if (req) {</span></li></li> <li><li>Req.open (<span class="string">"POST", <span class="string">"http://test.com/", <span class="keyword">true); </span></span></span></li></li> <li><li>Req.setrequestheader (<span class="string">"content-type",<span class="string">"application/x-www-form-urlencoded; charset=gbk; ");</span> </span></li></li> <li><li>Req.onreadystatechange = <span class="keyword">function () {</span></li></li> <li><li><span class="keyword">if (req.readystate = = 4) {</span></li></li> <li><li><span class="keyword">if (req.status = =) {</span></li></li> <li><li>Alert (<span class="string">"success"); </span></li></li> <li><li>}<span class="keyword">else{</span></li></li> <li><li>Alert (<span class="string">"error"); </span></li></li> <li><li>}</li></li> <li><li>}</li></li> <li><li>}</li></li> <li><li>Req.send (<span class="string">"keywords= Mobile phone"); </span></li></li> <li><li>}</li></li> <li><li>}</li></li> </ol><p><p>The POST request needs to set the request header</p></p><p><p></p></p><p><p>4. ReadyState and Status:</p></p><p><p>There are five states of readystate:</p></p><p><p>0 (uninitialized): The (xmlhttprequest) object has been created, but the open () method has not been called;<br>1 (load): The Open () method has been called, but the request has not been sent;<br>2 (loading complete): The request has been sent to completion;<br>3 (interactive): can receive the partial response data;<br>4 (completed): All data has been received and the connection has been Closed.<br>In this way, you should be able to understand the function of the readystate, and the status is actually a secondary state judgment, but the status is more the server side of the state Judgment. Regarding status, due to its state there are dozens of kinds of, I only list the usual several commonly used:<br>100--customer must continue to make a request<br>101--client requires server to convert HTTP protocol version on request<br>200--success<br>201--prompt to know the URL of the new file<br>300--requested resources can be obtained in multiple places<br>301--delete Request Data<br>404--no files, queries, or URLs found<br>500--server generates internal error</p></p><p><p>Transferred from: http://sjpsega.iteye.com/blog/1729350</p></p><p><p>Native Ajax Writing</p></p></span>