js原生Ajax的封装与使用
2015-05-29 15:18
555 查看
一、原生Ajax代码的封装如下:
二、方法如下:
三、代码及Demo下载
(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>
三、代码及Demo下载
相关文章推荐
- Java、javascript、JS和JScript区别
- Jackson 框架,轻易转换JSON
- JavaScript-函数
- JavaScript 数据类型 、JS 变量 、JS 对象
- Javascript类的写法
- JavaScript-变量
- JavaScript-注释可用于提高代码的可读性
- JavaScript自学第2讲:JavaScript快速入门
- js中代码分片执行
- 南京学思利用Json进行数据传输
- Css3+javascript实现“唯美”照片墙
- datepicker 获取日期
- JavaScript-JavaScript 语句\
- JavaScript自学第1讲:JavaScript基本介绍
- this 的使用方法 —— javascript中的this讲解!
- Web_JavaScript_去除JS字串两边空格;
- JSON详解
- JSON格式
- JavaScript- 通常用于操作 HTML 元素\通过指定的 id 来访问 HTML 元素,并改变其内容\写到文档输出
- ExtJS如何取得GridPanel当前选择行数据对象 - nuccch的专栏 - 博客频道 - CSDN.NET