個人前端故事----Ajax方式和jsonp的實現區別

        好久沒有更新博客了，畢業2個月了，這段時間一直在忙於工做，一直沒有時間更新，最近作的活動忽然發現以前的經驗竟然忘記了。。。索性想一想仍是從新開始用博客記錄平日裏的工做經驗吧，吐槽就到這裏了，這篇記錄的是我在平日裏常常用到的請求後端的方式。

       大多數狀況下，不管是框架仍是本身實現都是經過Ajax的方式來向後端請求數據的，而Ajax之間是經過傳輸json格式的文件來進行數據的傳輸的，你們對Ajax也很熟悉了，那麼爲何我又要使用jsonp呢？這就要從什麼是jsonp，什麼是json來講一說了。

       json是一種格式，而jsonp是一種調用方式，那麼在你們都使用Ajax的狀況下爲何我不用呢？由於Ajax做爲腳本出於安全的考慮，是不容許訪問非同源的內容的。那麼若是個人前端活動頁面和後端的服務器不在一個域名下該如何請求數據呢？這個時候就須要jsonp的方式來解決跨域的問題了。

       那麼爲何jsonp能夠跨域呢？其中的原理又是什麼呢？咱們下面就來介紹一下jsonp跨域的原理。

       由於同源策略的的緣由，對於一個瀏覽器的頁面只有來自一個源的腳本才能夠被執行，這樣的目的是爲了安全性，但是卻阻止了數據的請求，因此咱們就要從繞開同源策略來入手，什麼狀況下容許跨域請求呢？那就是靜態資源！靜態資源是不受域策略限制的，能夠加載任意域的腳本、樣式、圖片等靜態資源，JSOP就是利用這種原理來實現跨域獲取數據的。

咱們將須要的json數據放在js文件中進行傳輸，這樣就能夠將須要的數據經過靜態文件的形式傳過來了，那麼咱們就來說講具體是如何實現的呢？

       因爲是靜態文件，因此咱們在請求的時候首先須要創建一個靜態資源的DOM元素，例如這樣的標籤：

<script src="http://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>

       那麼咱們就來一步步的構建這個DOM標籤吧，首先經過document.createElement(‘script’);來創建一個script標籤，而後設置它的src屬性指向須要請求的URL地址，而後將這個元素添加在body中，最後出於安全咱們要將剛剛新建的標籤在完成請求後刪除掉。

       在這裏我把我寫的一個封裝好的函數貼出來，很簡單的一個函數就說明了一切~

/*
 * Created by jonnyf on 15-9-15.
 * 這個函數是經過JSONP的方式請求後端接口
 * 須要傳入三個參數，
 * url爲請求的接口地址，類型爲字符串
 * parameter爲請求的參數對象，類型爲對象
 * callback爲完成請求後的回調函數名稱， 類型爲字符串
 */

function getJSONP(url, parameter, callback) {
    var Script = document.createElement('script'),
        _parameter = parameter,
        _url = url,
        _callback = callback,
        code = '';
    for (var i in _parameter) {
        code += i + '=' + _parameter[i] + '&'
    }
    Script.src = _url + '?' + code + 'callback=' + _callback;
    document.body.appendChild(Script);
    Script.onload = function(){   //  請求成功後移除標籤
            Script.remove();
        }
    Script.onerror = function() {   //  失敗的時候也要移除標籤
         alert('請求錯誤, 請重試');
        Script.remove();
    };
}

      過久沒有記錄了。。。已經忘記了太多了，這篇就先簡單的記錄一點點吧，逐漸再恢復常寫博客的習慣了~~

       最後祝你們中秋節快樂~<(￣▽￣)> ~~