Ajax(Asynchronous [JavaScript] and XML),直譯為“異步的JavaScript與[XML技術],是一種創建交互式網頁應用的網頁開發技術,用于創建快速動態網頁,由杰西·詹姆士·賈瑞特所提出。與傳統的Web應用相比,Ajax通過瀏覽器與服務器進行少量的數據交換就可以實現網頁的異步更新,在不重新加載整個網頁的情況下,即可對網頁進行更新。
Ajax可使[因特網應用]程序更小、更快,更友好。
Ajax 是一種獨立于 Web [服務器軟件的瀏覽器技術?!jax 基于下列 Web 標準:
JavaScript、XML、HTML與CSS在 Ajax 中使用的 Web 標準已被良好定義,并被所有的主流瀏覽器支持。Ajax 應用程序獨立于瀏覽器和平臺。
Web 應用程序較[桌面應用程序]有諸多優勢;它們能夠涉及廣大的用戶,它們更易安裝及維護,也更易開發。
那么怎樣封裝一個ajax來方便我們調用呢?
function ajax(opt) {
var default_opt = {
url: '',
method: 'GET',
async: true,
data: {},
callback: null
}
//拼接
var newopt = Object.assign(default_opt, opt);
//兼容 實例化
var xhr = window.XMLHttpRequest ?
new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
//監聽狀態
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// console.log(xhr.responseText);
newopt.callback && newopt.callback(xhr.responseText);
}
}
var search = '';
if (newopt.method.toUpperCase() === 'GET') {
console.log(Object.keys(newopt.data))
search = '?' + Object.keys(newopt.data).map(function (item) {
return item + '=' + newopt.data[item];
}).join('&');
}
xhr.open(newopt.method, newopt.url + search, newopt.async);
var data = null;
if (newopt.method.toUpperCase() === 'POST') {
xhr.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
data = JSON.stringify(newopt.data);
}
xhr.send(data);
}