zoukankan      html  css  js  c++  java
  • Javascript Ajax请求

    创建xmlhttprequest对象之后没有调用open之前readystate值为0,调用open()之后就变为1了,并且此时onreadystatechange函数与open()几乎是同时执行的。在之后调用send方法之后,在startHttpRequest函数中readystate值仍为1,而调用send方法之后应该有2,3,4三个状态,而只有在startHttpRequest函数用alert语句才可以观察到3个值!这是为什么呢?这是因为在startHttpRequest函数中当解析到send这一句时,并没有真正开始执行send执行。只有send执行,才可以在onreadystatechange函数观察到状态值的变化。readystate不是发送的状态,它是准备发送的状态,要把它想像成“人间大炮一级准备、二级准备、放”这样的口号,不是请求发送本身。同时xmlhttp也不是监听服务器信息,它是在send的时候获取服务器返回的状态信息而已,只有一次,监听则是一直在观察状态。至此,心中的疑惑全部解开!

    关于readystate五个状态总结如下:

    readyState 状态    状态说明 (0)未初始化 此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在,否则浏览器会报错--对象不存在。 (1)载入 此阶段对XMLHttpRequest对象进行初始化,即调用open()方法,根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。 (2)载入完成 此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。 (3)交互 此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式,为在客户端调用作好准备。状态3表示正在解析数据。 (4)完成 此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为4表示数据解析完毕,可以通过XMLHttpRequest对象的相应属性取得数据。 概而括之,整个XMLHttpRequest对象的生命周期应该包含如下阶段: 创建-初始化请求-发送请求-接收数据-解析数据-完成

    兼容模式:

     var xmlHttp://声明一个对象

     function creatXMLHttpRequest(){

          if(window.ActiveXobject){

    }else{//非IE采用的方式……}

     }

    请求的格式:   xmlHttp.open(请求方式,请求地址,[是否为异步请求]);  

    xmlHttp.send();  

    Get请求: xmlHttp.open("GET","ajax.do?name=tom",true); xmlHttp.send(); 注: get请求的传值方式为请求地址后面跟  ?key=value  

    Post请求: xmlHttp.open("POST","ajax.do",true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send("name=tom");  注: post请求的传值方式是在send()方法中进行传值,多个值用逗号隔开:name=tom,age=12 setRequestHeader的意思是设置请求头的类型为表单类型:Content-Type="application/x-www-form-             urlencoded" 

    是form表单的默认属性    

    一个完整的AJAX请求的流程:  

    1,创建XMLHttpRequest对象  

    2,调用xmlHttp.open()设置请求内容

      3,设置回调函数(根据服务器返回的状态信息,做什么事情)  

    4,调用xmlHttp.send()发送请求

    function sendAjax(){   

      createXMLHttpRequest();//调用上面设置的兼容模式  

       xmlHttp.open("GET","ajax.do?name=tom",true);   

      xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   

      xmlHttp.onreadystatechange=callback;//状态信息发生改变调用函数  

       xmlHttp.send();

    }

    //回调函数 function callback(){  

       alert("callback");

    }

    sendAjax();//浏览器会弹出几次框(不同的浏览器可能不同)  

    获取AJAX请求的状态码和HTTP协议的状态码:  

    AJAX请求的状态码有四个值:   var xmlState=xmlHttp.readyState;  

    1,已初始化   2,数据传输中   3,响应数据传输中   4,响应完毕 HTTP协议的状态码有很多:

      var httpState=xmlHttp.status; 常见的状态码如下: 状态码   

    意义    服务器正确处理了请求并响应    请求的页面未找到    没有权限访问请求的页面    页面不接收该请求方式    请求超时    服务器处理请求时发生异常    服务暂时不可用    网页未修改   使用Servlet获取服务器端的文本: //ajax.do //这是Servlet类中的doGet方法

    public void doGet(HttpServletRequest request,HttpServletResponse response){     P

    rintWriter out=response.getWriter();   

      out.print("OK");    

    out.flush();  

       out.close();

    }  

    //callback function callback(){    

    if(xmlHttp.readyState==4){//响应完毕后      

       if(xmlHttp.status==200){//http状态码为200时

                var result=xmlHttp.responseText;//获取ajax请求的文本内容     

            alert(result);       

      }    

    } }  

    总结: Ajax请求使用 XMLHttpRequest 对象 IE和非IE获取对象的方式不同 GET,POST请求的传值问题 Ajax请求的流程 Ajax请求的状态码和HTTP协议中服务器返回的状态码 获取简单地服务器返回的文本信息

  • 相关阅读:
    2021NUAA暑假集训 Day3 题解
    2021NUAA暑假集训 Day2 题解
    2021NUAA暑期模拟赛部分题解
    CodeForces 1038D Slime
    UVA 11149 Power of Matrix
    UVA 10655 Contemplation! Algebra
    UVA 10689 Yet another Number Sequence
    HDU 4549 M斐波那契数列
    HDU 4990 Reading comprehension
    CodeForces 450B Jzzhu and Sequences
  • 原文地址:https://www.cnblogs.com/wxs121/p/6768058.html
Copyright © 2011-2022 走看看