ajax封装----原生
/*-------------- 示例一 ----------------*/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封装----原生相关推荐
- java原生封装_[Java教程]原生AJAX封装
[Java教程]原生AJAX封装 0 2016-07-12 13:00:08 回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出!1 var ajaxHelper = { 2 ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- 封装原声ajax,原生AJAX封装的简单实现
回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出! var ajaxHelper = { /*1.0 浏览器兼容的方式创建异步对象*/ makeXHR: function ( ...
- 进一步封装axios并调用其读取数据(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
注意!!!(修改于2020年7月18日) 在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据 报错截图如下 报错内容: {&quo ...
- 原声ajax的函数式封装,原生 js 封装 ajax的两种方式(get,post)
/*ajax封装 @param option:传入一个对象 属性分别为(顺序可以打乱): url:请求的路径 type:请求的不同类型get或post data:发送的数据,格式:key1=value ...
- ajax封装,promise封装ajax,axios封装
一.概念 ajax: 核心XMLHttpRequest ,在不重新加载整个页面的情况下更新部分数据 promise: 承诺,只有三种模式( pending:执行状态.fulfilled:已成功.rej ...
- JavaScript-初识ajax、ajax封装、及json对象使用(上)
JavaScript-初识ajax.ajax封装.及json对象使用(上!) 一.初识ajax 1.什么是ajax呢 ajax 的全称是Asynchronous JavaScript and XML, ...
- php 小程序自定义图,微信小程序之如何使用自定义组件封装原生 image 组件
零.问题的由来 一般在前端展示图片时都会碰到这两个常见的需求: 图片未加载完成时先展示占位图,等到图片加载完毕后再展示实际的图片. 假如图片链接有问题(比如 404),依然展示占位图.甚至你还可以增加 ...
- 接口的mime类型ajax,Ajax的原生实现关于MIME类型的使用方法
问题描述 下面的例子是一个Ajax的post请求的代码,这段代码在测试运行的时候,发现返回的状态码为400,服务器不能理解的请求,后来经过查看和修改,发现只需要将下面的代码稍微改造一下就好了 原代码 ...
最新文章
- Namomo Test Round 1的B Hat[概率题:详解]
- 我对汇编中进位和溢出的理解
- Hashtable学习笔记
- Ribbon自带负载均衡策略比较
- 修改了WINCE自带的驱动程序后如何编译
- 电开大计算机应用基础作业,2016年电大-电大计算机应用基础作业 答案.doc
- Python查找包含指定字符串的所有Office文档
- 【02】查询优化的技术范围
- centos6.7环境下kvm虚拟机之virt-install和virsh及virt-manager工具的使用
- 程序员能力的四个境界(转)
- [Bullet3]常见物体和初始化
- Java——聊聊JUC中的线程中断机制 LockSupport
- 等时替代模型( Isotemporal Substitution Model)
- DSP在SYS/BIOS下串口(UART)接收之环形队列
- PCIe(peripheral component interconnect express)
- 计算机三级哪个实用点,考计算机三级哪个简单?哪个会实用点?
- ctfshow 网络迷踪-爆破不了
- 造纸机系统的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
- 【博客181】查看一个端口是否被占用
- android读写sd卡代码,android读写SD卡中的文件 demo