我的前端故事----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();
    };
}

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

       最后祝大家中秋節快樂~<(￣▽￣)> ~~