原生AJAX的封装
/**调用AJAX
ajaxPlug.openajax({
url: "./TestXHR.aspx", //请求地址
type: "POST", //请求方式
data: { name: "super", age: 20 }, //请求参数
dataType: "json",
success: function (response, xml) {
// 此处放成功后执行的代码
},
errorEvent: function (status) {
// 此处放失败后执行的代码
}
});
**/ (function(window,undefined){
var ajaxPlug=function(){};
ajaxPlug.prototype = {
openajax:function(options){
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = this.formatParams(options.data);
//创建 - 非IE6 - 第一步
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else { //IE6及其以下版本浏览器
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
};
//连接 和 发送 - 第二步
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);
}
//接收 - 第三步
if(xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML);
} else {
options.errorEvent && options.errorEvent(status);
}
}; },
formatParams:function(data){
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".",""));
return arr.join("&");
} }
window.ajaxPlug=ajaxPlug;
})(window,undefined);
var ajaxPlug= new ajaxPlug(); ajaxPlug.openajax({
url: "./TestXHR.aspx", //请求地址
type: "POST", //请求方式
data: { name: "super", age: 20 }, //请求参数
dataType: "json",
success: function (response, xml) {
// 此处放成功后执行的代码
}, errorEvent: function (status) {
// 此处放失败后执行的代码
}
});
原生AJAX的封装的更多相关文章
- 原生ajax与封装的ajax使用方法
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
- js原生Ajax的封装与使用
一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...
- js原生Ajax 的封装和原理
原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
- 原生ajax函数封装
原生ajax函数 function ajax(json){ json=json || {}; if(!json.url){ return; } json.data=json.data || {}; j ...
- js实现原生Ajax的封装及ajax原理详解
原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
- 原生ajax解析&封装原生ajax函数
前沿:对于此篇随笔,完是简要写了几个重要的地方,具体实现细节完在提供的源码做了笔记 <一>ajax基本要点介绍--更好的介绍ajax 1. ajax对象中new XMLHttpReques ...
- 原生ajax方法封装
/** * @function ajax request * @fields ajaxName:请求名称,method:请求方法,headers:setRequestHeader自定义部分,url:接 ...
- 原生AJAX请求教程
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- 原生 ajax 请求
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
随机推荐
- HR面试总结
求职面试HR最欣赏的自我介绍 2015-02-25 来源:www.cnrencai.com 浏览:391 明明很有能力的你,在面试中却不能发挥出色?来看看是不是自我介绍环节出了问题. 回答面试题目 ...
- elasticsearch 基础 —— 请求体查询
请求体查询 简易 查询 -query-string search- 对于用命令行进行即席查询(ad-hoc)是非常有用的. 然而,为了充分利用查询的强大功能,你应该使用 请求体 search API, ...
- Linux学习笔记之磁盘与文件系统的管理
三.Linux磁盘与文件系统的管理 MBR扇区(512B) 磁盘的分区组成 Boot sector 扇区(用来装引导程序) Super block 记录inode与Block的信息 Inod ...
- Cent OS 7 VNC 安装
关闭防火墙 关闭selinux 挂载光盘到本地 #yum install tigervnc-server -y #cp /lib/systemd/system/vncserver@.service / ...
- 九、Rxjs请求对Observable进行封装
1.引入 Http.Jsonp.Rxjs 三个模块 2.请求中添加一个 .map(res => res.json) 问题 1.Property 'map' does not exist on t ...
- Sass函数:unit()函数
unit() 函数主要是用来获取一个值所使用的单位,碰到复杂的计算时,其能根据运算得到一个“多单位组合”的值,不过只充许乘.除运算: >> unit(100) "" & ...
- BZOJ3926 诸神眷顾的幻想乡
传送门 树上SAM! 显然如果树上一条一条字符串放的话那么是n^2的w 但是 题目的性质非常吼啊! 20个叶子节点 我们就可以 把所有叶子结点拎出来当根 全部扔到一个SAM里 就吼啦 最后的答案是 ...
- springBoot02- 配置文件读取测试
1.照例登陆http://start.spring.io/ ,改个项目名(Artifact),然后下载导入Eclipse 2. 项目结构如下, 在pom中添加web依赖(不添加,就找不到RestCon ...
- Spring学习总结(2)- AOP
一,什么是AOP AOP(Aspect Oriented Programming)意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中 ...
- Java Web学习总结(6)Cookie/Session
一.会话的概念 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 二.会话过程中要解决的一些问题 每个用户在使用浏览器与服务器进行 ...