什么是ajax?

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);

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 学妹这学期新开了一门课《Script及AJAX开发技术》,然而临近学期末,她突然跑来问我:到底什么是AJAX...
    雇个城管打天下阅读 935评论 0 1
  • 大家好,我是IT修真院郑州分院王姣妍,一枚正直、纯洁、善良的web程序员。 今天给大家分享一下,修真院官网 js任...
    初晨晒暖心阅读 451评论 0 1
  • 大家好,我是IT修真院北京分院第31期的学员,一枚正直纯洁善良的JAVA程序员。今天给大家分享一下,修真...
    ve追风_685b阅读 309评论 1 0
  • 什么是Ajax 目录 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 7.参考...
    冷眸_c6b8阅读 282评论 0 0
  • 大家好,我是IT修真院成都分院第7期的学员韩建名,一枚正直纯洁善良的WEB前端程序员。 目录 1.背景介绍 2.知...
    inh_阅读 369评论 0 0