js原生Ajax的封装与使用
一、原生Ajax代码的封装如下:
(function() {
var XHR = {
createStandardXHR: function() {
return new XMLHttpRequest();
},
createIEXHR: function () {
return new ActiveXObject("Microsoft.XMLHTTP");
},
createErrorXHR: function () {
alert("Your browser does not support XMLHTTP.");
return null;
},
createXHR: function() { //创建XMLHttpRequest对象
var xhr = null;
if (window.XMLHttpRequest) {
this.createXHR = this.createStandardXHR; // Firefox, Opera 8.0+,Safari，IE7+
} else {
this.createXHR = this.createIEXHR; // IE5、IE6
}
try {
xhr = this.createXHR();
} catch (e) {
this.createXHR = this.createErrorXHR;
xhr = this.createXHR();
}
return xhr;
},
ajax: function(opts) {
var xhr = this.createXHR(),
ajaxMethod = (opts.type || "GET").toUpperCase(),
isPost = ajaxMethod == "POST",
data = this.param(opts.data),
url = this.buildUrlParam(opts.url, data, isPost);
xhr.open(ajaxMethod, url, opts.async == undefined ? true : opts.async);
if (isPost) {
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
}
if (opts.contentType) {
xhr.setRequestHeader("Content-type", opts.contentType);
}
var stateChange = this.xhrStateChange;
xhr.onreadystatechange = function() {
stateChange(xhr, opts.success, opts.error);
}
xhr.send(isPost ? data : null);
},
buildUrlParam: function(url,data,isPost) {
if (data && !isPost) {
if (url.indexOf("?") < 0) {
url += "?" + data;
} else {
url += "&" + data;
}
}
return url;
},
param: function(data) {
if (!data) {
return null;
}
if (typeof data !== "object") {
return data;
}
var postData = [];
for (var key in data) {
postData.push(key+"="+data[key]);
}
return postData.join("&");
},
xhrStateChange: function(xhr, successFn, failFn) {
if (xhr.readyState == 4) { // 4 = "loaded"
if (xhr.status == 200) { // 200 = OK
successFn(xhr.responseText);
} else {
failFn.call(xhr, xhr.statusText, xhr.status);
}
} else {
failFn.call(xhr, xhr.statusText, xhr.status);
}
}
};
window.ajax = function(opts) {
XHR.ajax.call(XHR, opts);
};
})();
二、方法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>ajax demo02 </title>
<style type="text/css">
.msg {
height: 30px;
color: #ff6347;
margin-top: 10px;
}
</style>
</head>
<body>
<div>员工编号:<input type="text" id="txtNumber" /><input id="btnSearch" type="button" value="查询" /></div>
<div id="searchResult" class="msg"></div>
<div style="margin-top: 100px;">员工姓名:<input type="text" id="txtName" /><input id="btnSave" type="button" value="保存" /></div>
<div id="saveResult" class="msg"></div>
<script src="ajax.js"></script>
<script type="text/javascript">
getDom("btnSearch").onclick = function () {
ajax({
url: "ajax_server/service.aspx?action=search",
data: {
number: encodeURIComponent(getDom("txtNumber").value)
},
success: function (data) {
getDom("searchResult").innerHTML = data;
},
error: function (message, code) {
getDom("searchResult").innerHTML = "出错," + message;
}
});
} getDom("btnSave").onclick = function () {
ajax({
url: "ajax_server/service.aspx?action=save",
type: "post",
data: { Name: encodeURIComponent(getDom("txtName").value) },
success: function (data) {
getDom("saveResult").innerHTML = data;
},
error: function (message, code) { }
});
} function getDom(id) {
return document.getElementById(id);
}
</script>
</body>
</html>
js原生Ajax的封装与使用的更多相关文章
- js原生Ajax 的封装和原理
原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
- JS原生ajax
原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...
- 原生ajax与封装的ajax使用方法
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
- js进阶ajax函数封装（匿名函数作为参数传递）（封装函数引入文件的方式非常好用）
js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...
- JS原生Ajax&Jquery的Ajax技术&Json
1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...
- js原生Ajax(十四)
一.XMLHttpRequest [使用XMLHttpRequest时,必须将html部署到web服务器中]1) 指定请求1.实例化eg: var http = new XMLHttpReque ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- js原生函数一些封装
这是一些js原生封装的函数,主要是为了兼容IE浏览器,如下 获取css样式 function getStyle(ele, prop) { if(window.getComputedStyle) { r ...
- Jquery学习笔记 --ajax删除用户，使用了js原生ajax
主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 <!DOCTYPE html> 2 <html lang= ...
随机推荐
- slf4j教程
slf4j只是一个门面(facet),它不包含具体的实现,而是将一些log4j,java.logging等实现包装成统一的接口.借用下图展示了常用日志文件的关系: 通过上面的图,可以简单的理清关系! ...
- html5 百分比计算
这几天一直在看html5,看到了百分比的计算公式:目标元素的尺寸/上下文元素的尺寸=百分比尺寸.看到这个公式,有点懂,但是有不明白.对于目标元素很容易理解,但是对于上下文元素就不是很好理解了.试了一些 ...
- php json_encode数据格式化2种格式[]和{}
在php中,json格式化数据后,会出现2种形式数据: 1.当array是一个从0开始的连续数组时,json_encode的结果是一个由[]括起来的字符串 $arr = array('a' , 'b' ...
- C语言函数指针变量和指针函数以及指针数组
C语言中,一个函数总是占用一段连续的内存区,而函数名就是该函数所占内存区的首地址.我们可以把函数的这个首地址(或称入口地址)赋予一个指针变量,使该指针变量指向该函数.然后通过指针变量就可以找到并调用这 ...
- 基于zigbee与tiny4412开发板的环境监测系统
一.开发板环境搭建 1.tiny4412 linux系统的布置 参考博客:http://www.cnblogs.com/luoxiang/p/4186391.html 二.boa服务器的搭建 下载 ...
- Keil C51怎样将子程序段定位在固定的地址位？
以下2问题均要用C51解决1.怎样将1个子程序段定位在1个固定的地址位置?例如将 INT BCD2HEX(INT XX)定位在1000H2.如何在EEPROM 中固定的位置存放1字符串?如在200H处 ...
- sizeof与类，继承，virtual的种种
对虚继承层次的对象的内存布局,在不同编译器实现有所区别. 首先,说说GCC的编译器. 它实现比较简单,不管是否虚继承,GCC都是将虚表指针在整个继承关系中共享的,不共享的是指向虚基类的指针. clas ...
- C++ 中捕获整数除零错误
继承自 C 的优良传统, C++ 也是一门非常靠近底层的语言, 可是实在是太靠近了, 很多问题语言本身没有提供解决方案, 可执行代码贴近机器, 运行时没有虚拟机来反馈错误, 跑着跑着就毫无征兆地崩溃了 ...
- 统计维护<第四篇>
SQL Server允许用户手工地控制单独数据库中的统计维护.SQL Server的4个主要的控制紫铜统计的维护的配置如下: 在无索引的列上新建统计(自动创建统计): 更新现有统计(自动更新统计): ...
- yii第一个应用blog
1. 连接到数据库 大多数 Web 应用由数据库驱动,我们的测试应用也不例外.要使用数据库,我们首先需要告诉应用如何连接它.修改应用的配置文件 WebRoot/testdrive/protected/ ...