原生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 协议的基础上以异步的方式与服务器进行通信. 异 ...
随机推荐
- C#设计模式:原型模式(Prototype Pattern)
一,原型模式:通过将一个原型对象传给那个要发动创建的对象,这个要发动创建的对象通过请求原型对象拷贝它们自己来实施创建.(包含深度克隆和浅克隆) 主要面对的问题是:“某些结构复杂的对象”的创建工作:由于 ...
- 【JAVA】 04-Java中的多线程
链接: 笔记目录:毕向东Java基础视频教程-笔记 GitHub库:JavaBXD33 目录: <> <> 内容待整理: 多线程引入 概述 多线程: 进程:正在执行中的程序,其 ...
- 2018-2-13-win10-uwp-BadgeLogo-颜色
title author date CreateTime categories win10 uwp BadgeLogo 颜色 lindexi 2018-2-13 17:23:3 +0800 2018- ...
- shell函数的结束与返回值
- 字符串函数-unquote()函数
字符串函数顾名思意是用来处理字符串的函数.Sass 的字符串函数主要包括两个函数: unquote($string):删除字符串中的引号: quote($string):给字符串添加引号. 1.unq ...
- mongodb 面试题
mongodb 面试题总结 1 nosql和关系型数据库的区别 NoSQL是非关系型数据库,NoSQL = Not Only SQL. 关系型数据库采用的结构化的数据,NoSQL采用的是键值对的方式存 ...
- .net core 操作oracle
依赖项——右键——管理NuGet程序包——浏览——输入以下内容 oracle.ManagedDataAccess.core(记得勾选包括预发行版) 在页面中加入操作数据库的方法 public IAct ...
- cassandra集群
cassandra是分布式数据库属于nosql,用于处理大量商用服务器上的大量数据,提供高可用性,无单点故障. Cassandra在其节点之间具有对等分布式系统,并且数据分布在集群中的所有节点之间. ...
- 全球的IPv6部署急剧增加,但中国几乎没有一个地方部署?
全球的IPv6部署继续增加,但中国在IPv6方面还需要努力,从部署图上分析,中国几乎没有几个地方是普及IPv6的.这6年来,自世界IPv6发布以来,全球网络和服务提供商的IPv6部署水平急剧增加.如图 ...
- wxpython总体
人到夏天就特别懒 from math import * import wx def sin_fun(event): a=text_angle.GetValue() b=sin(radians(floa ...