1. 程式人生 > >封裝ajax工具函式

封裝ajax工具函式

/*
 * 1. 請求的型別         type    get post
 * 2. 請求地址           url
 * 3. 是非同步的還是同步的  async   false true
 * 4. 請求內容的格式      contentType
 * 5. 傳輸的資料         data    json物件
 *
 * 6.響應成功處理函式     success   function
 * 7.響應失敗的處理函式   error     function
 *
 * 這些都是動態引數  引數物件  options
 * */
/*封裝一個函式*/
window.$ = {};
/*申明一個ajax的方法*/
$.ajax = function(options){
    if(!options || typeof options != 'object'){
        return false;
    }
    /*請求的型別*/
    var type = options.type || 'get';/*預設get*/
    /*請求地址 */
    var url = options.url || location.pathname;/*當前的地址*/
    /*是非同步的還是同步的 */
    var async = (options.async === false)?false:true;/*預設非同步*/
    /*請求內容的格式 */
    var contentType = options.contentType || "text/html";
    /*傳輸的資料 */
    var data = options.data || {};/*{name:'',age:''}*/
    /*在提交的時候需要轉成 name=xjj 這種格式*/
    var dataStr = ''/*資料字串*/
    for(var key in data){
        dataStr += key+'='+data[key]+'&';
    }
    dataStr = dataStr && dataStr.slice(0,-1);
    /*ajax 程式設計*/
    var xhr = new XMLHttpRequest();
    /*請求行*/
    /*(type=='get'?url+'?'+dataStr:url)判斷當前的請求型別*/
    xhr.open(type,(type=='get'?url+'?'+dataStr:url),async);
    /*請求頭*/
    if(type == 'post'){
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    }
    /*beforeSend 請求前回調函式*/
    var bool = options.beforeSend && options.beforeSend();
    if(bool === false){
        return false;//如果beforeSend結果為false,就阻斷程式
    }
    /*請求主體*/
    /*需要判斷請求型別*/
    xhr.send(type=='get'?null:dataStr);
    /*監聽響應狀態的改變  響應狀態*/
    xhr.onreadystatechange = function(){
        /*請求響應完成並且成功*/
        if(xhr.readyState == 4 && xhr.status == 200){
            /*success*/
            var data = '';
            var contentType = xhr.getResponseHeader('Content-Type');
            /*如果我們伺服器返回的是xml*/
            if(contentType.indexOf('xml') > -1){
                data = xhr.responseXML;
            }
            /*如果我們的伺服器返回的是json字串*/
            else if(contentType.indexOf('json') > -1){
                /*轉化json物件*/
                data = JSON.parse(xhr.responseText);
            }
            /*否則的話他就是字串*/
            else{
                data = xhr.responseText;
            }
            /*回撥 成功處理函式*/
            options.success && options.success(data);
        }
        /*計時請求xhr.status不成功  他也需要的響應完成才認作是一個錯誤的請求*/
        else if(xhr.readyState == 4){
            /*error*/
            options.error && options.error('you request fail !');
        }
        /*不管通訊成功與否,都會執行complete*/
        options.complete && options.complete();
    }
}
$.post = function(options){
    options.type = 'post';
    $.ajax(options);
}
$.get = function(options){
    options.type = 'get';
    $.ajax(options);
}

相關推薦

封裝ajax工具函式

/* * 1. 請求的型別 type get post * 2. 請求地址 url * 3. 是非同步的還是同步的 async false true * 4. 請求內容的格式 contentType * 5. 傳輸的資料 da

jquery中ajax封裝原理/封裝jquery的ajax工具函式

第一次寫部落格,如果有些的不對或者不正確的地方,還希望大神們能夠批評指正,豌豆拜上!! Hello,every body!!,豌豆橫空出世,哈哈,糾結了很久的第一篇部落格即將面世     噹噹噹.....出場自帶bgm喲,話說寫部落格這個事,也不知道能寫多久額,給自己一個鼓

Ajax工具函式封裝

原生Ajax寫法回顧 原生使用Ajax主要分為五步,需要手寫較多內容,如果每次我們使用Ajax都需要手寫一遍,較為浪費時間,所以我們將公共程式碼抽取,封裝為工具函式. 五步使用法: 建立XMLH

JavaScript封裝Ajax工具函數及jQuery中的ajax

form syn oca ica 接口 || 表單元素 ear 數據結構 封裝ajax工具函數 /** * ITCAST WEB * Created by zhousg on 2016/5/24. */ /* * 1. 請求的類型

封裝ajax請求函式

//封裝適合各種情況的簡化版ajax函式 function ajax({//利用解構,獲取將來引數物件中每個屬性值 type,//請求型別: "get"||"post" url,//請求的url地址: "xxx.php" data,//請求攜帶的引數: "變數1=值&..

jQuery的Ajax高階工具函式($getScript(),$getJSON()) --再研究

jQuery的Ajax高階工具不是方法,而是函式,可以通過jQuery或$直接呼叫 //尼瑪,我認為他們是jQuery工廠函式上的靜態方法, //不需要建立jQuery物件,直接使用 ‘類名’ .方法名

封裝好的Ajax呼叫函式以及基本方法總結

學了Ajax,今天來一個總結 首先什麼是Ajax:Asynchronous Javascript And XML”(非同步JavaScript和XML),是指一種建立互動式網頁應用的網頁開發技術。直白的說就是實現區域性重新整理:提升使用者的體驗。(jsp:同步

原生JS封裝AJAX函式

AJAX(Asynchronous Javascript And XML)非同步操作XML(JSON) function output(data){ console.log(JSON.parse(data)); }

JS 和 ajax 實現網路請求 和 對應的類封裝 回撥函式實現

先上效果圖 如下: 1、使用ajax 實現網路請求 程式碼如下: function HttpRequest(){ // document.alert('進入這個方法'); //使用 api 框架 跨域 請求

JS工具函式封裝:使用隱藏iframe實現跨域表單提交

程式碼如下: /* * 使用隱藏的iframe傳送表單提交 * Author: 鄧智容 * Created: 2017-06-19, Last-Modified: 2017-06-19 * 依賴 jQuery或者 Zepto * * * o

原生JS封裝Ajax

tex urlencode new text repl ons xmlhttp tolower 字符 function json2url(json){   //json參數轉字符串   json.t=‘‘+Math.random();   json.t=json.t.rep

封裝ajax

activex read 用戶 網絡 for http 事件 clas nload 今天來說一下ajax,話不多說;直接上代碼! //將數據轉換成 a=1&b=2格式; function json2url(json){ var arr = []; //

封裝ajax支持get、post

一個 content 瀏覽器 sof nco 但是 fun 表單提交 ive 為什麽要封裝ajax,因為…… for(var i=0;i<20;i++){   $.ajax(……) } 的時候,整個頁面都卡死了,於是,我開始找答案。 後來,找到了,就是jquery的a

原生Js封裝ajax方法

() www toupper -type get data function form encodeuri // ajax封裝function ajax(options) { /** * 傳入方式默認為對象 * */ options = opti

自定義封裝ajax,復制即可用

for thead open char app gif ava message gen 支持get、post請求 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5

封裝ajax函數(不可跨域)

cal quest pre soa 內部 AC sta 函數 結構 一、主體:封裝ajax函數:ajaxFunc function ajaxFunc(method, url, data, callback, flag) { //(1)創建ajax對象 var xhr;

ajax.setup函式實現對ajax請求資料的修改

前言: 有一個需求是把頁面中的ajax請求的資料進行修改,將傳送給後臺的字串每個字元中間加一個“%”實現模糊查詢,但是ajax函式是別人封裝好的,所以我不便於改動,於是經過萬能的百度和谷歌搜尋,找到了一個解決辦法。就是下面一段程式碼解決了我的問題,可能寫的不好但是還是有參考價值的。 $.aj

封裝網路工具

public class HttpUtils { public HttpUtils() { } //建立方法 public HttpUtils get(final String url){ new Thread(){ @Override publ

朱有鵬C語言高階---4.9.3--單鏈表--將建立節點的程式碼封裝成一個函式(2)

  朱有鵬C語言高階---4.9.2--單鏈表--訪問單鏈表中各個節點的資料(1) 朱有鵬C語言高階---4.9.3--單鏈表--將建立節點的程式碼封裝成一個函式(2)     原始碼:4.9.3danlianbiao2.c #include &

工具函式總結

1、日期格式轉換 function zeller(date) { const c = parseInt(date.getFullYear() / 100, 10); let y = parseInt(date.getFullYear() % 100, 10); let m =