封装原生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 5831 Rikka with Parenthesis II (贪心) -2016杭电多校联合第8场
题目:传送门. 题意:T组数据,每组给定一个长度n,随后给定一个长度为n的字符串,字符串只包含'('或')',随后交换其中两个位置,必须交换一次也只能交换一次,问能否构成一个合法的括号匹配,就是()( ...
- curl命令 抓取网络数据相应头
curl --verbose --data "Password=123&Username=158101068&url=http://m.vancl.com/" & ...
- IOS - 本地消息推送
第一步:创建本地推送 // 创建一个本地推送 UILocalNotification *notification = [[[UILocalNotification alloc] init] autor ...
- php数据访问(批量删除)
批量删除: 首先给每一行加上复选框,也就是在自增长列内加入checkbox.因为这里可以多选,也可以单选,所以在传值的时候需要传一个数组来进行处理,所以复选框name的值设定一个数组.传值都是传的va ...
- sql的优化相关问题
这篇文章写的真心不错,值得仔细拜读,所以将其转载过来了. 一. 分析阶段 一 般来说,在系统分析阶段往往有太多需要关注的地方,系统各种功能性.可用性.可靠性.安全性需求往往吸引 ...
- 使用Gson送解析Json格式
Java bean: package com.jingle.a; public class Person { public String name; public int age; public Pe ...
- 128. Longest Consecutive Sequence(leetcode)
Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...
- max virtual memory areas vm.max_map_count [65530] likely too low, increase to at least [262144]
sh- /etc/sysctl.conf vm.max_map_count = #在/etc/sysctl.conf追加上面一条 #并执行命令: sysctl -p
- Genymotion刷入谷歌应用市场以及获取root权限
Genymotion刷入谷歌应用市场以及获取root权限 - 推酷http://www.tuicool.com/articles/rEV3aa6 刷入gapp, arm框架,supersu的包要注意, ...
- 无废话ExtJs 入门教程十[单选组:RadioGroup、复选组:CheckBoxGroup]
无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...