您现在的位置是:主页 > Web前端技术 > Web前端技术

怎么创建基本的Ajax应用编程语言

IDCBT2022-01-01服务器技术人已围观

简介这篇文章主要讲解了“怎么创建基本的Ajax应用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么创建基本的Ajax应用”吧!

这篇文章主要讲解了“怎么创建基本的Ajax应用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么创建基本的Ajax应用”吧!

创建一个基本的Ajax应用不需要太多的代码,大概三个步骤,几十行代码即可。

1,创建Ajax的核心对象XMLHttpRequest

因为浏览器之间的不兼容,IE7之前的版本并没有原生的XMLHttpRequest对象却实现为ActiveX对象。
互联网及各种书籍中有着多种创建方式,有的复杂很多行代码,有的则简洁很少代码。当然复杂的考虑的情形更多一些。如下几乎将IE中所有的情况都考虑到了。

function cretaeXHR(){   try{ return new XMLHttpRequest();}catch(e){}   try{ return new ActiveXObject('Msxml2.XMLHTTP.6.0');}catch(e){}   try{ return new ActiveXObject('Msxml2.XMLHTTP.4.0');}catch(e){}   try{ return new ActiveXObject('Msxml2.XMLHTTP.3.0');}catch(e){}   try{ return new ActiveXObject('Msxml2.XMLHTTP');}catch(e){}   try{ return new ActiveXObject('MSXML3.XMLHTTP');}catch(e){}   try{ return new ActiveXObject('MSXML.XMLHTTP');}catch(e){}   try{ return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}   try{ return new ActiveXObject('MSXML2.ServerXMLHTTP');}catch(e){}   return null;   }

代码较少的采用对象特性判断,

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() :new ActiveXObject('Microsoft.XMLHTTP');

我在这里采用精简方式,暂不考虑创建异常的情况。

2,发送请求

xhr.open   xhr.send

3,处理响应

xhr.onreadystatechange = function(){   if(xhr.readyState == 4){   if(xhr.status == 200){//当然你可以把200~300之间或304的都理解成响应成功   //callback   }   }   }

嗯,到这里没什么特别的,所有的书籍上都是这么几个步骤来着。对于初学者来说,要将这几个步骤很好的封装一下形成一个良好的模块还是很困难的。全局变量满天飞不知道怎么去组织代码,初学者开始都是这样的。现在想想是对一门语言没有足够的掌握,尤其是闭包。

这里采用 单例模式 封装成一个对象,即只有一个全局的变量将其赋值给Ajax,该对象有一个request方法。request有两个参数,***个为请求的url(必要的),字符串类型,第二个opt为配置参数(可选的),对象类型。结果处理使用内部私有的_onStateChange函数。

标签:

很赞哦! ()

本栏推荐