跟我一起创建一个简单的javascript ajax对象 ---献给Web开发初学者

  如今jQuery是非常的实用,我也很喜欢。但是作为web初学者而言,我个人不建议在没有js以及css的基础上直接学习使用jquery,因为那样会让你脱离底层,影响对网页编程的深入了解,对灵活进行浏览器端的编程不利。好了我发现我废话越来越多了,不晓得是不是老了……

  这篇随笔的知识点呢有两点:1.学会在javascript中创建自己的对象以及函数;2.用javascript编写异步HTTP请求的方法。

  首先创建一个返回XMLHttpRequest对象的函数

View Code
function createXmlHttp() {
var xmlHttp =false;
if (window.XMLHttpRequest) {
xmlHttp
=new XMLHttpRequest();
}
elseif (window.ActiveXObject) { //这个判断也常用来判断当前是否是IE系列浏览器
try {
xmlHttp
=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp
=new ActiveXObject("Microsoft.XMLHTTP"); //旧版本IE
} catch (e) {
}
}
}
else {
alert(
"对不起!本页面暂时不支持您的浏览器!请更换主流浏览器!");
}
return xmlHttp;
}

  好,接下来呢就可以创建一个属于我们自己的ajax对象了

View Code
var ajaxClass = {
xmlHttp: createXmlHttp(),
//这就是上面的函数返回的对象赋值给当前ajaxClass 里的xmlHttp成员
fnCallback: function (callback) { //这是回调函数,它应该是在下面的请求函数执行后才会执行
if (this.xmlHttp.readyState ==4) {
//注:当xmlHttp.readyState == 4时我们才能获取xmlHttp.status的状态值,如无上面的判断则浏览器会报错
if (this.xmlHttp.status ==200) {
callback
? callback(this.xmlHttp.responseText) : void (0);
}
}
},
sendHttp:
function (url, httpType, callback) {
if (!this.xmlHttp) {
returnfalse;
}
var base =this;//因为在下面的函数内部不能通过this关键字获取当前对象,因而先给创建一个变量等于this
this.xmlHttp.onreadystatechange =function () { base.fnCallback(callback); };
this.xmlHttp.open(httpType, url, true);
this.xmlHttp.send(null);
}
}

  ok了,注释也蛮多了,我想关于代码的话呢我还是闭嘴为妙,呵呵。接下来呢我们就可以调用这个ajax对象了,调用方法如下:

View Code
var userName = document.getElementById("txtName");
var url ="Handler.ashx?type=ExistsUser&UserName="+ escape(userName); //防止中文出现乱码
ajaxClass.sendHttp(url, "get", function (data) {
showDom.innerHTML
= data;
});

  这个ajax对象呢暂时不支持post方式,有兴趣的请自己研究。另外,本脚本在IE8、chrom、Firefox测试已通过,但是各方面的考虑仍欠缺,比如缓存、XML以及网络异常等等……

posted @ 2011-09-07 22:39  dong.net  阅读(1770)  评论(4编辑  收藏  举报