原生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 协议的基础上以异步的方式与服务器进行通信. 异 ...
随机推荐
- 攻防世界--game
题目链接:https://adworld.xctf.org.cn/task/answer?type=reverse&number=4&grade=0&id=5074 1.准备 ...
- 初涉kafka
前言: 今天终于搭建成功kafka环境,并创建了第一个topic,并生产.消费消息,如下图: 生产: 消费: 心情真的是好激动,大家都说搭建环境其实特别简单,但是我的学习却一直卡在搭建环境上面,不是虚 ...
- azkaban简单使用
步骤 1.通过web服务器创建项目,项目名称和描述都是必须填的2.上传zip包 job定义 1.简单的job一个job就是一个properties文件,只不过文件是以.job结尾,文件里面定义了job ...
- eclipse 设置注释模板
window->preference->java->code styple->code template->Comments Types /** * @author $ ...
- python常用函数 I
iter(iterable) 可以生成一个迭代器. 例子: islice(iterator, int, int) itertools的islice方法为迭代器生成器提供切片操作. 例子: izip_l ...
- ansible笔记(一)--架构图以及工作原理
一.ansible架构图 上图为ansible的基本架构,从上图可以了解到其由以下部分组成: 核心:ansible 核心模块(Core Modules):这些都是ansible自带的模块 扩展模块(C ...
- vsftpd配置详解
匿名用户权限控制: anonymous_enable=YES #是否启用匿名用户 no_anon_password=YES #匿名用户login时不询问口令 anon_upload_enable=(y ...
- java编程实战
线程池为什么要有它: 线程创建要开辟虚拟机栈,释放线程要垃圾回收的. server端要并发访问数据库的. 服务器启动有线程池放着. ----- 线程池的概念: 1.任务队列 2.拒绝策略(抛出异常,直 ...
- poj 2104: K-th Number 【主席树】
题目链接 学习了一下主席树,感觉具体算法思路不大好讲.. 大概是先建个空线段树,然后类似于递推,每一个都在前一个“历史版本”的基础上建立一个新的“历史版本”,每个历史版本只需占用树高个空间(好神奇!) ...
- 【leetcode】1023. Camelcase Matching
题目如下: A query word matches a given pattern if we can insert lowercaseletters to the pattern word so ...