這篇文章主要為大家展示了“原生js+jquery+ajax請求以及jsonp如何調(diào)用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“原生js+jquery+ajax請求以及jsonp如何調(diào)用”這篇文章吧。

成都創(chuàng)新互聯(lián)-云計算及IDC服務提供商，涵蓋公有云、IDC機房租用、內(nèi)蒙古服務器托管、等保安全、私有云建設等企業(yè)級互聯(lián)網(wǎng)基礎服務，服務電話：18982081108

ajax

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

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

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

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

ajax的語言載體是JavaScript，大的特點是頁面不刷新

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設置null);

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

ajax可以接收字符串、html標簽、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方法，但當前狀態(tài)及http頭未知

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

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

4、常用屬性和方法

屬性：

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

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

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

方法：

-open

-send

-setRequestHeader：設置請求頭

get請求

url以字符串形式傳遞數(shù)據(jù)，對中文、&、=需要特殊處理，可以使用encodeURIComponent()方法進行編碼，編碼后的內(nèi)容在服務端不需要解碼，可以正常接收,get多個參數(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ù),這下面是重點
          var text = xhr.responseText;
          break;
        }
      }
      //創(chuàng)建請求
      xhr.open('get','http://localhost/PHP/ajax01.php?sel=4');
      xhr.send(null);

post請求

-給服務器傳參數(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");
      //設置頭信息，需要在open方法之后設置
      xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      //設置參數(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ù)單獨發(fā)送

jquery ajax請求

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

以上是“原生js+jquery+ajax請求以及jsonp如何調(diào)用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站建設公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

名稱欄目：原生js+jquery+ajax請求以及jsonp如何調(diào)用-創(chuàng)新互聯(lián)
本文路徑：http://weahome.cn/article/dpipoo.html