• JS学习之ajax相关知识和ajax的封装


    XMLHttpRequest对象

     1. XMLHttpRequest用于在后台与服务器交换数据,是AJAX之所以能对网页进行局部刷新的核心,同时Ajax技术离开了XMLHttpRequest对象将失去与服务器异步通信的能力。

    2:不同的浏览器创建XMLHttpRequest对象使用的语句是不同的。

    3:3.XMLHttpRequest对象方法与属性

    方法 描述
    open(method,url,[async],[username],[password])

    规定请求的类型、URL 以及是否异步处理请求。

    • method:请求的类型;GET 或 POST(特别说明的是:仍要特别注意两种请求类型下的参数汉字乱码的问题)
    • url:要访问的文件的URL

    url - 服务器上的文件

    url - 服务器上的文件open() 方法的 url 参数是服务器上文件的地址:xmlhttp.open("GET","ajax_test.asp",true);该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和.php (在传回响应之前,能够在服务器上执行任务)。

    • async:true(异步)或 false(同步)。该参数是可选的,默认为 true。异步优点在等待服务器响应时执行其他脚本;当响应就绪后对响应进行处理
    • username:如果需要身份验证,则可以在此指定用户名。该参数没有默认值。
    • password:如果需要身份验证,则可以在此指定口令。该参数没有默认值。
    说明:通常使用其中的前三个参数。事实上,即使需要异步连接,通常指定第三个参数为 “true”,这样更容易理解。
    send([string])

    将要发送的内容发送到服务器。

    • string:仅用于 POST 请求。
    setRequestHeader(header,value)

    向请求添加 HTTP 头。

    • header: 规定头的名称
    • value: 规定头的值
    如果在open方法中使用的method是“POST”,则要通过以下语句设置请求头:httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");

       4:关于使用get还是post

          get 简单方便,在大部分情况下都能用

         post 在传送的数据比较多时,或者比较重要的数据时请用post

      5:在使用get请求时候,有可能得到的是缓存的结果,需要对请求处理下

       xhr.open('get','test.php?t='+Math.random())

      6:异步 - True 或 False?

       AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

       XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:

       对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。

       通过 AJAX,JavaScript 无需等待服务器的响应,而是:

              1)在等待服务器响应时执行其他脚本

                 2)当响应就绪后对响应进行处理

    属性 描述
    readyState

    1)提供当前 HTML 的就绪状态,它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。

    2)帮助确定读取服务器提供的响应文本或数据是否安全。在Ajax应用程序中需要了解五种就绪状态:

           0:请求没有发出(在调用 open() 之前)

           1:请求已经建立但还没有发出(调用 send() 之前)

           2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部)

           3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应

           4:响应已完成,可以访问服务器响应并使用它。对于Ajax编程,需要直接处理的唯一状态就是就绪状态4,它表示服务器响应已经完成,可以安全地使用响应数据了。

    status

    服务器响应的状态代码。服务器响应完成后(readyState=4),从完成的响应信息中可获得状态代码。比如:

                  输入了错误的URL请求将得到404错误码,它表示该页面不存在;

                 403和401错误码表示所访问的数据受到保护或者禁止访问;

                 200状态码表示一切顺利。因此,如果状态码是200而且就绪状态是4,就可以处理服务器的数据了,而且这些数据应该就是要求的数据(而不是错误或者其他有问题的信息)。

    onreadystatechange

    (onload)

    用于指定XMLHttpRequest对象的状态改变函数(类似于按钮对象的onclick属性),当XMLHttpRequest对象状态(readyState的值)改变时,该函数将被触发,该函数也称回调函数。假设回调函数为callback,则它的代码通常为:

            function callback(){

                       if (httpRequest.readyState == 4) { 

                               if (httpRequest.status == 200) {

                                          事件响应代码

                            }}}

     注释:onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

     xmlhttp.onreadystatechange=function(){     
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {

    <span style="white-space:pre"> </span>
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }}
    注意: onload事件是所有请求都完成时候触发,也就是readystate=4的时候,新版本的XMLHttpRequest不建议使用
    onreadystatechange事件,但是onload事件ie6,7,8不支持
    ①responseText②responseXML

    如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

    ①服务器返回的请求响应文本。

    ②服务器端返回的XML类型的响应。这种情形下,服务器端的响应类型为xml,通过如下代码设置:response.setContentType("text/xml;charset=UTF-8");

    7:AJAX运行流程

    整个Ajax技术紧紧围绕在XMLHttpRequest对象周围
    (1)创建XMLHttpRequest对象,XMLHttpRequest对象的作用如同名字所暗示的,允许通过客户端脚本来发送HTTP请求。

    (2)XMLHttpRequest打开连接并发送数据

      服务器端响应处理阶段

    (3)XMLHttpRequest获得服务器端响应状态。XMLHttpRequest对象也是一个普通的JavaScript对象,如一个普通按钮或一个普通文本框一样,可以触发事件;而XMLHttpRequest触发的事件就是onreadystatechange,当XMLHttpRequest对象的状态改变时,将触发它。为XMLHttpRequest对象的onreadystatechange事件指定事件处理函数,该函数将在XMLHttpRequest状态改变时被执行,这个事件处理函数也叫回调函数(XMLHttpRequest状态改变,且readyState=4&&status=200时,表明服务器响应已经完成且是正确的响应状态,此时可以开始处理服务器响应)
    (4)客户端处理函数执行。进入事件处理函数后,XMLHttpRequest依然不可或缺,事件处理函数借助于XMLHttpRequest的responseText或responseXML属性获取服务器的响应,至此XMLHttpRequest运行周期结束;JavaScript通过DOM操作将响应动态加载到XHMTL页面中。
    整个过程,从发送HTTP请求到监控服务器的响应状态,到获取响应数据,XMLHttpRequest一直是Ajax技术的灵魂

    8:XMLHttpRequest工作流程图

    ajax的封装

    /*
             URL       地址  
             method    请求的方式get/post
             dataType  返回的数据类型string/xml/json
             data      请求时候传的数据(一个对象)
             succ      成功后的回调函数
             fail      失败后的回调函数
             data的数据格式 
             {
               'user' : 'xubj',
               'password':123
             }
             user=xubj&password=123
           */ 
           function  ajax(obj){
                  var settings={
                         url:'',
                         method:'get',
                         data:{},
                         dataType:'json',
                         succ:function(){},
                         fail:function(){}
                  };
           
           //用户传的参数覆盖默认参数
           for (var attr in obj){
                 settings[attr] = obj[attr]
           }
           //把数据拼接成正确的格式  user=xubj&passowrd=123
           var arr=[];
           for(var attr in settings.data){
                arr.push(attr+'='+settings.data[attr]);
           }
           settings.data=arr.join('&');
           //声明一个ajax对象
           var ajax=window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
           //设置请求方式
           if(settings.method.toLocaleCase()==='get'){
              ajax.open('get',settings.url+'?'+settings.data+'&'+new Date().getTime(),true);
              ajax.send();
           }else{
              ajax.open('post',settings.url,true);
              ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
              ajax.send(settings.data);
           }
           //设置完成事件的兼容性
           if(typeof ajax.onload==='undefined'){
                ajax.onreadystatechange=ready;
           }else{
               ajax.onload=ready;
           }
           function ready(){
                 if(ajax.readyState==4){
                     if(ajax.status==200){
                         switch(settings.dataType.toLocaleCase()){
                             case  'string':
                             settings.succ(ajax.responseText);
                             break;
                             case  'json':
                             settings.succ(JSON.parse(ajax.responseText));
                             break;
                             case   'xml':
                             settings.succ(ajax.responseXML);
                         }
                     }else{
                         settings.fail(ajax.status );
                     }
                 }
           }
         }
    /*
    使用:
    ajax({
    url:'test.php',
    method:'get',
    dataType:'json',
    data:{
    uesr:'xubj',
    password:123
    },
    succ:fucntion(){
    成功处理
    },
    fail:function(){
    失败处理
    }
    });
    */
  • 相关阅读:
    LeetCode "Median of Two Sorted Arrays"
    LeetCode "Distinct Subsequences"
    LeetCode "Permutation Sequence"

    LeetCode "Linked List Cycle II"
    LeetCode "Best Time to Buy and Sell Stock III"
    LeetCode "4Sum"
    LeetCode "3Sum closest"
    LeetCode "3Sum"
    LeetCode "Container With Most Water"
  • 原文地址:https://www.cnblogs.com/xubj/p/9994099.html
Copyright © 2020-2023  润新知