使用Jquery原理实现一个简单的Ajax的支持JS类
来源:互联网 发布:如何开淘宝网 编辑:程序博客网 时间:2024/06/05 05:48
详细Ajax技术对于一个Web开发者来说应该是很熟悉的东西了,Ajax的出现让web页面交互有了革命化的变化。对于Ajax来说,JQuery是一个不可多得的好JS库,但是很多朋友并不了解Jquery对Ajax的实现过程,或者说不太了解,这点CG在此是不提倡的,CG写下面代码一方面是为了解决一位网友的疑问,同时也希望那些如果想在Jquery技术上有深入提高的朋友能够多看看Jquery源代码。
下面是简单实现的一个Ajax支持类,有不明白的话可以发起提问和留言。
以下是简单的调用代码,相信用过Jquery的朋友觉得很类似吧?
--------------------------------------------------------------------------------------
- 版权声明:
- 如在本页面内无特别说明,本文内容均为[李大仁博客]原创,本文版权归[李大仁博客]所有。
- 欢迎转载,转载请务必在文章页面明显位置提供原文链接并注明出处。欢迎您在转载本文时保留本段声明。
- 文章标题:使用Jquery原理实现一个简单的Ajax的支持JS包装类
- 独立博客:李大仁博客
- 永久链接:http://www.lidaren.com/archives/695
--------------------------------------------------------------------------------------
以上内容由博客自动发布工具自动发布,最终显示内容和效果会与原文内容有所偏差,敬请谅解。
下面是简单实现的一个Ajax支持类,有不明白的话可以发起提问和留言。
/**
* 名称:Ajax支持javascript类
* 功能:用于对页面实现Ajax支持,简单封装Ajax请求
* 创建时间:2010-01-14
* 作者:CG
*/
//以下为通用函数或对象
//是否是IE
var isIE = (document.all) ? true : false;
//$ id选择器
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
//Class 类对象
var Class = {
create: function() {
return function() { this.initialize.apply(this, arguments); }
}
};
//事件函数绑定
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
};
//全局Ajax对象
//用于AjaxSupport对象调用
var $ajax = function(obj){
//错误信息
if(undefined == obj.error){
obj.error = ajaxError;
}
//创建新的对象,此处可以使用单例来实现,减少资源消耗
new AjaxSupport(obj);
};
//通用Ajax错误显示
function ajaxError(msg){
alert(msg);
}
var AjaxSupport = Class.create();
AjaxSupport.prototype ={
/**初始化方法
* 参数: obj 调用对象
*/
initialize: function(obj){
this._xmlHttp = null;
//URL对象
this._url = obj.url;
//请求方法对象
this._method = obj.method;
//请求方式
this._asyn= obj.asyn;
//请求数据
this._data= obj.data;
//请求成功
this._success = obj.success;
//错误
this._error = obj.error;
//初始化HttpRequest
this._initHttpRequest();
//开始请求
this._ajaxRequest();
},
//请求状态变化
_readyStateChange: function() {
//只判断是4的情况,其他情需要另行设置
if(4 == this._xmlHttp.readyState){
//请求成功
if(200 == this._xmlHttp.status){
if(undefined != this._success){
//将请求发送给调用者
this._success(this._xmlHttp.responseXML);
}
}
// 错误,或返回结果非200
else{
if(undefined != this._error){
this._error("Error:Server Internal Error!");
}
}
}
},
//开始Ajax请求
_ajaxRequest: function() {
//打开请求
try{
//打开请求
this._xmlHttp.open(this._method , this._url ,this._asyn);
}catch(e){
//打开请求错误
if(undefined != this._error){
this._error("Error:Openning Ajax Request Error!");
}
}
try{
//发送请求
this._xmlHttp.send(this._data);
}
catch(e){
//发送数据错误
if(undefined != this._error){
this._error("Error:Sending Ajax Request Error!");
}
}
},
//初始化HttpRequest对象
_initHttpRequest: function(){
//初始化HTTPReqest
if(!isIE){//FF opera safari
this._xmlHttp = new XMLHttpRequest();
}else{//IE
try{//IE6+
this._xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{//IE5.5+
this._xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
//浏览器不支持
if(undefined != this._error){
this._error("Sorry! Your Browser dose not Support Ajax!");
}
}
}
}
//事件绑定
if(null != this._xmlHttp) {
//绑定状态改变事件
this._xmlHttp.onreadystatechange = Bind(this, this._readyStateChange);
}else{
//绑定事件调用错误信息
if(undefined != this._error){
this._error("Error: init Ajax Object Error!");
}
}
}
}
以下是简单的调用代码,相信用过Jquery的朋友觉得很类似吧?
function testAjax() {
var req = "text=" + $("txtName").value;
//对象调用Ajax测试
$ajax({
url:"AjaxTest",
method:"post",
asyn:true,
data:req,
success: function(obj){
//这里测试输出数据,不作XML解析
$("msg").innerHTML = obj;
},
error: function(msg){
//错误信息显示
$("msg").innerHTML = msg;
}
});
}
--------------------------------------------------------------------------------------
- 版权声明:
- 如在本页面内无特别说明,本文内容均为[李大仁博客]原创,本文版权归[李大仁博客]所有。
- 欢迎转载,转载请务必在文章页面明显位置提供原文链接并注明出处。欢迎您在转载本文时保留本段声明。
- 文章标题:使用Jquery原理实现一个简单的Ajax的支持JS包装类
- 独立博客:李大仁博客
- 永久链接:http://www.lidaren.com/archives/695
--------------------------------------------------------------------------------------
以上内容由博客自动发布工具自动发布,最终显示内容和效果会与原文内容有所偏差,敬请谅解。
0 0
- 使用Jquery原理实现一个简单的Ajax的支持JS类
- AJAX 的简单实例 (JS实现 和JQuery 实现)
- js实现 jquery的$.ajax
- Jquery+ajax的简单使用
- jquery ajax的简单使用
- 原生js实现ajax的一个简单demo
- 使用js实现一个简单的模态框
- Struts2对AJax的支持(使用JQuery)
- jquery ajax中支持哪些返回类型以及js中判断一个类型常用的方法?
- js ajax的简单使用
- 一个简单的jquery+ajax的例子
- AJAX Unit02: JSON 、 使用JSON实现数据交换 、 jQuery对AJAX的支持
- 一个剖析AJAX原理的简单范例
- 一个最简单的ajax+jquery
- jquery一个简单的AJAX调用
- 习惯了使用jQuery的ajax方法,看看原生js使用xmlhttpRequest实现ajax请求
- 原生js和jQuery的AJAX实现
- js和jQuery的AJAX实现
- 发布本地美容工作室ASP网站整站源代码
- MFC Edit control的用法
- 基于EXTJS+ASP的WEB桌面应用程序
- 实现简单的类似Lightbox效果的弹出对话框
- 求二维数组的全排列组合,二位数组的自乘积问题
- 使用Jquery原理实现一个简单的Ajax的支持JS类
- 使用递归位运算实现对字节的中心转置反转
- 【BLE-CC2640】CC2640之LED
- 使用JS实现的可变动态密码输入键盘控件源代码
- 使用VB.Net GDI+编程编写的3D魔方游戏程序
- 设置背景透明的窗体,GDI+绘制异形WINFORM
- 进入Windows管理的SYSTEM用户状态获得超级权限
- iOS开发之Objective-c的MD5/SHA1加密算法的实现
- iOS开发之Objective-C中BASE64编码加密解密的使用