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协议中服务器返回的状态码 获取简单地服务器返回的文本信息

  • 相关阅读:
    javascript 基础知识-1
    AngularJs-指令和指令之间的交互(动感超人)
    AngularJs-指令和控制器交互
    奇点大学公开课之尼葛洛庞帝讲述物联网和智能设备
    AngularJs-数据绑定
    AngularJs-指令1
    AngularJs-MVC之路由、模块以及依赖注入
    AngularJS-MVC
    利用canvas制作图片(可缩放和平移)+相框+文字
    Django rest framework 认证组件源码分析
  • 原文地址:https://www.cnblogs.com/wxs121/p/6768058.html
Copyright © 2011-2022 走看看