原生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 协议的基础上以异步的方式与服务器进行通信. 异 ...
随机推荐
- IIS故障 应用程序池“XXX”提供服务的进程在与 Windows Process Activation Service 通信时出现严重错误。该进程 ID 为“XXXX”。数据字段包含错误号。
(尝试失败,但觉得有可行性) 参考https://www.cnblogs.com/qidian10/p/6028784.html https://yq.aliyun.com/articles/6434 ...
- C#面试 笔试题 三
1.传入某个属性的set方法的隐含参数的名称是什么? value,它的类型和属性所声名的类型相同. 2.C#支持多重继承么? 类之间不支持,接口之间支持.类对接口叫做实现,不叫继承. 3.C#中所 ...
- GitHub 风格的 Markdown 语法
GitHub 风格的 Markdown 语法 [译] GitHub 风格的 Markdown 语法 Original: GitHub Flavored Markdown - GitHub Help T ...
- bzoj3097 Hash Killer I
Hash Killer I Time Limit: 5 Sec Memory Limit: 128 MBSec Special Judge Description 这天天气不错,hzhwcmhf神犇给 ...
- php pdo_mysql扩展安装
本文内容是以 CentOS 为例,红帽系列的 Linux 方法应该都是如此,下面就详细说明步骤,在这里严重鄙视哪些内容??隆⑺档脑悠咴影说挠泄 PDO 编译安装的文章. 1.进入 PHP 的软件包 p ...
- spark- PySparkSQL之PySpark解析Json集合数据
PySparkSQL之PySpark解析Json集合数据 数据样本 12341234123412342|asefr-3423|[{"}] 正菜: #-*- coding:utf-8 –*- ...
- axis2获取request方法
修改axis2的请求url-pattern 找到axis2-kernel jar包中axis2.xml配置文件的servicePath配置项,修改成与url-pattern一样的值,这样就改变了请求的 ...
- Go 数组(2)
把同样类型的一个数组赋值给另外一个数组 package main; import "fmt"; func main() { ] string ; array2:=[]string ...
- html5 固定边栏滚动特效
<script src="https://code.jquery.com/jquery.js"></script> //引入jquery <scrip ...
- axios之前端发送get与post请求模板
import axios from "axios"; 一.get mounted() { axios .get( "/api/queryusertree?domId=&q ...