ajax入门简明教程---XMLHTTPRequest对象

2016-02-19 15:34 4 1 收藏

今天给大家分享的是由图老师小编精心为您推荐的ajax入门简明教程---XMLHTTPRequest对象,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

【 tulaoshi.com - Web开发 】

     当前ajax技术作为web2.0的技术主体,已经是非常流行了。现在的很多网站都已做ajax为时尚,因为它的页面响应速度快,用户体验高啊,每次转换页面几乎就是不刷新。那么是什么东西使这ajax的响应这么快呢?是XMLHTTPRequest对象。XMLHTTPRequest对象是ajax技术的核心,没有XMLHTTPRequest对象就相当于没有ajax,它是最重要的一个对象。下面我们来介绍一下这个东西。

     XMLHTTPRequest是XMLHTTP组件的对象,通过XMLHTTPRequest可以像桌面应用程序一样只同服务器进行数据层面的信息交换,而不用刷新页面,也不用将数据处理的一大堆事情交给服务器去做,客户端或是浏览器能做的就帮服务器分担一点,这样多好啊。用户体验高了,服务器负担还减轻了不少。

    XMLHTTPRequest的应用:
    var xmlhttp = new XMLHTTPRequest(); 用new关键字创建XMLHTTPRequest的对象
    在微软的IE浏览器里XMLHTTP组件有区别
    var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
    var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);
    微软用Active X来支持XMLHttp组件
    列举一个跨浏览器的例子:
script language=”javascript”
  var XHR;
  //创建XMLHTTPRequest对象
  function creatXMLHTTPRequest() {
  if (window. XMLHTTPRequest) { //firefox浏览器
  XHR = new XMLHTTPRequest();
  }
  ese if (window.ActiveObject) { //IE浏览器
  try {
  XHR = new ActiveXObject(“Msxml2.XMLHTTP”);
  } catch (e){
  try {
XHR = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {}
}}}
/script
  XMLHTTPRequest 是个对象,学过一些面向对象编程的同学能知道,每个对象里有属性和方法。Javascript也是面向对象的语言,这里面的对象同样有着它的属性和方法。
  我们先来看看它的属性

 


们先来看看它的属性

属性 作用 onreadystatechange这是个事件,在状态改变时触发 readyState对象状态 把一个HTTP请求发送到服务器时将经历若干种状态:一直等待直到请求被处理;然后,它才接收一个响应。这样以来,脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性。
0 未初始化
1 读取中
2 已读取中
3 交互中
4 完成

ResponseText  这个responseText属性包含客户端接收到的HTTP响应的文本内容,表示为一个字符串。当readyState值为0、1或2时,responseText包 含一个空字符串。当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时,该 responseText包含完整的响应信息。ResponseXML这个跟上一个很像,它返回一个兼容DOM的XML文档对象。status返回http协议的状态码,如404是URL错误200交互成功。statusText服务器返回的状态文本信息。

再来看看XMLHTTPRequest对象的方法

方法 作用

abort()

用它来停止当前请求

open(“方法名”,”URL”)

方法名是指,请求的方法get或者是post
这个方法可以理解为准备一个请求。

send(content)

仅当readyState值为1时,你才可以调用send()方法;否则的话,XMLHttpRequest对象将引发一个异常。

setRequestHeader()

该setRequestHeader(DOMString header,DOMString value)方法用来设置请求的头部信息。当readyState值为1时,你可以在调用open()方法后调用这个方法;否则,你将得到一个异常。

getResponseHeader()

getResponseHeader(DOMString header,value)方法用于检索响应的头部值。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

getAllResponseHeaders()

把HTTP请求的所有响应首部作为键/值对

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

 

 


       不过现在很多框架像是dwr。都已经尽力的简化XMLHTTPRequest对象的操作,也就是说现在开发ajax时候,大部分已经不需要自己写XMLHTTPRequest,而是一些框架帮着你做了。不过要想学好一门技术从基础学起也是很必要的。

再来看看XMLHTTPRequest对象的方法

方法 作用

abort()

用它来停止当前请求

open(“方法名”,”URL”)

方法名是指,请求的方法get或者是post
这个方法可以理解为准备一个请求。

send(content)

仅当readyState值为1时,你才可以调用send()方法;否则的话,XMLHttpRequest对象将引发一个异常。

setRequestHeader()

该setRequestHeader(DOMString header,DOMString value)方法用来设置请求的头部信息。当readyState值为1时,你可以在调用open()方法后调用这个方法;否则,你将得到一个异常。

getResponseHeader()

getResponseHeader(DOMString header,value)方法用于检索响应的头部值。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

getAllResponseHeaders()

把HTTP请求的所有响应首部作为键/值对

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

    不过现在很多框架像是dwr。都已经尽力的简化XMLHTTPRequest对象的操作,也就是说现在开发ajax时候,大部分已经不需要自己写XMLHTTPRequest,而是一些框架帮着你做了。不过要想学好一门技术从基础学起也是很必要的。

来源:http://www.tulaoshi.com/n/20160219/1609935.html

延伸阅读
标签: Web开发
现在很多公司都在做标准的静态页面,为了增强客户的体验效果,经常会涉及到AJax效果,而设计AJax使用的一种重要技术(工具)就是XMLHttpRequest对象了。今天学习了点关于XMLHttpRequest对象的一些方法和属性,有点体会,在这里也想记录起来。 1、何为XMLHttpRequest 定义:XMLHttp是一套可以在Javascript、VbScript、Jscript等脚本语言...
标签: Web开发
由于javascript具有动态类型特性,而且XMLHttpRequest在不同浏览器上的实现是兼容的,所以可以用同样的方式访问XMLHttpRequest实例的属性和方法,而不论这个实例创建的方法是什么。这就大大简化了开发过程,而且在javascript中也不必编写特定于浏览器的逻辑。 ------------------------------------------------------------------------...
标签: Web开发
XML对象模型是一个对象集,可以使用这个对象集来访问或处理存储在XML文档中的数据 。XML文档构成一颗树,树上的每一个元素可以看作是一个节点,具有不同属性和方法的 对象代表了树和它的节点,每个节点包含文档中的实际数据。 如何访问树中的节点? 可以通过象脚本来访问树中的节点。这些对象是在解析器装载并解析XML文档时由X...
XML简明教程 一、XML的背景和应用前景 (一)起源 XML(eXtended Markup Language)是从SGML(Standard Generalized Markup Language)进化来的,最初SGML是为了解决文 档及其格式问题的一种标记语言,所以非常的复杂和难以使用,那时计算机的应用水平还处在很低的阶段,并且那时人们只需要传递 和显示一些简单的数据。因此,89...
标签: Web开发
在使用XMLHttpRequest对象发送请求和处理响应之前,必须先用JavaScript创建一个XMLHttpRequest对象。由于XMLHttpRequest不是一个W3C标准,所以可以采用多种方法使用JavaScript来创建XMLHttpRequest的实例。Internet Explorer把XMLHttpRequest实现为一个ActiveX对象,其他浏览器(如Firefox、Safari和Opera)把它实现为一个本地JavaScript对象。...

经验教程

152

收藏

75
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部