框架代码如下:

// 使用封装方法的人只关心提供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="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小框架的更多相关文章

  1. iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  2. 分析一个类似于jquery的小框架

    在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...

  3. 自己封装的一个Ajax小框架

    在经历了Jsp实训的惨痛教训后,特意花了点时间学习Ajax,学完后自我感觉良好,于是写了如下一个小框架: /** * frameAjax * * 参数: * paramsObj: Json * req ...

  4. 自己封装一个简单的ajax插件

    function myAjax(obj) { var xmlHttp; //保存xmlHttpRequest对象 var type = obj.requestType; //保存请求方式 var ca ...

  5. 封装一个简单的ajax请求

    记录自己第一次封装ajax,肯定有很多考虑不周到,如有错误请指出,本人必将虚心改正. /** * * @param {Object} obj =>header:请求头:url:请求地址:meth ...

  6. 分析一个类似于jquery的小框架 (2)

    核心构造函数 (function ( window, undefined ) { // 定义Itcast构造函数 function Itcast ( selector ) { return new I ...

  7. 利用jdbc简单封装一个小框架(类似DBUtils)

    利用jdbc写的一个类似DBUtils的框架 package com.jdbc.orm.dbutils; import java.io.IOException; import java.io.Inpu ...

  8. 【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享(单文件版本)

    整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...

  9. 实现AOP功能的封装与配置的小框架

    内容 java基础巩固笔记 - 实现AOP功能的封装与配置的小框架 设计(目录): XXX = java.util.ArrayList中 代码 Advice接口 MyAdvice类 BeanFacto ...

随机推荐

  1. 北京Uber优步司机奖励政策(2月6日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. 10670 Work Reduction (贪心 + 被题意坑了- -)y

    Problem C: Work Reduction Paperwork is beginning to pile up on your desk, and tensions at the workpl ...

  3. 版本控制Subversion TortoiseSVN apache VisualSVN笔记(转载)

    转载于http://blog.sina.com.cn/s/blog_6b94d5680101m7ah.html Subversion(简称svn)是近年来崛起的版本管理软件,是cvs的接班人.目前,绝 ...

  4. Cactus入门

    这是一个WebProject,有关Cactus用法详见本文测试用例 首先是web.xml <?xml version="1.0" encoding="UTF-8&q ...

  5. invoke-command

    远程执行命令: invoke-command -ComputerName $server -Credential $cred -ScriptBlock{param($server,$UserName, ...

  6. Test-NetConnection

    有了PowerShell 4.0,排除网络故障的日子就会轻松很多.Test-NetConnection cmdlet将多个测试整合到了一个简单的有几个参数的命令当中.例如,命令Test-NetConn ...

  7. jquery如何让滚动条默认在最底部

    $(document).ready(function() { $("#content").scrollTop($("#content")[0].offsetHe ...

  8. php中error_report函数的含义及各参数含义

    个错误级别,如下: 1        E_ERROR          致命的运行时错误.错误无法恢复过来.脚本的执行被暂停2        E_WARNING        非致命的运行时错误.脚本 ...

  9. Hdu 2473(并查集删除操作) Junk-Mail Filter

    有木有非常吊 加强 加强版   啊  ,看了都不敢做了   .后来先做了食物链这个我还是看过的.但还是A不掉,没明确神魔意思 .总而言之.大牛的博客是个好东西.我就那么看了一下,还是不懂怎莫办啊,哎, ...

  10. arcgis python 获得所有的工具名称

    #######################import  arcgisscripting import  string; gp = arcgisscripting.create(9.3); ### ...