封装原生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),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
随机推荐
- docker基础命令
docker version ...
- iOS - iPhone开发 UILocalNotification的使用
OS下的Notification的使用 Notification 是智能手机应用编程中非常常用的一种传递信息的机制,而且可以非常好的节省资源,不用消耗资源来不停地检查信息状态(Pooling),在iO ...
- swift选择类或结构体
按照通用的准则,当符合一条或多条以下条件时,请考虑构建结构体: 结构体的主要目的是用来封装少量相关简单数据值. 有理由预计一个结构体实例在赋值或传递时,封装的数据将会被拷贝而不是被引用. ? 任何在结 ...
- [Linux] linux awk命令详解
reference : http://www.cnblogs.com/ggjucheng/archive/2013/01/13/2858470.html 简介 awk是一个强大的文本分析工具,相对于g ...
- maven配置httpclient3.X jar包
<dependency> <groupId>commons-logging</groupId> <artifactId>commons-logging& ...
- Sightseeing(poj 3463)
题意:给出n个点m条单向边,求最短路的道路条数和比最短路大1的道路条数的和. /* 用Dijkstra更新2*n次,来更新出所有点的最短路和次短路,顺便更新方案数. */ #include<cs ...
- 通过mysql命令行理解mysql
引言:工具不可谓给我们的生活带来了便利,但有些时候我们却忘记了事物本身的意义.在大多数人都在追捧甚至是盲从各种各样的工具有多先进的时候,你是否有反思过:你目前是否有使用它的资格. 假设你学会了使用一款 ...
- DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素
1.DOM 方法 一些 DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTa ...
- MVC - 11(下)jquery.tmpl.js +ajax分页
继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...
- Oracle Redo Log
http://blog.itpub.net/27039319/viewspace-2120623/ 11.2和11.2以下的区别:http://blog.itpub.net/27039319/view ...