框架代码如下:

// 使用封装方法的人只关心提供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. 问题-[Delphi]PixelFormat 图像颜色的数据格式

     PixelFormat: (指定图像中每个像素的颜色数据的格式) Delphi                                        微软                  ...

  2. Extending JavaScript Natives

    Most built-in JavaScript types are constructors whose prototypes contain the methods and other prope ...

  3. delphi 控制 EXCEL 数据透视表

    虽说报表多又难做,做报表相当容易. 做报表也可以偷懒的,超级实用又省事.只需要做一个报表,这个报表里面包括几乎所有的数据字段,然后将查询到的数据导出到 excel中,利用excel自带的“数据透视”功 ...

  4. C++库研究笔记——生成一组随机数

    当试图用 srand(time(0)) rand() 生成一组随机数时发现,生成的数字很多都是「一样」的 经过测试:srand(seed); rand() 生成随机数,当seed一样时,生成的随机数相 ...

  5. Mac RTX

    http://bbs.weiphone.com/read-htm-tid-1876850.html 公司的rtx还是2010的,如果是2011的就有mac版的了.直接到官网下. 那还是用2010的,尼 ...

  6. 同步窗体移动 FormMove

    方法2 unit Unit1;interfaceuses  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants,  Sy ...

  7. MySQL主主复制+LVS+Keepalived实现MySQL高可用性

    http://bestvivi.com/2015/09/09/MySQL%E4%B8%BB%E4%B8%BB%E5%A4%8D%E5%88%B6+LVS+Keepalived%E5%AE%9E%E7% ...

  8. LoC

    对于图片.Flash等非文本文件统计文件数量.文件大小: 对于文本文件统计文件数量.文本行数.字符数:

  9. 【转】C++里定义全局变量和函数常用方法

    http://blog.csdn.net/niying/article/details/637084 1:在头文件是声明变量,然后在使用的文件中用exten标识. ".h": in ...

  10. Ⅶ.spring的点点滴滴--自定义对象行为

    承接上文 自定义对象行为 .net篇(环境为vs2012+Spring.Core.dll v1.31) public class lifeCycle : Spring.Objects.Factory. ...