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= ...
随机推荐
- CSS定义网页滚动条
(一)滚动条样式主要涉及到如下CSS属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容overflow: auto; 在需要时内容会自动添加滚动条overflow ...
- pyopenssl
https://pyopenssl.readthedocs.org/en/stable/ pyopenssl是一个封装了openssl的python模块. 使用它可以方便地进行一些加解密操作. 1.产 ...
- Java学习笔记--AWT事件处理
1.事件模型 在整个事件触发和相应的过程中,主要涉及一下3类对象 (1) 事件源 : 引起时间的GUI对象,如各类组件(Button,Label,TextField),容器组件(Frame,panel ...
- iotop
iotop命令是专门显示硬盘IO的命令,界面风格类似top命令.这个命令只有在kernelv2.6.20及以后的版本中才有. 1.直接yum安装,rh6的光盘里有包. yum install io ...
- 可变参数列表-Java SE5新特性(转)
Java1.5增加了新特性:可变参数:适用于参数个数不确定,类型确定的情况,java把可变参数当做数组处理.注意:可变参数必须位于最后一项.当可变参数个数多于一个时,必将有一个不是最后一项,所以只支持 ...
- hadoop 2.3 集群总结
用了近两个礼拜的摸索终于搭建好了hadoop集群,测试性能也符合预期. centos6.4下hadoop2.3集群总结如下: 关于环境的设置: 1.关闭selinux (反复折腾了好多次) vi /e ...
- 【转】Linux下Android ADB驱动安装详解
原文网址:http://blog.csdn.net/zhenwenxian/article/details/5901350 Linux下Android ADB驱动安装详解 概述 最近由于内置的合作商比 ...
- C#模拟网站用户登录
我们在写灌水机器人.抓资源机器人和Web网游辅助工具的时候第一步要实现的就是用户登录.那么怎么用C#来模拟一个用户的登录拉?要实现用户的登录,那么首先就必须要了解一般网站中是怎么判断用户是否登录的. ...
- MySql 中的常见问题解决方法
一.关键字做字段 ,mssql的做法是[关键字],mysql的做法是 `关键字` ;ps:(` 是 tab键上面的一个按键) 二.mssql数据导入到mysql: 1.mssql导出insert语句( ...
- ios实现程序切入后台，实现后台任务
首先,iOS 会再持续切入后台,给我们5秒钟的时间去处理相关数据,5秒后,程序不会再执行任何代码,处于挂起状态. // 项目需求,按下Home切换后台后向服务器传一些数据,废话不多说,直接上代码 /* ...