封装原生Ajax
var Chef = {
createAjax:function() {
var xhr = null;
try {
//IE系列浏览器
xhr = new ActiveXObject("microsoft.xmlhttp");
} catch (e1) {
try {
//非IE浏览器
xhr = new XMLHttpRequest(); } catch (e2) {
window.alert("您的浏览器不支持ajax,请更换!");
}
}
return xhr;
},
ajax:function(conf) {
// 初始化 //type参数,可选
var type = conf.type,
//url参数,必填
url = conf.url,
//data参数可选,只有在post请求时需要
data = conf.data,
//datatype参数可选
dataType = conf.dataType,
//回调函数可选
success = conf.success;
if (type == null){
//type参数可选,默认为get
type = "get";
} if (dataType == null){
//dataType参数可选,默认为text
dataType = "text";
} // 创建ajax引擎对象
var xhr = this.createAjax();
// 打开
xhr.open(type, url, true);
// 发送
if (type == "GET" || type == "get") {
xhr.send(null);
} else if (type == "POST" || type == "post") {
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if(dataType == "text"||dataType=="TEXT") {
if (success != null){
//普通文本
success(xhr.responseText);
}
}else if(dataType=="xml"||dataType=="XML") {
if (success != null){ //接收xml文档
success(xhr.responseXML);
}
}else if(dataType=="json"||dataType=="JSON") {
if (success != null){
//将json字符串转换为js对象
success(eval("("+xhr.responseText+")"));
}
}
}
};
}
}
使用方法:
Chef.ajax({
type:"post",
url:"../data/data.json",
data:"name=dipoo&info=good",
dataType:"json",
success:function(data){
alert(data.result);
}
});
封装原生Ajax的更多相关文章
- js 封装原生ajax
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
- vue实践---vue结合 promise 封装原生ajax
有时候不想使用axios这样的外部依赖,想自己封装ajax,这里有两种方法 方法一,在单个页面内使用 封装的代码如下: beforeCreate () { this.$http = (() => ...
- 原生ajax解析&封装原生ajax函数
前沿:对于此篇随笔,完是简要写了几个重要的地方,具体实现细节完在提供的源码做了笔记 <一>ajax基本要点介绍--更好的介绍ajax 1. ajax对象中new XMLHttpReques ...
- ES6封装原生ajax请求
http (data) { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.onrea ...
- 原生AJAX请求教程
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- js原生Ajax(十四)
一.XMLHttpRequest [使用XMLHttpRequest时,必须将html部署到web服务器中]1) 指定请求1.实例化eg: var http = new XMLHttpReque ...
- 原生 ajax 请求
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- js原生Ajax的封装与使用
一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...
- js原生Ajax 的封装和原理
原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
随机推荐
- 20145213《Java程序设计》第一周学习总结
20145213<Java程序设计>第一周学习总结 教材学习内容总结 期待了一个寒假,终于见识到了神秘的娄老师和他的Java课.虽说算不上金风玉露一相逢,没有胜却人间无数也是情理之中,但娄 ...
- 【XLL 框架库函数】 Excel/Excel12f
Excel/Excel12f 这两个库函数分别包装了 C API 中的 Excel4 和 Excel12 函数,它们会检查函数没有参数时是否为零,它将表明创建临时的 XLOPER 或 XLOPER12 ...
- 35. Search Insert Position
题目: Given a sorted array and a target value, return the index if the target is found. If not, return ...
- October 5th 2016 Week 41st Wednesday
Don't follow the crowd, let the crowd follow you. 不要随波逐流,要引领潮流. But to be a good follower is already ...
- 模拟赛1101d1
完美的序列(sequence)Time Limit:1000ms Memory Limit:64MB题目描述LYK 认为一个完美的序列要满足这样的条件:对于任意两个位置上的数都不相同.然而并不是所有的 ...
- qt_文本编辑器实现_附带详细注释和源码下载
源码下载: 链接: http://pan.baidu.com/s/1c21EVRy 密码: qub8 实现主要的功能有:新建,打开,保存,另存为,查找(查找的时候需要先将光标放到最下面位置才能查全,不 ...
- Android 图片闪烁(延迟切换)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...
- UITableView和UICollectionView的方法学习一
参考资料 UITableView UICollectionView UICollectionViewDataSource UICollectionViewDelegate UICollectionVi ...
- DB2 Add hidden Identity columns
An identity column contains a unique numeric value for each row in the table. DB2® can automatically ...
- Struts2拦截器之ExceptionMappingInterceptor(异常映射拦截器)
一.异常拦截器是什么? 异常拦截器的作用是提供一个机会,可以设置在action执行过程中发生异常的时候映射到一个结果字符串而不是直接中断. 将异常整合到业务逻辑中,比如在分层系统的调用中可以从底层抛出 ...