什么是ajax?

2019-11-17  本文已影响0人  拾柒_aab0

Ajax(Asynchronous [JavaScript] and XML),直译为“异步的JavaScript与[XML技术],是一种创建交互式网页应用的网页开发技术,用于创建快速动态网页,由杰西·詹姆士·贾瑞特所提出。与传统的Web应用相比,Ajax通过浏览器与服务器进行少量的数据交换就可以实现网页的异步更新,在不重新加载整个网页的情况下,即可对网页进行更新。
Ajax可使[因特网应用]程序更小、更快,更友好。

Ajax 是一种独立于 Web [服务器软件的浏览器技术。 Ajax 基于下列 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);

}

上一篇下一篇

猜你喜欢

热点阅读