封装原生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),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
随机推荐
- HDU 5898 odd-even number (数位DP) -2016 ICPC沈阳赛区网络赛
题目链接 题意:一个数字,它每个数位上的奇数都形成偶数长度的段,偶数位都形成奇数长度的段他就是好的.问[L , R]的好数个数. 题解:裸的数位dp, 从高到低考虑每个数位, 状态里存下到当前位为止的 ...
- 3ds max 分离对象
转换为可编辑面片,将编辑环境设置为以下状态: 选中所需面片,分离
- 将rabbitmq整合到Spring中手动Ack
如果要手动ack,需要将Listener container 的 acknowledge 设置为manul,在消费消息的类中需实现ChannelAwareMessageListener接口. over ...
- 解决安卓TextView异常换行,参差不齐等问题
参考:http://blog.csdn.net/u012286242/article/details/28429267?utm_source=tuicool&utm_medium=referr ...
- Good Bye 2015B(模拟或者二进制枚举)
B. New Year and Old Property time limit per test 2 seconds memory limit per test 256 megabytes input ...
- JavaScript基础——理解变量作用域
一旦你开始在JavaScript应用程序中添加条件.函数和循环,就需要理解变量作用域.变量作用域规定了如何确定正在执行的代码行上的一个特定变量名的值. JavaScript允许你既定义全局版本又定义局 ...
- Codeforces Round #364 As Fast As Possible
二分思想,对所要花费的时间进行二分,再以模拟的形式进行验证是否可行. 使用二分法,可以将一个求最优解的问题转化为一个判定问题,优雅的暴力. #include<cstdio> #includ ...
- android 入门-引用库项目
http://blog.csdn.net/arui319/article/details/6831164
- hdu 4278 2012天津赛区网络赛 数学 *
8进制转为10进制 #include<cstdio> #include<iostream> #include<algorithm> #include<cstr ...
- 调整vbox虚拟机下的linux全屏模式及分辨率
>>Step1 在VirtualBox菜单栏中选择[设备]->[安装增强功能] >>Step2 点击右上角的[齿轮]图标,然后选择[Log Out],重新登录即可 lin ...