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= ...
随机推荐
- 关于Repeater中绑定的控件不触发ItemCommand事件
今天遇到 在repeater 中使用一个button,点击button然后跳转另外一个页面. html. <asp:Repeater ID="repeater" runat= ...
- dobbo学习
http://www.cnblogs.com/Javame/p/3632473.html 1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以 ...
- javascript区分电脑与手机登陆
<script language="javascript"> function checkMobile() { var pda_user_agent_list = ne ...
- EF有外键的查询
modelBuilder.Entity<ActionMenu>().ToTable("ActionMenu"); modelBuilder.Entity<Acti ...
- 安装 adobe flash player
安装方法: 1. 下载Adobe Flash Player: http://fpdownload.macromedia.com/get/flashplayer/pdc/11.2. ...
- App Store审核指南中文版（2014.10.11更新）
App Store审核指南中文版(2014.10.11更新) 2014-10-11 16:36 编辑: suiling 分类:AppStore研究 来源:CocoaChina 2 8657 App ...
- hdu 3461 Code Lock
http://acm.hdu.edu.cn/showproblem.php?pid=3461 并差集和幂取模 这道题主要是求不可操作区间. #include <cstdio> #inclu ...
- Qt编程之UI与控件布局
当然,大家都知道UI界面可以用Qt Designer在约束环境下设置编辑.ui文件,再将.ui文件转换成对应的ui_XXX.h文件,这头文件中的内容是:用C++语言实现真正的界面布局.uic -o & ...
- Navicat_Preminum
一. 安装 参考http://blog.csdn.net/longyuhome/article/details/79206041. 软件准备• [OYKSOFT.COM]navicat11.0.8_p ...
- 利用autoit自动关闭指定标题窗口
最近使用PL/SQL Developer 比较两个数据库数据差异,因部分表上没有主键,PL/SQL 就会弹出一个确认框提示某某表没有主键.因为有很多表没有主键,就不停的弹出确认窗口,得不停的点击 ...