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= ...
随机推荐
- android 监听app进入后台以及从后台进入前台
package com.pinshang.base; import com.pinshang.common.CommonValue; import com.pinshang.investapp.Ent ...
- 数据结构与算法javascript描述
<数据结构与算法javascript描述>--数组篇 导读: 这篇文章比较长,介绍了数组常见的操作方法以及一些注意事项,最后还有几道经典的练习题(面试题). 数组的定义: JavaScri ...
- Scala学习笔记--List、ListBuffer
ListBuffer(列表缓冲) ListBuffer类位于 scala.collection.mutable.ListBuffer val buf = new ListBuffer[Int] va ...
- PMBOK 项目管理 九大知识领域和五大流程
PMI Project Management Institute.PMI 是世界上最大的非盈利机构,是项目管理领域的领导者.PMI制定项目管理行业标准,带领项目管理的研究并提供项目管理的培训,证书 ...
- replace 全局替换 和 数组去空
<script> /*var str = 'a,b,dhhhh,d'; str = str.replace(/h/g,'j'); alert(str);*/ </script> ...
- Oracle trunc函数
--Oracle trunc()函数的用法/**************日期********************/1.select trunc(sysdate) from dual --2011 ...
- Codeforces 509F Progress Monitoring
http://codeforces.com/problemset/problem/509/F 题目大意:给出一个遍历树的程序的输出的遍历顺序b序列,问可能的树的形态有多少种. 思路:记忆化搜索 其中我 ...
- 检测字节流是否是UTF8编码
几天前偶尔看到有人发帖子问“如何自动识别判断url中的中文参数是GB2312还是Utf-8编码” 也拜读了wcwtitxu使用巨牛的正则表达式检测UTF8编码的算法. 使用无数或条件的正则表达式用起来 ...
- 阻碍android程序员发展的几个原因
1应该少看网上的android开发相关技术帖子,一个是错误很多,表达也不清楚,很多都是拷贝来拷贝去的.二个是技术变迁快,很多都过时了,经常看android技术相关帖子,养成了一种惰性,遇到问题不是去看 ...
- 转：更新Android SDK之后Eclipse提示ADT版本过低的一个简易解决办法
拜GFW所赐,对于初学者的我来说,总会出现一些莫名其妙的问题 首先说明一下发表这一篇博文的“历史原因”吧,因为在更新SDK之后,进入Eclipse设置Android SDK目录的时候,会突然说我的版本 ...