/*--------------  示例一  ----------------*/ajax({url: "https://m.baidu.com/su", //请求地址type: "POST", //请求方式data: { wd:'te'}, //请求参数dataType: "json",success: function (response, xml) {// 此处放成功后执行的代码console.log(response,xml);},error: function (status) {console.log(status);}
});function ajax(options) {options = options || {};options.type = (options.type || "GET").toUpperCase();options.dataType = options.dataType || "json";var params = formatParams(options.data);//创建 - 非IE6 - 第一步if (window.XMLHttpRequest) {var xhr = new XMLHttpRequest();} else { //IE6及其以下版本浏览器var xhr = new ActiveXObject('Microsoft.XMLHTTP');}//接收 - 第三步xhr.onreadystatechange = function () {if (xhr.readyState == 4) {var status = xhr.status;if (status >= 200 && status < 300) {options.success && options.success(xhr.responseText, xhr.responseXML);} else {options.error && options.error(status);}}}//连接 和 发送 - 第二步if (options.type == "GET") {xhr.open("GET", options.url + "?" + params, true);xhr.send(null);} else if (options.type == "POST") {xhr.open("POST", options.url, true);//设置表单提交时的内容类型xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xhr.send(params);}
}
//格式化参数
function formatParams(data) {var arr = [];for (var name in data) {arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));}arr.push(("v=" + Math.random()).replace(".",""));return arr.join("&");
}

/*-----------  示例二  ---------------*/
function Ajax(type, url, data, success, failed){// 创建ajax对象var xhr = null;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();} else {xhr = new ActiveXObject('Microsoft.XMLHTTP')}var type = type.toUpperCase();// 清除缓存var random = Math.random();if(typeof data == 'object'){var str = '';for(var key in data){str += key+'='+data[key]+'&';}data = str.replace(/&$/, '');}if(type == 'GET'){if(data){xhr.open('GET', url + '?' + data, true);} else {xhr.open('GET', url + '?t=' + random, true);}xhr.send();} else if(type == 'POST'){xhr.open('POST', url, true);// 如果需要像 html 表单那样 POST 数据,请使用 setRequestHeader() 来添加 http 头。xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xhr.send(data);}// 处理返回数据xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){success(xhr.responseText);} else {if(failed){failed(xhr.status);}}}}
}// 调用
var data= {name:'asher',sex:'male'};
Ajax('get', './data.json', data, function(data){console.log(data);
}, function(error){console.log(error);
});
 

转载于:https://www.cnblogs.com/zhou195/p/8086245.html

ajax封装----原生相关推荐

  1. java原生封装_[Java教程]原生AJAX封装

    [Java教程]原生AJAX封装 0 2016-07-12 13:00:08 回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出!1 var ajaxHelper = { 2 ...

  2. Ajax工作原理和原生JS的ajax封装

    前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...

  3. 封装原声ajax,原生AJAX封装的简单实现

    回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出! var ajaxHelper = { /*1.0 浏览器兼容的方式创建异步对象*/ makeXHR: function ( ...

  4. 进一步封装axios并调用其读取数据(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)

    注意!!!(修改于2020年7月18日) 在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据 报错截图如下 报错内容: {&quo ...

  5. 原声ajax的函数式封装,原生 js 封装 ajax的两种方式(get,post)

    /*ajax封装 @param option:传入一个对象 属性分别为(顺序可以打乱): url:请求的路径 type:请求的不同类型get或post data:发送的数据,格式:key1=value ...

  6. ajax封装,promise封装ajax,axios封装

    一.概念 ajax: 核心XMLHttpRequest ,在不重新加载整个页面的情况下更新部分数据 promise: 承诺,只有三种模式( pending:执行状态.fulfilled:已成功.rej ...

  7. JavaScript-初识ajax、ajax封装、及json对象使用(上)

    JavaScript-初识ajax.ajax封装.及json对象使用(上!) 一.初识ajax 1.什么是ajax呢 ajax 的全称是Asynchronous JavaScript and XML, ...

  8. php 小程序自定义图,微信小程序之如何使用自定义组件封装原生 image 组件

    零.问题的由来 一般在前端展示图片时都会碰到这两个常见的需求: 图片未加载完成时先展示占位图,等到图片加载完毕后再展示实际的图片. 假如图片链接有问题(比如 404),依然展示占位图.甚至你还可以增加 ...

  9. 接口的mime类型ajax,Ajax的原生实现关于MIME类型的使用方法

    问题描述 下面的例子是一个Ajax的post请求的代码,这段代码在测试运行的时候,发现返回的状态码为400,服务器不能理解的请求,后来经过查看和修改,发现只需要将下面的代码稍微改造一下就好了 原代码 ...

最新文章

  1. Namomo Test Round 1的B Hat[概率题:详解]
  2. 我对汇编中进位和溢出的理解
  3. Hashtable学习笔记
  4. Ribbon自带负载均衡策略比较
  5. 修改了WINCE自带的驱动程序后如何编译
  6. 电开大计算机应用基础作业,2016年电大-电大计算机应用基础作业 答案.doc
  7. Python查找包含指定字符串的所有Office文档
  8. 【02】查询优化的技术范围
  9. centos6.7环境下kvm虚拟机之virt-install和virsh及virt-manager工具的使用
  10. 程序员能力的四个境界(转)
  11. [Bullet3]常见物体和初始化
  12. Java——聊聊JUC中的线程中断机制 LockSupport
  13. 等时替代模型( Isotemporal Substitution Model)
  14. DSP在SYS/BIOS下串口(UART)接收之环形队列
  15. PCIe(peripheral component interconnect express)
  16. 计算机三级哪个实用点,考计算机三级哪个简单?哪个会实用点?
  17. ctfshow 网络迷踪-爆破不了
  18. 造纸机系统的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
  19. 【博客181】查看一个端口是否被占用
  20. android读写sd卡代码,android读写SD卡中的文件 demo

热门文章

  1. linux 下vim的使用(必看)
  2. VTK和ITK中的坐标系统
  3. 06|音频降噪概述(2)一基于AI降噪
  4. 网络工程实验标准ACL配置
  5. 一次小系统的快速开发经历
  6. 【Python 第16课】 字符串格式化
  7. linux sudo 权限_在Linux中使用sudo委派权限
  8. IP机顶盒系列一,WIZNET解决方案
  9. Android x86开源项目虚拟机镜像下载(VM/Vbox)
  10. Tomcat的catalina.out文件过大问题(logrotate方式)