ajax與jsonp

• 簡介:

  • ajax技術(shù)的目的是讓javascript發(fā)送http請(qǐng)求，與后臺(tái)通信，獲取數(shù)據(jù)和信息。ajax技術(shù)的原理是實(shí)例化xmlhttp對(duì)象，使用此對(duì)象與后臺(tái)通信。ajax通信的過程不會(huì)影響后續(xù)javascript的執(zhí)行，從而實(shí)現(xiàn)異步。

• 同步和異步

  • 現(xiàn)實(shí)生活中，同步指的是同時(shí)做幾件事情，異步指的是做完一件事后再做另外一件事，程序中的同步和異步是把現(xiàn)實(shí)生活中的概念對(duì)調(diào)，也就是程序中的異步指的是現(xiàn)實(shí)生活中的同步，程序中的同步指的是現(xiàn)實(shí)生活中的異步。

• 局部刷新和無刷新

  • ajax可以實(shí)現(xiàn)局部刷新，也叫做無刷新，無刷新指的是整個(gè)頁面不刷新，只是局部刷新，ajax可以自己發(fā)送http請(qǐng)求，不用通過瀏覽器的地址欄，所以頁面整體不會(huì)刷新，ajax獲取到后臺(tái)數(shù)據(jù)，更新頁面顯示數(shù)據(jù)的部分，就做到了頁面局部刷新。

• 同源策略

  • ajax請(qǐng)求的頁面或資源只能是同一個(gè)域下面的資源，不能是其他域的資源，這是在設(shè)計(jì)ajax時(shí)基于安全的考慮。特征報(bào)錯(cuò)提示：

    XMLHttpRequest cannot load https://www.baidu.com/. No  
    'Access-Control-Allow-Origin' header is present on the requested resource.  
    Origin 'null' is therefore not allowed access.
    

$.ajax使用方法

• 常用參數(shù)：

  • 1、url 請(qǐng)求地址
  • 2、type 請(qǐng)求方式，默認(rèn)是'GET'，常用的還有'POST'
  • 3、dataType 設(shè)置返回的數(shù)據(jù)格式，常用的是'json'格式，也可以設(shè)置為'html'
  • 4、data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù)
  • 5、success 設(shè)置請(qǐng)求成功后的回調(diào)函數(shù)
  • 6、error 設(shè)置請(qǐng)求失敗后的回調(diào)函數(shù)
  • 7、async 設(shè)置是否異步，默認(rèn)值是'true'，表示異步

• 以前的寫法：

  $.ajax({
      url: 'js/user.json',
      type: 'GET',
      dataType: 'json',
      data:{'aa':1}
      success:function(data){
          ......
      },
      error:function(){
          alert('服務(wù)器超時(shí)，請(qǐng)重試！');
      }
  });
  

• 新的寫法(推薦)：

  $.ajax({
      url: 'js/user.json',
      type: 'GET',
      dataType: 'json',
      data:{'aa':1}
  })
  .done(function(data) {
      ......
  })
  .fail(function() {
      alert('服務(wù)器超時(shí)，請(qǐng)重試！');
  });
  

jsonp

• ajax只能請(qǐng)求同一個(gè)域下的數(shù)據(jù)或資源，有時(shí)候需要跨域請(qǐng)求數(shù)據(jù)，就需要用到j(luò)sonp技術(shù)，jsonp可以跨域請(qǐng)求數(shù)據(jù)，它的原理主要是利用了script標(biāo)簽可以跨域鏈接資源的特性。

• jsonp的原理如下：

  <script type="text/javascript">
      function aa(dat){
          alert(dat.name);
      }
  </script>
  <script type="text/javascript" src="....../js/data.js"></script>
  

• 頁面上定義一個(gè)函數(shù)，引用一個(gè)外部js文件，外部js文件的地址可以是不同域的地址，外部js文件的內(nèi)容如下：aa({"name":"tom","age":18});

• 外部js文件調(diào)用頁面上定義的函數(shù)，通過參數(shù)把數(shù)據(jù)傳進(jìn)去。