首页 > 代码库 > 封装一个自己的 Ajax小框架
封装一个自己的 Ajax小框架
框架代码如下：
// 使用封装方法的人只关心提供http的请求方法,url地址,数据,成功和失败的回调方法// 类的构造定义,主要职责就是新建出 XMLHttpRequest 对象var MyXMLHttpRequest = function () { var xmlhttprequest; if (window.XMLHttpRequest) { xmlhttprequest = new XMLHttpRequest(); if (xmlhttprequest.overrideMimeType) { xmlhttprequest.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for (var i = 0; i < activeName.length; i++) { try { xmlhttprequest = new ActiveXObject(activeName[i]); break; } catch (e) { } } } if (xmlhttprequest == undefined || xmlhttprequest == null) { alert("XMLHttpRequest对象创建失败！"); } else { this.xmlhttp = xmlhttprequest; }}//用户发送请求的方法MyXMLHttpRequest.prototype.send = function (method, url, data, callback, failback) { if (this.xmlhttp != undefined && this.xmlhttp != null) { method = method.toUpperCase(); if (method != "GET" && method != "POST") { alert("HTTP的请求方法必须是GET或POST"); return; } if (url == null || url == undefined) { alert("HTTP的请求地址必须设置！"); return; } var tempxmlhttp = this.xmlhttp; this.xmlhttp.onreadystatechange = function () { if (tempxmlhttp.readyState == 4) { if (tempxmlhttp.status == 200) { var responseText = tempxmlhttp.responseText; var responseXML = tempxmlhttp.responseXML; if (callback == undefined || callback == null) { alert("没有设置处理数据正确返回方法！"); alert("返回的数据:" + responseText) } else { callback(responseText, responseXML); } } else { if (failback == undefined || failback == null) { alert("没有设置处理数据正确返回的方法！"); } else { failback(tempxmlhttp.status, tempxmlhttp.statusText); } } } } //解决缓存的转换 if (url.indexOf("?") >= 0) { url = url + "&t=" + (new Date()).valueOf(); } else { url = url + "?t=" + (new Date()).valueOf(); } //解决跨域的问题 if (url.indexOf("http://") >= 0) { url.replace("?", "&"); url = "Proxy?url=" + url; } this.xmlhttp.open(method, url, true); //如果是POST方式,需要设置请求头 if (method == "POST") { this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } //提交请求 this.xmlhttp.send(data); } else { alert("XMLHttpRequest对象创建失败,无法发送数据！"); }}//放弃AJAX请求MyXMLHttpRequest.prototype.abort = function () { this.xmlhttp.abort();}
调用方式如下：
1. 引用js
2. new 一个自定义的 XMLHttpRequest 对象
3. 使用里面的 send 方法进行数据提交
4. 构造 callback 回调处理函数,与 failback 失败的 回调函数
<script src="http://www.mamicode.com/ajax.js" type="text/javascript"></script><script type="text/javascript"> function ValidUser() { //获取客户端内容 var userName = document.getElementById("UserName").value; //进行编码解决 中文乱码 userName = encodeURI(encodeURI(userName)); var xmlhttp = new MyXMLHttpRequest(); xmlhttp.send("POST", "AjaxRequst.ashx", "name="+userName, callback, failback); //xmlhttp.send("GET", "AjaxRequst.ashx?name="+userName, "", callback, failback); } function callback(responseText, responseXML) { //纯文件数据的接受方法 var message = responseText; //将返回的内容添加到DIV层里 var div = document.getElementById(‘message‘); div.innerHTML = message; } function failback(status, statusText) { alert(status +"---"+ statusText); }</script>
封装一个自己的 Ajax小框架
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。