一，前言：
前文，我們介紹了ajax的原理和核心内容，主要講的是ajax從前端到後端的資料傳遞的整個過程。
真正的核心就是這段代碼：
var xhr = new XMLHTTPRequest();
xhr.open("method", "url", "async");
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readystate == 4){
if(xhr.status == 200){
console.log(xhr.responseText)
}
}
}
一個對象(XMLHTTPRequest對象)、
兩個方法(包括open("method", "url", "async")方法和send(content)方法)、
三個屬性(readystate表示目前請求狀态，status表示http請求狀态碼，responseText表示伺服器回報内容)，
當然還有一個事件——onreadystatechange ，是在readystate狀态改變時觸發的事件。具體的内容請點選連結Ajax工作原理。
二，正文：
先來看看jQuery中Ajax方法的使用：
$.ajax({
type: "GET", //通路伺服器的方式，GET/POST
url: "test.json", //url表示通路的伺服器位址
data: {username: "",
content: ""}, //data表示傳遞到背景的資料，使用鍵值對形式傳遞
async: true, //true表示異步，false表示同步
success: function(data){
console.log(data)
},
error: function(err){
console.log(err)
}
});
那麼我們想要封裝成類似JQuery的形式，供調用，怎麼辦呢？
function $Ajax(opt){
opt = opt || {};
opt.type = opt.type || "post";
opt.url = opt.url || "";
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.success = opt.success || function(){};
opt.error = opt.error || function(){};
var xhr = new XMLHTTPRequest();
var params = {};
for(var key in opt.data){
params.push(key + "=" + opt.data[key]);
}
var sendData = params.join("&");
if(opt.type.toUpperCase() == "GET"){
xhr.open(opt.type, opt.url + "?" + sendData, opt.async);
xhr.send(null);
}else{
xhr.open(opt.type, opt.url, opt.async);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
xhr.send(sendData);
}
xhr.onreadystatechange = function(){
if(xhr.readystate == 4){
if(xhr.status == 200){
opt.success && opt.success(xhr.responseText);
}else{
opt.error && xhr.error(xhr.status);
}
}
}
}
已經封裝好了，接下來就是調用了，就像jQuery那樣使用就行：
$Ajax({
type: "GET",
url: "test.json",
data: {username: "", content: ""},
async: true,
success: function(responseText){
console.log(responseText)
},
error: function(status){
console.log(status)
}
});
二，結語：
已經很晚了，沒有進行測試，也沒有詳細進行注釋，有時間再完善吧。
用jQuery基于原生js封裝的輪播
我發現輪播在很多網站裡面都用到過,一個絢麗的輪播可以為網頁增色不少,最近閑來無事,也用原生js封裝了一個輪播,可能不像網上的插件那麼炫,但是也有用心去做.主要用了閉包的思想.需要傳遞的參數有:圖檔位址 ...
使用原生JS封裝一個ajax
function ajax(data){ //第一步,建立XHR對象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpReque ...
原生JS封裝ajax方法
http://blog.sucaijiayuan.com/article/89 jquery架構的ajax方法固然好用,但是假如某天我們的項目不能引入jquery或項目需求很簡單,沒有很多互動功能,隻 ...
原生JS封裝Ajax插件(同域&;&;jsonp跨域)
抛出一個問題,其實所謂的熟悉原生JS,怎樣的程度才是熟悉呢? 最近都在做原生JS熟悉的練習... 用原生Js封裝了一個Ajax插件,引入一般的項目,傳傳資料,感覺還是可行的...簡單說說思路,如有不正 ...
通過遊戲認識 --- JQuery與原生JS的差異
前言 jQuery是一個快速.簡潔的JavaScript架構,是繼Prototype之後又一個優秀的JavaScript代碼庫( 或JavaScript架構).jQuery設計的宗旨是“write ...
ThinkPHP 中使用 IS_AJAX 判斷原生 JS 中的 Ajax 出現問題
問題: 在 ThinkPHP 中使用原生 js 發起 Ajax 請求的時候.在控制器無法使用 IS_AJAX 進行判斷.而使用 jQuery 中的 ajax 是沒有問題的. 在ThinkPHP中.有一 ...
原生js封裝十字參考線插件(一)
需求來源: 拓撲圖之機房平面圖,顯示機房長寬比例尺,房間内标注各種裝置間距不易實作,特在機房平面圖上層加一個十字參考線 橫豎兩條線垂直,在滑鼠指針處交叉,顯示滑鼠指針坐标(相對機房平面圖的坐标,不是相 ...
JavaWeb_Ajax通過JQuery和原生js異步傳輸資料
菜鳥教程 傳送門 AJAX 優點:在不重新加載整個頁面的情況下,可以與伺服器交換資料并更新部分網頁内容 XMLHttpRequest 對象 傳送門 (一) [JQuery]定時發送ajax請求 (二) ...
原生JS封裝簡單動畫效果
原生JS封裝簡單動畫效果 一緻使用各種插件,有時候對原生JS陌生了起來,是以決定封裝一個簡單動畫效果,熟悉JS原生代碼 function animate(obj, target,num){ if(ob ...
随機推薦
Swift泛型協定的N種用法
They said "you should learn a new language every year," so I learned Swift. Now I learn ...
iOS 輕量級的資料庫leveldb
輕量級的資料庫leveldb https://github.com/google/leveldb 一:在iOS下編譯leveldb 終端: 1: git clone https://github.co ...
hdu----(2222)Keywords Search(trie樹)
Keywords Search Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
傅裡葉變換：MP3、JPEG和Siri背後的數學
九年前,當我還坐在學校的實體數學課的課堂裡時,我的老師為我們講授了一種新方法,給我留下了深刻映像.我認為,毫不誇張地說,這是對數學理論發現最廣泛的應用.應用的領域包括:量子實體.射電天文學.MP3和J ...
Android布局中的空格以及占一個漢字寬度的空格的實作
在Android布局中進行使用到空格,以便實作文字的對齊.那麼在Android中如何表示一個空格呢? 空格: 窄空格: 一個漢字寬度的空格: [用兩個空格( )占一個漢字的寬度時,兩個空格比 ...
window.location.href(";url";) 無法在chrome和Firefoxz中使用
今天在js代碼中加了一句window.location.href(‘url’)希望實作頁面的跳轉,IE中可以正常使用,但是Firefox卻提示window.location is not a func ...
[轉]OpenShift 叢集搭建指南
轉自:http://www.cnblogs.com/zhangning/p/7251810.html OpenShift 叢集搭建指南 v1.0 搭建Hyper-v虛拟機或實體機 配置實體機靜态IP, ...
Linux下的計劃任務at，batch，crontab
0x00前言: 繼上次的windows計劃任務後,拓展研究下linux下的計劃任務,能夠執行計劃任務有3個指令at,batch,crontab 所謂的計劃任務就是定時啟動某個程式,可以是一組shell ...
docker 支援ipv6 (核心要點是ndp需要把docker内的ip全部加入到ndplist中來)
IPv6 with Docker Estimated reading time: 10 minutes The information in this section explains IPv6 wi ...
apt-get 使用指南
# apt-get update——在修改/etc/apt/sources.list或者/etc/apt/preferences之後運作該指令.此外您需要定期運作這一指令以確定您的軟體包清單是最新的. ...