原生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 协议的基础上以异步的方式与服务器进行通信. 异 ...
随机推荐
- 循环冗余校验(CRC)
冗余码 CRC和海明校验类似,也是有效信息(k位)+校验信息(r位),需要满足N=k+r≤2r-1 生成多项式G(X) 定义:收发双方约定的一个(r+1)位二进制数,发送方利用G(X)对信息多项式做模 ...
- React Native实践总结一
一.React的世界观1.通过改变state来改变视图视图不用考虑如何改变自己,把state画出来即可.2.变量不可变通过创建一个新的state来更改state,使得变更可追踪,不容易因为其他部分修改 ...
- Linux学习笔记2-CentOS7安装tomcat8
1.下载tomcat:apache-tomcat-8.5.16.tar.gz 下载地址:http://mirrors.tuna.tsinghua.edu.cn/apache/tomcat/tomcat ...
- Java-java.lang.NoClassDefFoundError:brave.Span.Kind
今天在升级某个框架时,遇到如标题描述的问题.这个问题应该说还是比较明显的,首先去搜了一下NoClassDefFoundError的问题,参考这篇博客:https://www.cnblogs.com/x ...
- Django学习笔记--数据库中的单表操作----增删改查
1.Django数据库中的增删改查 1.添加表和字段 # 创建的表的名字为app的名称拼接类名 class User(models.Model): # id字段 自增 是主键 id = models. ...
- maven clean后 编译报错
<plugins> <plugin> <artifactId>maven-compiler-plugin</artifactId> <config ...
- 特斯拉通过GitHub发布了这些源代码,用意何在?
特斯拉多年来一直在软件社区使用开源软件而不遵守许可证. 在迈向合规性的一步中,特斯拉现在正在发布其软件的一些部分,这对特斯拉黑客和安全研究人员来说非常有用. 特斯拉是一家软件强大的公司,它一直在使用大 ...
- 26.LockSupport线程阻塞工具
import java.util.concurrent.locks.LockSupport; /** * 线程阻塞工具类:LockSupport * 可以在线程内任意位置让线程阻塞 */ public ...
- Spring Transaction Propagation
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11530611.html REQUIRED behavior Spring REQUIRED behav ...
- Go(三)面向对象
封装数据和行为 数据封装 结构定义 type Employee struct { Id string Name string Age int } field后面没有逗号 实例创建及初始化 e := E ...