原生js jquery ajax請求以及jsonp的調(diào)用方法

更新時(shí)間：2017年08月04日 07:46:38 投稿：jingxian

下面小編就為大家?guī)硪黄鷍s jquery ajax請求以及jsonp的調(diào)用方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

ajax

是用來處理前后端交互的技術(shù)，可以改善用戶體驗(yàn)，其本質(zhì)是

XMLHttpRequest，異步訪問服務(wù)器并發(fā)送請求數(shù)據(jù)，服務(wù)器返回響應(yīng)的數(shù)據(jù)，以頁面無刷新的效果改變頁面中的局部內(nèi)容

同步：任務(wù)一個(gè)一個(gè)的執(zhí)行，只有前面的任務(wù)執(zhí)行完才會(huì)執(zhí)行下一個(gè)任務(wù)，如果前面的任務(wù)是耗時(shí)操作，則需要一直等待

異步：多條任務(wù)并發(fā)執(zhí)行，也就是一個(gè)任務(wù)的開啟，不需要等待其他任務(wù)執(zhí)行結(jié)束，效率較高

ajax的語言載體是JavaScript，最大的特點(diǎn)是頁面不刷新

1、獲取ajax對象

主流瀏覽器獲取方式:火狐、谷歌、safari、opera、IE7以上

var xhr = new XMLHttpRequest();

IE7以下

var xhr = new ActiveXObject("microsoft.XMLHttp");

2、發(fā)起請求

創(chuàng)建請求：xhr.open(請求方式get/post,請求地址);

發(fā)送請求：xhr.send(post請求數(shù)據(jù)/get設(shè)置null);

3、接收數(shù)據(jù)

ajax可以接收字符串、html標(biāo)簽、css樣式、xml、json

通過監(jiān)聽onreadystatechange事件。來接收ajax狀態(tài)的變化（readyState屬性）

readyState:

-0:表示未初始化，對象已經(jīng)建立，但是沒調(diào)用onen方法

-1：對象已建立，但是未調(diào)用send方法

-2：發(fā)送數(shù)據(jù)，已調(diào)用send方法，但當(dāng)前狀態(tài)及http頭未知

-3：已接收部分?jǐn)?shù)據(jù)，但是數(shù)據(jù)不全

-4：數(shù)據(jù)接收完畢

4、常用屬性和方法

屬性：

-responseText：將響應(yīng)的數(shù)據(jù)作為字符串返回，只讀

-responseXML:將響應(yīng)的數(shù)據(jù)格式化為xml格式并返回，只讀

-status：當(dāng)前請求的http狀態(tài)碼

方法：

-open

-send

-setRequestHeader：設(shè)置請求頭

get請求

url以字符串形式傳遞數(shù)據(jù)，對中文、&、=需要特殊處理，可以使用encodeURIComponent()方法進(jìn)行編碼，編碼后的內(nèi)容在服務(wù)端不需要解碼，可以正常接收,get多個(gè)參數(shù)之間用&連接，參數(shù)名和參數(shù)值用=連接

var xhr = null;
      //獲取ajax對象
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
      } else{
        xhr = new ActiveXObject("Microsoft.XMLHttp");
      }
      xhr.onreadystatechange = function(){
        console.log(xhr.readyState);
        switch (xhr.readyState){
          case 0:
          console.log("尚未初始化");
          break;
          case 1:
          console.log("尚未建立連接");
          break;
          case 2:
          console.log("正在發(fā)送數(shù)據(jù)");
          break;
          case 3:
          console.log("正在接受數(shù)據(jù)");
          break;
          case 4:
          console.log("數(shù)據(jù)接收完成");
          //處理接到的數(shù)據(jù),這下面是重點(diǎn)
          var text = xhr.responseText;
          break;
        }
      }
      //創(chuàng)建請求
      xhr.open('get','http://localhost/PHP/ajax01.php?sel=4');
      xhr.send(null);

post請求

-給服務(wù)器傳參數(shù)，需要將參數(shù)寫在send方法中：參數(shù)1=值1&參數(shù)2=值2...

-需要調(diào)用setRequestHeader()方法，把傳送的參數(shù)封裝成xml格式（模仿form表單提交數(shù)據(jù)：application/x-www-form-urlencoded）;

-傳遞的中文、特殊符號都需要編碼

var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function(){
        if (xhr.readyState == 4) {
          console.log("登陸成功:"+xhr.responseText);
        }
      }
      //等到輸入的用戶名和密碼，
      var uname = "uname="+ encodeURIComponent(document.getElementById("uname").value);
      var pwd = "pwd="+encodeURIComponent(document.getElementById("pwd").value);
      xhr.open("post","http://localhos/PHP/ajax01.php");
      //設(shè)置頭信息，需要在open方法之后設(shè)置
      xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      //設(shè)置參數(shù)
      var str = uname+"&"+pwd;
      xhr.send(str);

get/post的區(qū)別：

-請求數(shù)據(jù)量，get最多2k，post沒有限制

-安全方面，post更安全

-傳遞數(shù)據(jù)的形式：get是url和參數(shù)一起發(fā)送，post是參數(shù)單獨(dú)發(fā)送

jquery ajax請求

//AJAX
    $.ajax({
      url:"data.txt",
      type:'get',
      dataType:'json',
      data:null,
      async:true,
      timeout:1000,//設(shè)定超時(shí)時(shí)間 一般都是3000毫秒
      cache:false,//設(shè)定GET請求的時(shí)候不走 緩存數(shù)據(jù)，原理其實(shí)就是在URL末尾加隨機(jī)數(shù)，默認(rèn)是true
      success:function(data){
        console.log(data)
      },
    })
    //JSONP
    //JSONP都是GET和異步請求的，不存在其他的請求方式和同步請求，而且jquery默認(rèn)會(huì)給JSONP的請求清楚緩存
    $.ajax({
      url:"http://matchweb.sports.qq.com/kbs/calendar?columnId=100000",
      type:'get',
      dataType:'jsonp',
      jsonpCallback:"fn",//自定義傳遞給服務(wù)器的函數(shù)名，而不是使用jquery自動(dòng)生成的
      jsonp:'cb',//把傳遞函數(shù)名的那個(gè)形參callBack變?yōu)閏b
      success:function(data){
        console.log(data)
      },
    })

以上這篇原生js jquery ajax請求以及jsonp的調(diào)用方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: