封装一个自己的 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="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小框架的更多相关文章
- iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 分析一个类似于jquery的小框架
在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...
- 自己封装的一个Ajax小框架
在经历了Jsp实训的惨痛教训后,特意花了点时间学习Ajax,学完后自我感觉良好,于是写了如下一个小框架: /** * frameAjax * * 参数: * paramsObj: Json * req ...
- 自己封装一个简单的ajax插件
function myAjax(obj) { var xmlHttp; //保存xmlHttpRequest对象 var type = obj.requestType; //保存请求方式 var ca ...
- 封装一个简单的ajax请求
记录自己第一次封装ajax,肯定有很多考虑不周到,如有错误请指出,本人必将虚心改正. /** * * @param {Object} obj =>header:请求头:url:请求地址:meth ...
- 分析一个类似于jquery的小框架 (2)
核心构造函数 (function ( window, undefined ) { // 定义Itcast构造函数 function Itcast ( selector ) { return new I ...
- 利用jdbc简单封装一个小框架(类似DBUtils)
利用jdbc写的一个类似DBUtils的框架 package com.jdbc.orm.dbutils; import java.io.IOException; import java.io.Inpu ...
- 【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享(单文件版本)
整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...
- 实现AOP功能的封装与配置的小框架
内容 java基础巩固笔记 - 实现AOP功能的封装与配置的小框架 设计(目录): XXX = java.util.ArrayList中 代码 Advice接口 MyAdvice类 BeanFacto ...
随机推荐
- 并查集 poj1611&poj2492
poj1611 简单题 代码中id记录父节点,sz记录子树规模.一个集合为一棵树. #include <iostream> #include <cstdio> using na ...
- 注册表-恶意首页追踪之旅(IE不能改主页)
恶意首页追踪之旅(先说下,360无法修复这个恶意首页) 话说,今天下了个扫站的工具,结果一不小心中了恶意广告! 中招后不停的乱下东西安装,360不停的在那弹出提示! 无语了,一个个卸载,把C:\win ...
- Kinect for Windows SDK开发入门(15):进阶指引 下
Kinect for Windows SDK开发入门(十五):进阶指引 下 上一篇文章介绍了Kinect for Windows SDK进阶开发需要了解的一些内容,包括影像处理Coding4Fun K ...
- cocos2d-x学习笔记
转自:http://blog.csdn.net/we000636/article/details/8263503 接受触屏事件的优先级是值越小,响应触屏事件的优先级越高 Z值越大,越外面 JNI:允许 ...
- cocos2d-x简单动画
转自:http://4137613.blog.51cto.com/4127613/759610 这里只给出最基本的动画代码,具体使用要根据实际情况自己封装.最好自己开发一个编辑器.额外说一句,开发编辑 ...
- android webview内容压线问题解决方法
最近在使用webview做页面开发,项目上要求webview在获取到焦点的时候需要有边框线,于是添加上了webview的选中效果,但是出现了网页中的内容压选中框的情况.之后给webview添加padd ...
- Exception in thread "main" java.lang.NoClassDefFoundError: com/google/common/collect/Maps
加入jar包 http://jarfiles.pandaidea.com/google.collect.html google-collect-1.0.jar.zip ( 504.8 KB )
- nginx-systemtap-toolkit
https://github.com/openresty/nginx-systemtap-toolkit
- C# - 集合类 - 集合类型
Stack类 ns:System.Collections 此类模仿了一个简单的先进后出(LIFO)的集合 它实现了ICollection接口 可以通过三种方式创建Stack类对象 Stack stac ...
- linux安全加固
1 . BIOS 你应该总是在系统启动的时候设置一个BIOS 密码和禁用从CD-ROM 和软盘引导,这将可以防止一些人未经允许访问你的系统和更改BIOS 设置 2 .sshd 服务 SSH 是一个协议 ...