封裝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 =