DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript中模擬實現jsonp
JavaScript中模擬實現jsonp
編輯:關於JavaScript     
function prescript(s) {
    if (s.cache === undefined) {
      s.cache = false;
    }
    if (s.crossDomain) {
      s.type = "GET";
    }
  }


  function prejsonp(s, originalSettings, jqXHR) {
    // 給回調函數命名
    var callbackName = s.jsonpCallback
    s.url += (/(?:)/.test(s.url) ? "&" : "?") + s.jsonp + "=" + callbackName;
    // 腳本執行後使用數據轉換器來檢索json
    // 提供給代碼獲取服務器的是據
    s.getData = function() {
      if (!responseContainer) {
        jQuery.error(callbackName + " was not called");
      }
      return responseContainer[0];
    };
    //修改處理機制
    s.dataTypes[0] = "json";
    // 創建一個全局函數
    overwritten = window[callbackName];
    //用來收集服務器給的數據
    window[callbackName] = function() {
      responseContainer = arguments;
    };

    return "script";
  }

  /**
   * jsonp的預先處理
   */
  function inspectPrefiltersOrTransportsA(options, originalOptions, jqXHR) {
    //預處理jsonp
    var dataTypeOrTransport = prejsonp(options, originalOptions, jqXHR)
    //擴充dataTypes
    options.dataTypes.unshift(dataTypeOrTransport);
    //預處理script類型
    prescript(options)
  }


  /**
   * 分發器
   * @return {[type]} [description]
   */
  function inspectPrefiltersOrTransportsB(s, originalOptions, jqXHR) {
    return {
      send: function(_, complete) {
        var script = jQuery("<script>").prop({
          async: true,
          charset: s.scriptCharset,
          src: s.url
        }).on(
          "load error",
          callback = function(evt) {
            script.remove();
            callback = null;
            if (evt) {
              complete()
            }
          }
        );
        //<script async="" src="http://192.168.1.113:8080/github/jQuery/jsonp.php
        document.head.appendChild(script[0]);
      }
    }
  }

  /**
   * 模擬ajax的 jsonp請求
   * @param {[type]} options [description]
   * @return {[type]}     [description]
   */
  function createAjax(options) {

    if (typeof url === "object") {
      options = url;
      url = undefined;
    }

    options = options || {};

    /**
     * 參數
     * jQuery.ajaxSetup 是默認參數
     * @type {[type]}
     */
    var s = jQuery.ajaxSetup({}, options);

    // Deferreds
    // 異步機制
    var deferred = jQuery.Deferred();
    var completeDeferred = jQuery.Callbacks("once memory");

    /**
     * 實際返回的ajax對象
     * @type {Object}
     */
    var jqXHR = {}

    // 把jqXHR對象轉化promise對象,幷加入complete、success、error方法
    deferred.promise(jqXHR).complete = completeDeferred.add;
    //別名
    jqXHR.success = jqXHR.done;
    jqXHR.error = jqXHR.fail;

    s.dataTypes = jQuery.trim(s.dataType || "*").toLowerCase().match(/(?:)/) || [""];

    //預處理
    inspectPrefiltersOrTransportsA(s, options, jqXHR);

    for (i in {
      success: 1,
      error: 1,
      complete: 1
    }) {
      jqXHR[i](s[i]);
    }

    /**
     * 分發器
     */
    transport = inspectPrefiltersOrTransportsB(s, options, jqXHR);

    function done(status, nativeStatusText, responses, headers) {
      console.log(s,s.getData())
    }

    //發送請求
    transport.send(s, done);

    return jqXHR;
  }


  function show(data){
    $('body').append('<li>'+ data +'</li>');
  }

  /**
   * 數據回調接收
   * @return {[type]} [description]
   */
  function flightHandler(){

  }

  $("#test").click(function(){
    //執行一個異步的HTTP(Ajax)的請求。
    var ajax = createAjax({
      url: 'http://192.168.1.113:8080/github/jQuery/jsonp.php',
      data: {
        'action': 'aaron'
      }, // 預傳參的數組
      dataType: 'jsonp', // 數據類型
      jsonp: 'callback', // 指定回調函數名,與服務器端接收的一致,並回傳回來
      jsonpCallback:flightHandler,
      success: function() {
        show('局部事件success')
      }
    })
  })

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved