AJAX异步请求

Posted 秦明科

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX异步请求相关的知识,希望对你有一定的参考价值。

ajax英文全名:Asynchronus javascript and XML 异步的javaScripyt和xml

  1异步和同步:客户端和服务端相互通信的基础上,

        同步:当客户端给服务端发送请求时,只有单服务端给出响应后,客户端才会进行下一步的操作。(客户端会等待服务端)

        异步:当客户端给服务发送请求后,客户端不会等待服务端的响应,此时客户端可以进行其他操作,当服务做出响应时,客户端才会进行下一步操作(客户端不会等待服务端的响应。)

 

  Ajax 是一种无序重新加载整个页面,能够更新部分网页的技术。

  通过后台与服务器进行少量的数据交换,ajax可以使网页实现异步更新,这意味着可以在不重新加载整个页面的情况下,对网页的某部分内容进行更新

  如果不适用ajax请求后台数据,需要对整个网页进行更新。  

  因此使用ajax可以提升用户的体验。

  实现方式:

    这种方式是原生的实现方式

    //1创建核心对象

      var xmlHttp;

    if(window.xmlhttpRequest)

    

    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }

    else
    {

    //对ie浏览器做的一个适配

    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

  2//建立连接  

    /*

    请求参数

    1请求方式,get post等

    2请求的url,服务地址

    3同步或者异步 同步false ,异步true

    */

    xmlHttp.open("get","servletTest/hello?username=zhangsan",true);

    //发送请求

    xmlHttp.send();

 

    //4接收并处理请求结果

      //获取方式:xmlhttp.responseText

    //获取时机(当服务器返回结果后在进行获取)

  //当xmlHttp对象的就绪状态改变时,触发onreadystatechange()函数

    xmlhttp.onreadystatechange=function()
    {
    //判断readyState就绪状态是否为4,判断status响应状态码是否为200
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    //获取服务器的响应结果
    var responseText = xmlhttp.responseText;
    alert(responseText);
    }

jQuery实现方式

    $符号代理真个jquery对象

    $.ajax()

    语法

    $.ajax({键值对})

 

    //使用$.ajax发送异步请求

      $.anax({

      url:"servlettest/hello"  ,  //请求的url

      type:"post"  ,//请求的方式

      //data:"username=zhansgan&age=18" ,get方式传递参数

      data:{

          "username":zhangsan

          age:18

        },

      success:function(data){   //响应成功后执行的参数  data,为响应回来的数据

        }

    })

}

  还有直接对get和post方式进行请求,这里就不进行一一介绍了。

    $post("url","“请求参数,funcatin(),响应的结果类型)

 

  现在最流行的应该是axsor方法进行异步请求

     axiosr方式

   axisor.post("请求的url",请求的参数可以为json格式,).then((res)=>{//请求成功的回调

 

 

  }).catch((erro)=>{//请求失败的回调

 

  })

        

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Asynchronous javaScript and XML 异步的JavaSCript和xml

以上是关于AJAX异步请求的主要内容,如果未能解决你的问题,请参考以下文章

使用ajax发送异步请求,请求后端的控制层方法,并且获取这个方法返回的日期,然后显示在页面上?

详解Ajax请求——多个异步请求的执行顺序

AJAX异步请求,局部刷新

Ajax异步请求

JavaScrpit中异步请求Ajax实现

dva 如何把同步改为异步请求