ajax请求过程

<div id="article_content" class="article_content tracking-ad" data-mod="popu_307" data-dsm="post"><p>原生态Ajax使用的步骤，最后告诉面试官，我们在工作中是使用<a target="_blank" href="http://lib.csdn.net/base/jquery" class="replace_word" title="jQuery知识库" style="font-family:Arial; font-size:14px; color:rgb(223,52,52); font-weight:bold">jQuery</a><span style="color:rgb(51,51,51); font-family:Arial; font-size:14px">来实现Ajax请求和处理的。在回答的时候尽量详尽，包括方法的参数的个数，顺序和作用，以免被面试官抓住不放。不给面试官提问的机会，那你的回答就牛逼了！</span></p><span style="color:rgb(51,51,51); font-family:Arial; font-size:14px"></span><p><span style="color:rgb(51,51,51); font-family:Arial; font-size:14px"><strong>Ajax是什么</strong></span></p><p style="color:rgb(51,51,51); font-family:Arial; font-size:14px">我理解Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程序的性能很有帮助。</p><p style="color:rgb(51,51,51); font-family:Arial; font-size:14px"><strong>Ajax的使用</strong></p><p style="color:rgb(51,51,51); font-family:Arial; font-size:14px"><strong></strong></p><pre style="font-family:SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace; font-size:13.6px; margin-top:0px; margin-bottom:0px; line-height:1.45; word-wrap:normal; padding:16px; overflow:auto; background-color:rgb(246,248,250); word-break:normal; color:rgb(36,41,46)">    (<span class="pl-c1" style="color:rgb(0,134,179)">1</span>)创建<span class="pl-s" style="color:rgb(24,54,145)"><span class="pl-pds" style="">`</span>XMLHttpRequest<span class="pl-pds" style="">`</span></span>对象,也就是创建一个异步调用对象.    (<span class="pl-c1" style="color:rgb(0,134,179)">2</span>)创建一个新的<span class="pl-s" style="color:rgb(24,54,145)"><span class="pl-pds" style="">`</span>HTTP<span class="pl-pds" style="">`</span></span>请求,并指定该<span class="pl-s" style="color:rgb(24,54,145)"><span class="pl-pds" style="">`</span>HTTP<span class="pl-pds" style="">`</span></span>请求的方法、<span class="pl-s" style="color:rgb(24,54,145)"><span class="pl-pds" style="">`</span>URL<span class="pl-pds" style="">`</span></span>及验证信息.    (<span class="pl-c1" style="color:rgb(0,134,179)">3</span>)设置响应<span class="pl-s" style="color:rgb(24,54,145)"><span class="pl-pds" style="">`</span>HTTP<span class="pl-pds" style="">`</span></span>请求状态变化的函数.    (<span class="pl-c1" style="color:rgb(0,134,179)">4</span>)发送<span class="pl-s" style="color:rgb(24,54,145)"><span class="pl-pds" style="">`</span>HTTP<span class="pl-pds" style="">`</span></span>请求.    (<span class="pl-c1" style="color:rgb(0,134,179)">5</span>)获取异步调用返回的数据.    (<span class="pl-c1" style="color:rgb(0,134,179)">6</span>)使用JavaScript和<span class="pl-c1" style="color:rgb(0,134,179)">DOM</span>实现局部刷新.    <span class="pl-k" style="color:rgb(167,29,93)">var</span> xmlHttp <span class="pl-k" style="color:rgb(167,29,93)">=</span> <span class="pl-k" style="color:rgb(167,29,93)">new</span> <span class="pl-en" style="color:rgb(121,93,163)">XMLHttpRequest</span>();    <span class="pl-smi" style="color:rgb(51,51,51)">xmlHttp</span>.<span class="pl-c1" style="color:rgb(0,134,179)">open</span>(<span class="pl-s" style="color:rgb(24,54,145)"><span class="pl-pds" style="">'</span>GET<span class="pl-pds" style="">'</span></span>,<span class="pl-s" style="color:rgb(24,54,145)"><span class="pl-pds" style="">'</span>demo.php<span class="pl-pds" style="">'</span></span>,<span class="pl-s" style="color:rgb(24,54,145)"><span class="pl-pds" style="">'</span>true<span class="pl-pds" style="">'</span></span>);    <span class="pl-smi" style="color:rgb(51,51,51)">xmlHttp</span>.<span class="pl-c1" style="color:rgb(0,134,179)">send</span>()    <span class="pl-smi" style="color:rgb(51,51,51)">xmlHttp</span>.<span class="pl-en" style="color:rgb(121,93,163)">onreadystatechange</span> <span class="pl-k" style="color:rgb(167,29,93)">=</span> <span class="pl-k" style="color:rgb(167,29,93)">function</span>(){        <span class="pl-k" style="color:rgb(167,29,93)">if</span>(<span class="pl-smi" style="color:rgb(51,51,51)">xmlHttp</span>.<span class="pl-c1" style="color:rgb(0,134,179)">readyState</span> <span class="pl-k" style="color:rgb(167,29,93)">===</span> <span class="pl-c1" style="color:rgb(0,134,179)">4</span> <span class="pl-k" style="color:rgb(167,29,93)">&</span> <span class="pl-smi" style="color:rgb(51,51,51)">xmlHttp</span>.<span class="pl-c1" style="color:rgb(0,134,179)">status</span> <span class="pl-k" style="color:rgb(167,29,93)">===</span> <span class="pl-c1" style="color:rgb(0,134,179)">200</span>){        }    }</pre><br><p></p><p style="color:rgb(51,51,51); font-family:Arial; font-size:14px">以下步骤，如果不能理解你死记硬背都要记下来，总比你答不出来要好吧！</p><p><span style="color:rgb(51,51,51); font-family:Arial; font-size:14px">1.创建Ajax核心对象XMLHttpRequest</span></p><p><span style="color:rgb(51,51,51); font-family:Arial; font-size:14px"></span></p><div class="dp-highlighter bg_javascript"><div class="bar"><div class="tools"><b>[javascript]</b> <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;" target="_blank">view plain</a><span data-mod="popu_168"> <a href="#" class="CopyToClipboard" title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;" target="_blank">copy</a><div style="position: absolute; left: 589px; top: 1266px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=18&height=18" wmode="transparent"></div></span><span data-mod="popu_169"> <a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;" target="_blank">print</a></span><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return false;" target="_blank">?</a></div></div><ol start="1" class="dp-c"><li class="alt"><span><span class="keyword">var</span><span> xmlhttp;  </span></span></li><li class=""><span><span class="keyword">if</span><span>(window.XMLHttpRequest){   </span></span></li><li class="alt"><span><span class="comment">//IE7+,Chrome,Firefox,Safari,Opera执行此代码 xmlhttp=new XMLHttpRequest;</span><span>  </span></span></li><li class=""><span>}<span class="keyword">else</span><span>{  </span></span></li><li class="alt"><span>   <span class="comment">//IE5,IE6执行该代码</span><span>  </span></span></li><li class=""><span>   xmlhttp=<span class="keyword">new</span><span> ActiveXObject(</span><span class="string">"Microsoft.XMLHTTP"</span><span>);  </span></span></li><li class="alt"><span>}  </span></li></ol></div><pre code_snippet_id="2464933" snippet_file_name="blog_20170629_1_172009" name="code" class="javascript" style="display: none;">var xmlhttp;if(window.XMLHttpRequest){ //IE7+,Chrome,Firefox,Safari,Opera执行此代码 xmlhttp=new XMLHttpRequest;}else{   //IE5,IE6执行该代码   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}</pre>2.<span style="color:rgb(51,51,51); font-family:Arial; font-size:14px">向服务器发送请求</span><p><span style="color:rgb(51,51,51); font-family:Arial; font-size:14px"><span style="color:rgb(51,51,51); font-family:Arial; font-size:14px"></span></span></p><div class="dp-highlighter bg_javascript"><div class="bar"><div class="tools"><b>[javascript]</b> <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;" target="_blank">view plain</a><span data-mod="popu_168"> <a href="#" class="CopyToClipboard" title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;" target="_blank">copy</a><div style="position: absolute; left: 589px; top: 1494px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_2" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&width=18&height=18" wmode="transparent"></div></span><span data-mod="popu_169"> <a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;" target="_blank">print</a></span><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return false;" target="_blank">?</a></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>xmlhttp.open(method,url,async);  </span></span></li><li class=""><span>xmlhttp.send();  </span></li></ol></div><pre code_snippet_id="2464933" snippet_file_name="blog_20170629_2_3584553" name="code" class="javascript" style="display: none;">xmlhttp.open(method,url,async);xmlhttp.send();</pre>示例如下：<div class="dp-highlighter bg_javascript"><div class="bar"><div class="tools"><b>[javascript]</b> <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;" target="_blank">view plain</a><span data-mod="popu_168"> <a href="#" class="CopyToClipboard" title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;" target="_blank">copy</a><div style="position: absolute; left: 589px; top: 1633px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_3" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_3" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=3&width=18&height=18" wmode="transparent"></div></span><span data-mod="popu_169"> <a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;" target="_blank">print</a></span><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return false;" target="_blank">?</a></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>xmlhttp.open(</span><span class="string">"GET"</span><span>,</span><span class="string">"http://www.runoob.com/try/ajax/demo_get.php"</span><span>,</span><span class="keyword">true</span><span>);  </span></span></li><li class=""><span>xmlhttp.send();  </span></li></ol></div><pre code_snippet_id="2464933" snippet_file_name="blog_20170629_3_62542" name="code" class="javascript" style="font-family: Arial; font-size: 14px; color: rgb(51, 51, 51); display: none;"> xmlhttp.open("GET","http://www.runoob.com/try/ajax/demo_get.php",true); xmlhttp.send();</pre><br><span style="font-family:Arial; font-size:14px"><strong>注意一：</strong><span style="color:rgb(51,51,255)">open 的参数要牢记，很多面试官爱问这样的细节</span></span><ul><li style="color:rgb(51,51,51); font-family:Arial; font-size:14px">method：请求的类型；GET 或 POST</li><li style="color:rgb(51,51,51); font-family:Arial; font-size:14px">url：文件在服务器上的位置，相对位置或绝对位置</li><li style="color:rgb(51,51,51); font-family:Arial; font-size:14px">async：true（异步）或 false（同步）</li><li><h3 style="margin:25px 0px 0px; padding:0px; border:0px">为什么使用 Async=true ？</h3><p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:21px">我们的实例在 open() 的第三个参数中使用了 "true"。</p><p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:21px">该参数规定请求是否异步处理。</p><p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:21px"><strong>True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。</strong></p><p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:21px"></p><p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:21px">onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下，防止代码停止的最安全的方法。</p><p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:21px">通过把该参数设置为 "false"，可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要，那么可以使用这个参数</p><p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:21px"></p><br></li></ul><p style="font-family:Arial; font-size:14px; color:rgb(51,51,51)"><strong>注意二：</strong>post请求不同于get请求</p><p style="font-family:Arial; font-size:14px"><span style="color:rgb(51,51,51)">send(string)方法post请求时才使用字符串参数，否则不用带参数。</span></p><p style="font-family:Arial; font-size:14px"><span style="color:rgb(51,51,51)"><span style="font-family:Arial; font-size:14px"><strong>注意三</strong>：</span><span style="font-family:Arial; font-size:14px"><span style="color:rgb(51,51,51); font-family:Arial; font-size:14px">post请求一定要设置请求头的格式内容</span></span><br></span></p><p></p><div class="dp-highlighter bg_javascript"><div class="bar"><div class="tools"><b>[javascript]</b> <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;" target="_blank">view plain</a><span data-mod="popu_168"> <a href="#" class="CopyToClipboard" title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;" target="_blank">copy</a><div style="position: absolute; left: 589px; top: 2334px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_4" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_4" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=4&width=18&height=18" wmode="transparent"></div></span><span data-mod="popu_169"> <a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;" target="_blank">print</a></span><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return false;" target="_blank">?</a></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>xmlhttp.open(</span><span class="string">"POST"</span><span>,</span><span class="string">"ajax_test.html"</span><span>,</span><span class="keyword">true</span><span>);  </span></span></li><li class=""><span>xmlhttp.setRequestHeader(<span class="string">"content-type"</span><span>,</span><span class="string">"application/x-www-form-urlencoded"</span><span>);  </span></span></li><li class="alt"><span>xmlhttp.send(<span class="string">"fname=Herry&lname=Ford"</span><span>);  </span></span></li></ol></div><pre code_snippet_id="2464933" snippet_file_name="blog_20170629_4_5776380" name="code" class="javascript" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; display: none;">xmlhttp.open("POST","ajax_test.html",true);xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Herry&lname=Ford");</pre><p>3.服务器响应处理</p><blockquote style="margin:0px 0px 0px 40px; border:none; padding:0px">responseText    获得字符串形式的响应数据。<p>responseXML   获得XML 形式的响应数据。</p><p>3.1 同步处理</p></blockquote><p></p><div class="dp-highlighter bg_javascript"><div class="bar"><div class="tools"><b>[javascript]</b> <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;" target="_blank">view plain</a><span data-mod="popu_168"> <a href="#" class="CopyToClipboard" title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;" target="_blank">copy</a><div style="position: absolute; left: 589px; top: 2594px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_5" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_5" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=5&width=18&height=18" wmode="transparent"></div></span><span data-mod="popu_169"> <a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;" target="_blank">print</a></span><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return false;" target="_blank">?</a></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>xmlhttp.open(</span><span class="string">"GET"</span><span>,</span><span class="string">"http://www.runoob.com/try/ajax/demo_get.php"</span><span>,</span><span class="keyword">false</span><span>);  </span></span></li><li class=""><span>xmlhttp.send();  </span></li><li class="alt"><span>document.getElementById(<span class="string">"mydiv"</span><span>).innerHTML=xmlhttp.responseText;  </span></span></li></ol></div><pre code_snippet_id="2464933" snippet_file_name="blog_20170629_5_5634676" name="code" class="javascript" style="display: none;">xmlhttp.open("GET","http://www.runoob.com/try/ajax/demo_get.php",false);xmlhttp.send();document.getElementById("mydiv").innerHTML=xmlhttp.responseText;</pre><span style="color:rgb(51,51,51); font-family:Arial; font-size:14px">直接在send()后面处理返回来的数据。</span><br><p>3.2 异步处理</p><p> 异步处理相对比较麻烦，要在请求状态改变事件中处理。</p><div class="dp-highlighter bg_javascript"><div class="bar"><div class="tools"><b>[javascript]</b> <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;" target="_blank">view plain</a><span data-mod="popu_168"> <a href="#" class="CopyToClipboard" title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;" target="_blank">copy</a><div style="position: absolute; left: 589px; top: 2819px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_6" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_6" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=6&width=18&height=18" wmode="transparent"></div></span><span data-mod="popu_169"> <a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;" target="_blank">print</a></span><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return false;" target="_blank">?</a></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>xmlhttp.onreadystatechange=</span><span class="keyword">function</span><span> () {</span><span class="comment">//接收到服务端响应时触发</span><span>  </span></span></li><li class=""><span>     <span class="keyword">if</span><span>(xmlhttp.readyState==4&&xmlhttp.status==200){  </span></span></li><li class="alt"><span>           document.getElementById(<span class="string">"mydiv"</span><span>).innerHTML=xmlhttp.responseText;  </span></span></li><li class=""><span>      }  </span></li><li class="alt"><span>}  </span></li></ol></div><pre code_snippet_id="2464933" snippet_file_name="blog_20170629_6_8524615" name="code" class="javascript" style="display: none;"> xmlhttp.onreadystatechange=function () {//接收到服务端响应时触发      if(xmlhttp.readyState==4&&xmlhttp.status==200){            document.getElementById("mydiv").innerHTML=xmlhttp.responseText;       } }</pre><p style="color:rgb(51,51,51); font-family:Arial; font-size:14px">一共有5中请求状态，从0 到 4 发生变化。</p><p style="color:rgb(51,51,51); font-family:Arial; font-size:14px">0: 请求未初始化</p><p style="color:rgb(51,51,51); font-family:Arial; font-size:14px">1: 服务器连接已建立</p><p style="color:rgb(51,51,51); font-family:Arial; font-size:14px">2: 请求已接收</p><p style="color:rgb(51,51,51); font-family:Arial; font-size:14px">3: 请求处理中</p><p style="color:rgb(51,51,51); font-family:Arial; font-size:14px">4: 请求已完成，且响应已就绪</p><p style="color:rgb(51,51,51); font-family:Arial; font-size:14px"><strong>xmlhttp.status：</strong>响应状态码。这个也是面试比较爱问的，这个必须知道4个以上，比较常见的有：</p><p style="color:rgb(51,51,51); font-family:Arial; font-size:14px">200: "OK"</p><p><span class="marked" style="border:0px; margin:0px; padding:0.2em">304</span>：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。<br></p><p style="color:rgb(51,51,51); font-family:Arial; font-size:14px">403   （禁止） 服务器拒绝请求。</p><p style="color:rgb(51,51,51); font-family:Arial; font-size:14px">404   （未找到） 服务器找不到请求的网页。</p><p style="color:rgb(51,51,51); font-family:Arial; font-size:14px">408  （请求超时） 服务器等候请求时发生超时。</p><p style="color:rgb(51,51,51); font-family:Arial; font-size:14px">500   （服务器内部错误）  服务器遇到错误，无法完成请求。</p><br><br><br><br><p><br></p>   </div>