`
fulerbakesi
  • 浏览: 562916 次
文章分类
社区版块
存档分类
最新评论

Ajax核心对象——XMLHttpRequest对象

 
阅读更多

XMLHttpRequest对象在Ajax中占据着十分重要的地位,因为通常意义上的和服务器进行交互是通过提交表单的形式,而在Ajax中的客户端通过XMLHttpRequest对象实现与服务器的通信。也就是说正是因为XMLHttpRequest才使得Ajax得以实现,于是我们的与服务器的交互速度明显提升,消除了令人头疼的等待之后用户体验便也更加良好。

名字由来:

XMLHttpRequest之所以叫这个名字是因为它与服务器通信得过称中利用XMLHttpposthead或者get方式)请求(Request)的过程,然后通过XMLXML是常用格式,并不限于和XML 文档,可以接收任何形式的文本文档)的形式将服务器的返回结果发送到客户端进行解析。上面的话翻译成英文就是:the object send request in order to get the XML by XMLHttp method.(你说外国人编程能不好么,人家写代码就跟说话一样,丫的!)

其实XMLHttpRequest对象也不是一个新技术,这个对象最早出现在微软的IE浏览器中,是以ActiveX组件的形式出现的,况且也不是W3C的标准,所以在当时并没有引起开发人员太大的注意。自从Google推出Google MapGoogleSuggest产品以后,Ajax技术以飞快的速度发展起来,而XMLHttpRequest对象又是Ajax的重要组成部分,所以XMLHttpRequest对象也开始重新受到重视。到目前为止XMLHttpRequest依旧不是W3C的标准,所以一个有趣的现象就是常用的各种浏览器提供对XMLHttpRequest对象支持,但是在各种浏览器中,XMLHttpRequest对象的创建方法稍有不同,更加奇怪的是创建成功之后,在使用方法上是没有任何区别的。也就是说这个对象已经成为事实意义上的标准,只是标准还不是很完善罢了。

创建XMLHttpRequest

function createXMLHttpRequest(){
	if(window.XMLHttpRequest){
		//Mozilla浏览器
		XMLHttpReq=new XMLHttpRequest();
	}else{
		//IE浏览器
		if(window.ActiveXObject){
			try{
				XMLHttpReq=new ActionXObject("Msxm12.XMLHTTP");
			}catch(e){
				try{
					XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
				}catch(e){}
			}
		}
	}
}

在上面这个JavaScript函数中,实现的功能是创建一个XMLHttpRequest对象,其中windowXMLHttpRequest可以判断浏览器是否通过JavaScript本地方法支持XMLHttpRequest对象,如果是通过JavaScript本地方法支持XMLHttpRequest对象,就可以用第5行代码的方法创建这个对象,这就是除IE浏览器外其他浏览器中创建XMLHttpRequest对象的方法。

windowActiveXObject可以判断浏览器是否支持ActiveX,在IE浏览器中是通过ActiveX组件支持XMLHttpRequest对象,如果浏览器支持ActiveX,就可以使用下面的方法创建XMLHttpRequest对象,这就是在IE浏览器中创建XMLHttpRequest对象的方法。

总之,这里提供的XMLHttpRequest对象的创建方法解决了不同浏览器的差异,而且也处理了不同版本IE浏览器之间的差别,所以可以作为创建XMLHttpRequest对象的通用方法。无论读者使用哪种浏览器都可以在自己的程序中使用上面的代码创建XMLHttpRequest对象。

XMLHttpRequest常用的方法:

XMLHttpRequest对象创建之后,就可以对这个对象进行各种不同的操作,从而完成和服务器的通信,接下来介绍XMLHttpRequest对象常用的方法。

open(Method, URL, Asynchronous, UserName, Password )方法可以建立对服务器的调用,这个方法有五个参数,前两个参数是必须的,其中method可以是GET或者POSTurl是指所要访问的服务器资源的位置,Asynchronous是指异步访问服务器还是同步访问,默认是异步访问,异步访问正是Ajax的优势所在。使用最后两个参数可以使用指定的用户名和密码访问服务器资源。

send( Data)这个方法可以向服务器发送请求,这个方法中的参数回座位请求中的内容发送到服务器。

小结:常用的方法就两个,一个open一个send,类比数据库的知识,想要和服务器进行交互,首先要打开连接,然后发送请求。

XMLHttpRequest常用属性

readyState这个属性,每个状态的改变都会调用事件处理器,使用这个属性可以监听XMLHttpRequest的状态。状态可以取下面的5个值:0(为初始化)、1(正在加载)、2(已加载)、3(交互中)、4(已完成)。

onreadystatechange属性,比较标准的叫法应该叫The onreadystatechange event listener。是一个监听器,每个状态的改变都会调用这个事件处理器,使用这个属性可以监听状态的变化,并提供对应的处理方法(有些地方叫回调函数)。

status属性描述了服务器的状态码,可以是200也可以是404

statusText描述了HTTP状态码对应的文本,例如200对应OK404对应Not Found等。

responseText是服务器以文本字符串返回的响应

responseXML是服务器以XML格式返回的响应,以XML返回的好处是可以方便的解析返回的内容。

小结:交互必是两个以上的对象,所以双方的状态都需要考虑(readyStatestatusstatusText),而判断双方是否准备好需要一个触发事件(onreadystatechange),当双方都准备好之后就开始进行传输(responseTextresponseXML)。

总结:

创造的好处是明显的,但是成本也是令人望而生畏的,与此相比,利用已有的资源通过改变思想,然后去解决新的问题就显得更加高明。换句话说,思想上的创造比具体事物上的创造更加具有颠覆作用。SB英语学习中的走遍美国、EAI当中对已有系统的整合都和XMLHttpRequestAjax当中的应用有异曲同工之妙,思想上的创造才是真正的创造。

分享到:
评论

相关推荐

    4天学会ajax XMLHttpRequest

    本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体...他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。作者对ajax做了深入浅出讲解,很适合初学者学习,在这里和大家共同分享了。

    北京中科信软AJAX培训

    Ajax核心技术-XML XML与Ajax 文档类型定义及声明 XML名域 操纵和解析XML 选择合适的XML生成方式 XHTML与CSS XHTML、CSS与Ajax XHTML与CSS基础 XHTML语法约束 JavaScript JavaScript与Ajax JavaScript基本数据结构 ...

    Ajax入门中文电子书

    Ajax入门 Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。这个短语是 Adaptive Path 的 Jesse James Garrett 发明的,按照 ...他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。

    Ajax从入门到精通(附教学示例)

    XMLHttpRequest 对象。 五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道 Ruby 的程序员只能坐冷板凳了。今天,如果想跟上最新的技术时尚,那您的目标就是 Ajax。 ...

    Ajax 从入门到精通(电子书+源代码)(高清PDF中文版)

    他还揭开了 Ajax 核心概念的神秘面纱,包括XMLHttpRequest 对象。 五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道Ruby 的程序员只能坐冷板凳了。今天,如果想跟上...

    四天学会ajax.doc

    他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。 五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道 Ruby 的程序员只能坐冷板凳了。今天,如果想跟...

    Ajax从入门到精通

    XMLHttpRequest 对象。 五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道 Ruby 的程序员只能坐冷板凳了。今天,如果想跟上最新的技术时尚,那您的目标就是 Ajax。 ...

    四天学会Ajax技术

    他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。 五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道 Ruby 的程序员只能坐冷板凳了。今天,如果想跟上...

    Ajax从入门到精通(电子书+源代码)

    他还揭开了 Ajax 核心概念的神秘面纱,包括XMLHttpRequest 对象。 五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道Ruby 的程序员只能坐冷板凳了。今天,如果想跟上...

    3个ajax的教程,chm格式的you3个打包了,所以赏我个1分

    他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。 五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道 Ruby 的程序员只能坐冷板凳了。今天,如果想跟上...

    Ajax详解.rar

    他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。 五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道 Ruby 的程序员只能坐冷板凳了。今天,如果想跟...

    锋利的jquery——1

    第3篇介绍了Ajax的核心对象---XMLHttpRequest. 第4篇介绍了jQuery中的$.ajax()方法. 第5篇介绍了jQuery加载并解析xml. 第6篇是第七章的插件的API 第7篇是jQuery API速查表. 本书循序渐进的对jQuery的各种方法和...

    Ajax完全中文手册.chm

    Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax...他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。

    《4天学会Ajax》教程 pdf

    《4天学会Ajax》中文教程,pdf高清淅格式。第一天带您认识Ajax;第二天走进JavaScript 和Ajax异步请求;第三天学习Ajax高级请求和响应;...他还揭开了Ajax 核心概念的神秘面纱,包括XMLHttpRequest 对象。

    掌 握 AJAX

    Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本系列的作者是一位 ...他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。

    Head First Ajax(中文版).pdf

    Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本系列的作者是一位 Ajax...他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象

    四天学会Ajax.rar

    他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。 五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道 Ruby 的程序员只能坐冷板凳了。今天,如果想跟...

    Ajax基础:四天学会Ajax chm

    Ajax基础:四天学会Ajax chm 本教程的作者是一位 Ajax 编程专家,他通过这本书向大家演示了HTML、JavaScript™ 技术、DHTML 和 DOM 这些技术是如何...他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。

    掌握 Ajax(IBM经典中文教程)

    简介: Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。...他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。

    掌握Ajax.rar

    他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。 五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道 Ruby 的程序员只能坐冷板凳了。今天,如果想跟...

Global site tag (gtag.js) - Google Analytics