zoukankan      html  css  js  c++  java
  • XMLHttpRequest的亲密接触(1)——简单讲解

    一年前看w3school里面的一个例子,记得让我头疼的要命。

    例子如下,转载于http://www.w3school.com.cn上面。

    1 <html>
    2  <head>
    3  <script type="text/javascript">
    4 var xmlhttp;
    5 function loadXMLDoc(url)
    6 {
    7 xmlhttp=null;
    8 if (window.XMLHttpRequest)
    9 {// code for IE7, Firefox, Opera, etc.
    10 xmlhttp=new XMLHttpRequest();
    11 }
    12 elseif (window.ActiveXObject)
    13 {// code for IE6, IE5
    14 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    15 }
    16 if (xmlhttp!=null)
    17 {
    18 xmlhttp.onreadystatechange=state_Change;
    19 xmlhttp.open("GET",url,true);
    20 xmlhttp.send(null);
    21 }
    22 else
    23 {
    24 alert("Your browser does not support XMLHTTP.");
    25 }
    26 }
    27
    28 function state_Change()
    29 {
    30 if (xmlhttp.readyState==4)
    31 {// 4 = "loaded"
    32 if (xmlhttp.status==200)
    33 {// 200 = "OK"
    34 document.getElementById('A1').innerHTML=xmlhttp.status;
    35 document.getElementById('A2').innerHTML=xmlhttp.statusText;
    36 document.getElementById('A3').innerHTML=xmlhttp.responseText;
    37 }
    38 else
    39 {
    40 alert("Problem retrieving XML data:"+ xmlhttp.statusText);
    41 }
    42 }
    43 }
    44 </script>
    45 </head>
    46
    47 <body>
    48 <h2>Using the HttpRequest Object</h2>
    49
    50 <p><b>Status:</b>
    51 <span id="A1"></span>
    52 </p>
    53
    54 <p><b>Status text:</b>
    55 <span id="A2"></span>
    56 </p>
    57
    58 <p><b>Response:</b>
    59 <br /><span id="A3"></span>
    60 </p>
    61
    62 <button onclick="loadXMLDoc('/example/xdom/note.xml')">Get XML</button>
    63
    64 </body>
    65 </html>

    显示结果是这样的如果看不懂就先放放,亲密接触(2)有详细示例,看完2再看这个例子就能看懂了。

    tip1:XMLHttpRequest对象的ReadyState属性值列表。

    ReadyState取值 描述
    0
    描述一种"未初始化"状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化。
    1
    描述一种"发送"状态;此时,代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
    2
    描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。
    3
    描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。
    4
    描述一种"已加载"状态;此时,响应已经被完全接收。

      

    status属性:这个status属性描述了HTTP状态代码,而且其类型为short。而且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
      

    responseText属性:这个responseText属性包含客户端接收到的HTTP响应的文本内 容。当readyState值为0、1或2时,responseText包含一个空字符串。当readyState值为3(正在接收)时,响应中包含客户 端还未完成的响应信息。当readyState为4(已加载)时,该responseText包含完整的响应信息。
      

    statusText属性:这个statusText属性描述了HTTP状态代码文本;并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

    这个就解决了我当时的疑问:为什么xmlhttp.readyState==4一定要是4呢,是1000不行么,这就告诉我,不行!。

    tip2:至于那个status==200,这里有个解释:Ajax中,XMLHttpRequest对象的status属性一般用来返回服务器的HTTP状态码。status为200表示“成功”,status为404代表“页面未找到”。

    xmlHttpRequest对象的status属性的取值长整形标准http状态码,定义如下


    tip3:Ajax里的onreadystatechange的作用

    发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态,XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能。这类似于回调函数的做法。 
    onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果,如: 
    ajaxObj=XMLHttpRequest(); 
    var url="/MyTodoes/FetchText?id="+id; 
    ajaxObj.open("Get",url,true); 
    ajaxObj.onreadyStateChange=changeTabCallBack; 
    ajaxObj.send(null); 


    onreadyStateChange事件是在readyState属性发生改变时触发的,readyState的值表示了当前请求的状态,在事件处理程序中可以根据这个值来进行不同的处理。 readyState有五种可取值0:尚未初始化,1:正在加载,2:加载完毕,3:正在处理;4:处理完毕。一旦readyState属性的值变成了4,就可以从服务器返回的响应数据进行访问了。 
    通常在事件中判断readyState的值是在请求完毕时才做处理,如: 
    function changeTabCallBack(){ 
    if(ajaxObj.readyState==4){ 
    // 下一步验证 


    Status存储了服务器端返回的Http请求响应代码,它表示请求的处理结果,常见响应代码的含义如右。 
    在Ajax开发中,最常用就是200这个响应码,代码如下: 
    function changeTabCallBack(){ 
    if(ajaxObj.readyState==4){ 
    if(ajaxObj.status==200){ 
    // 服务端返回了正确数据,开始响应处理 



    Http状态码 含义 
    200 请求成功 
    202 请求被接受但处理未完成 
    400 错误请求 
    404 请求资源未找到 
    500 内部服务器错误



  • 相关阅读:
    使用vue vantUi框架 根字体是37.5 和默认根字体75不一致,导致页面组件样式变小
    html2canvas ---- canvas里的width和style里面的width区别
    禁止浏览器记住密码操作
    微信小程序的学习和应用
    关于swiper的使用 安卓没有反应
    iconfont阿里云的使用
    Node.js与MongoDB的合作
    Hacker2
    SR选取公式
    树莓派设置静态ip2
  • 原文地址:https://www.cnblogs.com/zhuyuchen/p/2037597.html
Copyright © 2011-2022 走看看