zoukankan      html  css  js  c++  java
  • Ajax基础

           前几天用到了Ajax,突然感觉有点生疏了,于是上网查询资料把这一块知识补全。

        ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),Ajax可以实现页面的无刷新。

      Ajax操作一般可以分为五步:

    1——创建Ajax对象

      由于浏览器对XMLHttpRequest对象的支持不足,只能被IE5.0及以后的版本支持,所以创建对象的时候需要对浏览器进行区别,具体代码如下:

     try{  
           //先尝试使用标准的方式创建(Firfox,Ie8,Chrome) 
    xhr=new XMLHttpRequest();       
            }catch (e){
        //出现异常说明是IE7 以前额版本,则使用ActiveXObject创建
     xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    

     

    2——设置状态变化回调函数

    //设置状态变化回调函数
    xhr=new onreadystatechange=resCallback;//本次的回调函数是resCallback;
    function resCallback(){
      //判断请求是否成功完成并且成功返回
    if(xhr.readyState==4&& xhr.status==200){
    var resDiv=document.getElementById("result");
    var old=resDiv.innerHTML;
    resDiv.innerHTML=old+xhr.responseText+"<br/>";
    }

    }


    //设置请求方式和URL xhr.open("GET","showTime.jsp");

    3——发送请求

    //发送请求

    xhr.send(null);

    4——接收返回值

    这一步是在回调函数里面执行

    5——根据返回值操作页面节点对象

    --__以下是本次案例的全部代码:

    <body>
    
    <input type="button" value="获取时间" onclick="getTime()"/>
    <div id="result">这里将显示时间,但是不会刷新全部页面</div>
    
    </body>
    

      

    <script>
    
    var xhr;
    function getTime(){
     try{  
           //先尝试使用标准的方式创建(Firfox,Ie8,Chrome) 
    xhr=new XMLHttpRequest();       
            }catch (e){
        //出现异常说明是IE7 以前额版本,则使用ActiveXObject创建
     xhr=new ActiveXObject("Microsoft.XMLHTTP")//设置状态变化回调函数
    xhr=new onreadystatechange=resCallback;//本次的回调函数是resCallback;
    function resCallback(){
      //判断请求是否成功完成并且成功返回
    if(xhr.readyState==4&& xhr.status==200){
    var resDiv=document.getElementById("result");
    var old=resDiv.innerHTML;
    resDiv.innerHTML=old+xhr.responseText+"<br/>";
    }

    }
    //设置请求方式和URL xhr.open("GET","showTime.jsp");
    </script>
       $.ajax({
    
         type: "POST",
    
          url: "some.php",
    
    data: "name=John&location=Boston", success: function(msg){ 
    
    alert( "Data Saved: " + msg ); }
    
          });
    //这段代码是在JQueryAPI上Copy的,$.ajax中请求参数和$.post/$.get的参数不一样,$.ajax的参数数据要求是Key和Value型的而post和get只需参数的name和参数值

    dataType—服务器返回的数据类型 :。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。

    随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

    "xml": 返回 XML 文档,可用 jQuery 处理。

    "html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。

    "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

    "json": 返回 JSON 数据 。

    "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

     async: 俗称Ajax的开关,当这个属性值是true的时候,这次请求就是一个异步请求,当属性值是false的时候该请求就是同步请求,需要注意的是:同步请求会锁住浏览器直到这 个请求完成后用户才能在页面做其他的操作。

    context   object

    这个对象用于设置Ajax相关回调函数的上下文。也就是说,让回调函数内this指向这个对象(如果不设定这个参数,那么this就指向调用本次AJAX请求时传递的options参数)。比如指定一个DOM元素作为context参数,这样就设置了success回调函数的上下文为这个DOM元素。就像这样:

    $.ajax({ 
    url: "test.html",
    context: document.body,//让回调函数内this指向这个对象这里是body对象
    success: function(){ $(this).addClass("done"); }});

        Jquery中的Ajax有很多属性,这里只是基础,以下几种下次再说。

      

  • 相关阅读:
    visual studio 注释
    EF Core导航属性
    【转】前端UI框架小汇总
    C#三种定时器的实现
    【转】自学MVC看这里——全网最全ASP.NET MVC 教程汇总
    【转】C#进阶系列——WebApi 接口参数不再困惑:传参详解
    【转】c# WebApi之解决跨域问题:Cors
    优秀.NET开源项目
    Linux简介及最常用命令
    C#中使用Socket实现简单Web服务器
  • 原文地址:https://www.cnblogs.com/wjn563/p/4190195.html
Copyright © 2011-2022 走看看