亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

ajax簡(jiǎn)單封裝

caoym / 2088人閱讀

摘要：工作之余簡(jiǎn)單封裝了的請(qǐng)求，但是工作中還是用，，內(nèi)部封裝好了模塊笑。代碼解析參數(shù)創(chuàng)建高級(jí)瀏覽器和以上連接發(fā)送請(qǐng)求頭發(fā)送接收完成清除定時(shí)器成功超時(shí)超時(shí)了終止轉(zhuǎn)

工作之余簡(jiǎn)單封裝了ajax的請(qǐng)求，但是工作中還是用jquery，axios，angular內(nèi)部封裝好了http模塊（笑）。

ajax一般分為簡(jiǎn)單的四部：

創(chuàng)建ajax對(duì)象（這里兼容ie的話要做一下處理）

連接，即請(qǐng)求對(duì)象的open方法（get和post還有點(diǎn)不同，get參數(shù)要放在url后面，post要設(shè)置請(qǐng)求頭）

發(fā)送，即請(qǐng)求對(duì)象的send函數(shù)（post參數(shù)則放在send里面）

接收，在onreadystatechange（存儲(chǔ)函數(shù)或函數(shù)名，每當(dāng)readyState屬性改變時(shí)，就會(huì)調(diào)用該函數(shù)。）函數(shù)里面處理。

還可以加上超時(shí)這些

onreadystatechange分析

要先判斷readyState的狀態(tài)（有四個(gè)狀態(tài)）

①： 0，請(qǐng)求未初始化；

②： 1，服務(wù)器連接已建立；

③： 2，請(qǐng)求已接收；

④： 3，請(qǐng)求處理中；

⑤： 4，請(qǐng)求已完成，且響應(yīng)已就緒

當(dāng)readyState等于4時(shí)，你又要判斷status的狀態(tài)

請(qǐng)求成功時(shí)status狀態(tài) 200-300（不包括300） ，還有304（是緩存）（具體狀態(tài)可以去參考文檔）

在成功（失?。┑幕氐艉瘮?shù)里面將xhr.responseText的值返回出去。

代碼 
"use strict";

var $ = {};
$.ajax = ajax;

function ajax(options) {

  // 解析參數(shù)
  options = options || {};
  if (!options.url) return;
  options.type = options.type || "get";
  options.timeout = options.timeout || 0;

  // 1 創(chuàng)建ajax
  if (window.XMLHttpRequest) {

    // 高級(jí)瀏覽器和ie7以上
    var xhr = new XMLHttpRequest();
  } else {

    //ie6,7,8
    var xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
  }

  // 2 連接
  var str = jsonToUrl(options.data);
  if (options.type === "get") {
    xhr.open("get", `${options.url}?${str}`, true);

    // 3 發(fā)送
    xhr.send();
  } else {
    xhr.open("post", options.url, true);

    // 請(qǐng)求頭
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    // 3 發(fā)送
    xhr.send();
  }

  // 接收
  xhr.onreadystatechange = function() {

    // 完成
    if (xhr.readyState === 4) {

      // 清除定時(shí)器
      clearTimeout(timer);

      if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {

        // 成功
        options.success && options.success(xhr.responseText);
      } else {
        options.error && options.error( xhr.status );
      }
    }
  };

  
  // 超時(shí)
  if (options.timeout) {
    var timer = setTimeout(function(){ 
            alert("超時(shí)了");
            xhr.abort(); // 終止
        },options.timeout);
  }
}


// json轉(zhuǎn)url
function jsonToUrl(json) {
  var arr = [];
  json.t = Math.random();
  for(var name in json) {
    arr.push(name + "=" + encodeURIComponent(json[name]));
  }
  return arr.join("&");
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107044.html

相關(guān)文章

  • 回調(diào)、使用Promise封裝ajax()、Promise入門

    摘要：回調(diào)使用封裝入門回調(diào)是啥看這里回調(diào)是什么方應(yīng)杭知乎是一種特殊的函數(shù)，這個(gè)函數(shù)被作為參數(shù)傳給另一個(gè)函數(shù)去調(diào)用。 回調(diào)、使用Promise封裝ajax()、Promise入門 1 回調(diào)是啥 call a functioncall a function back callback 看這里:Callback（回調(diào)）是什么？---方應(yīng)杭知乎 callback 是一種特殊的函數(shù)，這個(gè)函數(shù)被作為參數(shù)...

    godlong_X 評(píng)論0 收藏0

  • ajax封裝和跨域知識(shí)

    摘要：封裝和跨域知識(shí)使用還是是通過(guò)參數(shù)傳遞到當(dāng)前腳本的變量數(shù)組。對(duì)所發(fā)送信息的數(shù)量也有限制。請(qǐng)求成功時(shí)觸發(fā)，。允許一個(gè)域上的網(wǎng)絡(luò)應(yīng)用向另一個(gè)域提交跨域請(qǐng)求。 ajax封裝和跨域知識(shí) ajax 使用get還是post $_GET 是通過(guò) URL 參數(shù)傳遞到當(dāng)前腳本的變量數(shù)組。 $_POST 是通過(guò) HTTP POST 傳遞到當(dāng)前腳本的變量數(shù)組。 何時(shí)使用 GET？ 通過(guò) GET 方法從表單...

    Shihira 評(píng)論0 收藏0

  • 二次封裝 query ajax 辦法

    摘要：本次二次封裝，參考可以添加中間件處理數(shù)據(jù)，返回對(duì)象，減少回調(diào)，寫更加簡(jiǎn)潔優(yōu)雅。痛點(diǎn)但是在項(xiàng)目中使用它還是有一些痛點(diǎn)的就是現(xiàn)在基本所有項(xiàng)目的返回的數(shù)據(jù)也是進(jìn)行了二次封裝，加入了后臺(tái)在處理業(yè)務(wù)邏輯時(shí)的信息。 前言 在我們前端處理數(shù)據(jù)的時(shí)候免不了要 ajax 與后臺(tái)通信， ajax 是通過(guò) XMLHttpRequest 對(duì)象與服務(wù)器進(jìn)行通信的， jquery 在 XMLHttpReaque...

    zr_hebo 評(píng)論0 收藏0

  • Ajax在vue中的封裝及使用

    摘要：今天給大家寫一篇關(guān)于在中的應(yīng)用及封裝，有些同學(xué)可能會(huì)有疑問(wèn)，因?yàn)槭煜さ亩贾溃杏泻褪菍ｉT用于交互的，那么豈不是多此一舉嗎其實(shí)不然，有的優(yōu)勢(shì)，并且小編本身對(duì)有著特殊的感情，今天就給大家詳細(xì)詳解在中的應(yīng)用。 今天給大家寫一篇關(guān)于ajax在vue中的應(yīng)用及封裝，有些同學(xué)可能會(huì)有疑問(wèn)，因?yàn)槭煜ue的都知道，vue中有vue-resource和axios是專門用于http交互的，那么ajax...

    godruoyi 評(píng)論0 收藏0

  • Ajax在vue中的封裝及使用

    摘要：今天給大家寫一篇關(guān)于在中的應(yīng)用及封裝，有些同學(xué)可能會(huì)有疑問(wèn)，因?yàn)槭煜さ亩贾?，中有和是專門用于交互的，那么豈不是多此一舉嗎其實(shí)不然，有的優(yōu)勢(shì)，并且小編本身對(duì)有著特殊的感情，今天就給大家詳細(xì)詳解在中的應(yīng)用。 今天給大家寫一篇關(guān)于ajax在vue中的應(yīng)用及封裝，有些同學(xué)可能會(huì)有疑問(wèn)，因?yàn)槭煜ue的都知道，vue中有vue-resource和axios是專門用于http交互的，那么ajax...

    pingink 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<