前端开发的开始---基于面向对象的Ajax类_js面向对象

先看调用方式:

复制代码 代码如下:

ajax.request("ajax.html",{v:Math.random(),num:1},function(data){
//do something
},'get');

方式好像jquery哦。。。还是觉得这样调用方便些。。。

复制代码 代码如下:

var ajax = {
//Xmlhttprequest类
Xmlhttprequest :function() {
this.xhr =false;
},
//外部调用接口
request : function(url,data,callback,type) {
//每次都创建一个Xmlhttprequest的对象,使ajax调用互不影响
var xhr = new this.Xmlhttprequest();
xhr.request(url,data,callback,type);
}
}
//将{num:1,t:'a'}这种json数据格式转为num=1&t=a这种字符串形式
var json2str = function(data){
var _data = [];

for(var name in data) {
_data.push(name+"="+data[name]);
}
return _data.join('&');
}
//扩展Xmlhttprequest类的方法
ajax.Xmlhttprequest.prototype = {
//创建XMLHttpRequest
createXmlHttpRequest : function(){

if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else {
var a = ["Msxml2.XMLHTTP","Microsoft.XMLHTTP","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0"];
for (var i=0,l=a.length;i<l;i++){
try{
return new ActiveXObject(a[i]);
}catch(e){};
}
}
},
//回调函数
fnCallback : function(callback){

if(this.xhr.readyState === 4 && this.xhr.status === 200) {
callback?callback(this.xhr.responseText):void(0);
}
},
//ajax请求
request : function(url, data, callback, type){

var that = this;
var ispost = type==='post'?true:false;

ispost?url:url += '?'+json2str(data);

this.xhr = this.createXmlHttpRequest();

this.xhr.open(type,url,true);
ispost?this.xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"):'';
this.xhr.onreadystatechange = function(){that.fnCallback(callback);};
this.xhr.send(ispost?json2str(data):null);
}
}

这个类,肯定有不足的了,欢迎拍砖吧!每个人都有自己的习惯用法,最重要是适合用就行了!

时间: 2024-10-22 21:49:20

前端开发的开始---基于面向对象的Ajax类_js面向对象的相关文章

javascript 面向对象的JavaScript类_js面向对象

在上一节面 JavaScript 面向对象之命名空间 中说了怎么定义JavaScript命名空间,这一节来说下紧接着的一个概念--类.虽然JavaScript中没有class关键字,但作为开发人员我们一定要有这个思想.在C#中类可以分为实例类和静态类,JavaScript亦然. 一,定义实例类: 在上节中我定义了一个cnblogs.news的命名空间,现在就在此命名空间下定义一个名为Article类: 复制代码 代码如下: cnblogs.news.Article=function(){ var

javascript面向对象之一 定义类_js面向对象

javascript中的类是用函数function表示的,如下: 复制代码 代码如下: function Student() { //定义类Student中的字段,并赋予初值,但此字段的访问权限是public this.studentNo = 's001'; this.studentName = '小明'; this.sex = '男'; //定义类Student中的方法updateStudentName ,用于修改studentName 值 this.updateStudentName = f

javascript面向对象之Javascript 继承_js面向对象

上几节讲了 JavaScript 面向对象之命名空间 . javascript 面向对象的JavaScript类 . JavaScript 面向对象的之私有成员和公开成员 与 Javascript 面向对象之重载,大家可以先看上面的再继续往下看. 在JavaScript中实现继承可以有多种方法,下面说两种常见的. 一,call 继承,先看代码: 先定义一个"人"类 复制代码 代码如下: //人类 Person=function(){ this.name="草泥马";

从面试题学习Javascript 面向对象(创建对象)_js面向对象

题目: 复制代码 代码如下: try{ var me = Man({ fullname: "小红" }); var she = new Man({ fullname: "小红" }); console.group(); console.info("我的名字是:" + me.attr("fullname") + "\n我的性别是:" + me.attr("gender")); consol

javascript 面向对象编程基础 多态_js面向对象

Javascript已经可以模拟出面向对象的封装和继承特性,但是不幸的是Javascript对多态特性的支持非常弱!其它面向对象语言的多态一般都由方法重载和虚方法来实现多态,Javascript也通过这两种途径来实现! 重载:由于Javascript是弱类型的语言,而且又支持可变参数,当我们定义重载方法的时候,解释器无法通过参数类型和参数个数来区分不同的重载方法,因此方法重载是不被支持的!当先后定义了同名的方法的时候,后定义的方法会覆盖先定义的方法! 既然解释器无法分辨重载方法,那就手动区分不同

javascript面向对象之二 命名空间_js面向对象

最简单创建命名空间的方法: 复制代码 代码如下: var java = {}; java.util = {}; //这样就创建成功了命名空间:java.util //我们可以在java.util下面加类(函数),属性,或对象 java.util.HashMap = function() { this.ShowMessage = function() { alert("java.util.HashMap"); } } var map = new java.util.HashMap();

javascript 面向对象编程 function也是类_js面向对象

但javascript中并没有类概念,所谓的类也是模拟而来,通过函数加闭包模拟出类成员及私有成员(关于闭包可以参见跨越边界: 闭包).这里我们将用比较平实的方式来了解一下javascript中的"类",避开一些生硬的原理.       既然是用function来模拟类,所以编写代码创建类的关键字还是function.我们创建一个座标点类. function Point() { this.X = 0; this.Y = 0; };   var zeroPoint = new Point(

[推荐]javascript 面向对象技术基础教程_js面向对象

结果呢,看了大半天,有了一个大概的了解,细细一回味,好像什么都没懂... 这篇文章是参考<<javascript-the definitive guide,5th edition>>第7,8,9章而写成的,我也 会尽量按照原书的结构来说明javascript的面向对象技术(对象/数组->函数-->类/构造函数/原型).对一些我自己也拿捏不准的地方,我会附上原文的英文语句,供大家参考. 如果不做说明,则文中出现的所有英文语句(程序体除外)都是引自<<javas

JavaScript 面向对象编程(2) 定义类_js面向对象

本文承接上一篇JavaScript面向对象编程(1) 基础. 上篇说过,JavaScript没有类的概念,需要通过函数来实现类的定义.先通过一个例子说明: 复制代码 代码如下: function myClass() { var id = 1; var name = "johnson"; //properties this.ID = id; this.Name = name; //method this.showMessage = function() { alert("ID: