`
小麦麦子
  • 浏览: 30656 次
文章分类
社区版块
存档分类
最新评论

如何创建和使用XMLHttpRequest对象?

阅读更多

 

创建XMLHttpRequest对象,我有以下几种方法,顺带给大家介绍下他们的使用,一起来看看那吧。

  1. 第一种,我们可以使用构造函数的方式。直接new的方式,这样我们就构造了这个对象。

  request = new XMLHttpRequest()

   但是,这个语句只针对Firefox,opera以及Safari等高级浏览器。

  2、如果我们要针对IE6或者IE6以上的。那么,我们需要换一个方式,然后里面还要传一些参数。

  xmlhttp = new ActiveXObject('Msxml2.XMLHTTP')

  3、假如这样创建还是不成功,那我们就要换一个方式,就是修改里面的一些参数。

  xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')

  4、如果以上3种方式,还不能创建这个对象,那这个用户使用的浏览器就是过时的。我们可以提示它,浏览器不支持ajax技术。

  运行注意

  1) 我们创建的这个对象,首先必须运行在web服务器中的一个网页中,因为它依赖于JavaScript。JavaScript必须在网页中执行。

  2) 我们一定要注意这个网页的编码。不然,通过这个异步获取的数据,有可能是乱码。

  代码演示

  1. 这是一个我写好的网页代码开始的模板。这里面我绑定了一个onclick事件,调用doAjax函数。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ajax初步入门教学视频-麦子学院</title>

</head>

<body>

<script type="text/javascript">

function doAjax(the_request)

{

}

</script>

<input type="button" onclick="doAjax('ajax-02.txt')" />

<br/><br/>

<div id="vv"></div>

</body>

</html>

  2. 填充这个函数里面的内容

  1) 首先,我们定义一个默认为null的变量。

  var request = null;

  2) 然后我们就判断我们的浏览器,我们根据这个浏览器是否支持这个对象,来生成这个request对象。

  它如果支持,我们就直接用构造函数:

  if (window.XMLHttpRequest) {

  request = new XMLHttpRquest() ;

  }

  它如果不支持这个对象,我们就使用第二种方式生成:

  else if (window.ActiveXObject) {

  request = new ActiveXObject('Microsoft.XMLHTTP');

  }

  这样我们就创建好了。

  然后就是else,我们也不再去判断另外一种方式了,我们直接给用户提示。

  else {

  alert("您的浏览器不支持ajax");

  return false;

  }

  3) 因为是个函数,所以必须要有返回值,我们就返回false。

  return false;

  4) 好,这就是我们生成XMLHttpRequest对象的代码了。



 

 3. 我们在向服务器发送数据之前,我们有必要了解这个对象的一些属性。

  它有3个比较重要的属性。

  1) 第一个是我们的onreadystatechange这个属性。

  这个属性有什么作用呢?

  它存储处理服务器响应的函数。

  假如这个request是我们已经生成好的对象,然后我给它的属性赋一个空函数,里面写一些代码。

  request.onreadystatechange = function() {

  //这里要写一些代码

  }

  2) 第二个属性是readyState。

  它用来存储服务器响应的状态信息。

  每当它的状态值改变的时候,onreadystatechange这个属性对应的函数就要被调用一次。

  这个readyState属性有5个值。

  a) 0:表示请求未初始化,也就是还没有发起请求。

  b) 1:表示请求已经提出,在请求发出去之前。

  c) 2:表示请求已发送,这里通常可以从响应得到头部信息。

  d) 3:表示服务器已经正在处理中,但是没有响应完成。

  e) 4:表示服务器已经请求完成,并且使用它。

  这个readyState,其实针对的这些状态,我们都要调用onreadystatechange对应的函数。

  那,我们必须要在这个函数里面写上一条if语句,才能判断我们的响应是否已经完成,意味着是否可以获取异步的数据。

  好,我们在这里示范一下:

  request.onreadystatechange = function() {

  //这里要写一些代码

  if (request.readyState == 4) {

  //从服务器获取数据的代码,并做相应处理

  }

  }

  3) 那,接下来这个属性叫做:responseText。

  这个属性是用来获取,由服务器返回的数据,就是当

  readyState为4的时候,我们可以获取到数据。

  例如:我们把它打印出来。

  request.onreadystatechange = function() {

  //这里要写一些代码

  if (request.readyState == 4) {

  //从服务器获取数据的代码,并做相应处理

  alert(request.responseText);

  }

  }

  这样我们就把这个服务器返回的数据alert出来了。

  4. 但是我们要把请求发送到服务器,那我们就要调用它的两个方法。

  1) 第一个是open(),这个参数需要3个参数。

  a) 第一个参数是GET或者是POST,表名这个HTTP方法

  b) 第二个参数就是规定服务器端脚本的url。

  c) 第三个参数,规定应当对请求作异步的处理,也就是一个异步处理的标识。

  2) 第二个方法:就是send()方法,send方法可以将请求发送到服务器端。

  我们假设当前这个网页,跟我们请求的url在同一个目录下面。

  a) 那我们的代码可以是这样的。

  request.open("GET", "test.txt", true);

  这个时候,我们就已经建立了这个请求。

  b) 然后,加一个对服务器响应状态的代码。

  request.onreadystatechange = function() {

  //这里要写一些代码

  if (request.readyState == 4) {

  //从服务器获取数据的代码,并做相应处理

  alert(request.responseText);

  }

  }

  c) 然后,我们就可以通过send方法,将我们的请求发送给服务器端。

  接下来,我们就可以在方法里面做一些处理了。

  做处理的时候,我们其实什么也不用做,只要等到

  request.readyState == 4的时候,才做一些处理。

  做处理,其实一般来说,就是获取这个

  responseText这个属性,把它里面的数据做一下解析,然后在相应的网页位置展示出来。

  这就是我们的ajax里面的核心技术。

 

 

原文链接:http://www.maiziedu.com/wiki/ajax/base/

  • 大小: 117.7 KB
分享到:
评论

相关推荐

    创建XMLHttpRequest对象的方法.rar

    总结,"创建XMLHttpRequest对象的方法.rar"这个资源主要介绍了如何在JavaScript中创建并使用XMLHttpRequest对象进行AJAX通信,包括对象创建、状态监听、请求初始化和发送、以及响应处理等关键步骤。在实际项目中,...

    用js创建XMLHttpRequest对象池

    总的来说,了解如何创建和管理XMLHttpRequest对象池是优化JavaScript应用性能的重要技能,尤其是在处理大量网络请求时。而随着技术的发展,开发者也需要关注新的API和最佳实践,以适应不断变化的Web环境。

    使用XMLHttpRequest对象.doc

    在使用 XMLHttpRequest 对象发送请求和处理响应之前,必须先用 JavaScript 创建一个 XMLHttpRequest 对象。由于 XMLHttpRequest 不是一个 W3C 标准,所以可以采用多种方法使用 JavaScript 来创建 XMLHttpRequest 的...

    创建XMLHttpRequest对象

    ### 创建XMLHttpRequest对象 在现代Web开发中,异步JavaScript和XML(通常称为AJAX)是一种重要的技术,它允许网页在不重新加载整个页面的情况下与服务器进行数据交换。这一过程的核心在于`XMLHttpRequest`对象的...

    Ajax 创建XMLHttpRequest对象,兼容所有主流浏览器(IE5除外)

    一般网上流传的创建XMLHttpRequest对象比较简单。跨浏览器能力非常有限。并不全面。 经测试,用此方法创建XMLHttpRequest对象,在运用AJAX的时候,可以的兼容IE6,IE7,IE8,Opera,Safari,Google Chrome,fireFox。主流...

    XMLHttpRequest对象的介绍和实现

    通过本文档的学习,读者不仅了解了XMLHttpRequest对象的基本概念和使用方法,还掌握了如何利用它进行简单的页面更新和数据处理。此外,我们还讨论了如何创建一个更加健壮和灵活的ServerAccessObject模块,以方便在...

    Ajax深度剖析,XMLHttpRequest对象大揭秘

    在这篇深度剖析中,我们将揭开XMLHttpRequest对象的神秘面纱,探讨其工作原理、常用方法和实际应用。 XMLHttpRequest对象是Ajax技术的基础,它允许JavaScript在页面不刷新的情况下与服务器进行通信。创建一个...

    XMLHttpRequest对象的创建和使用

    **创建XMLHttpRequest对象** 在JavaScript中,XMLHttpRequest对象不是内置在全局作用域内的,而是通过构造函数来创建的。你可以直接通过`new XMLHttpRequest()`来创建一个新的实例。例如: ```javascript var xhr ...

    支持多种浏览器创建XMLHttpRequest对象代码

    ### 支持多种浏览器创建XMLHttpRequest对象代码 随着Web技术的发展与演进,跨浏览器兼容性一直是前端开发者面临的重要挑战之一。特别是在处理Ajax请求时,如何优雅地在不同浏览器(尤其是IE与其他现代浏览器)间...

    全面剖析XMLHttpRequest对象

    XMLHttpRequest对象是Web开发中的关键组件,尤其对于实现AJAX(异步JavaScript和XML)技术至关重要。它允许在不刷新整个页面的情况下与服务器...理解和熟练掌握XMLHttpRequest对象的使用,是每个前端开发者必备的技能。

    WEB开发 之 AJAX - 创建 XMLHttpRequest 对象.docx

    创建XMLHttpRequest对象后,我们可以使用它来发送HTTP请求到服务器。这通常涉及到以下步骤: 1. **初始化XMLHttpRequest对象**:调用`open()`方法,设置请求类型(GET或POST)、URL以及是否异步执行。 2. **设置...

    05-使用XMLHttpRequest对象发送和接收XML数据,及乱码问题的解决.pdf

    2. 发送和接收XML数据:在使用XMLHttpRequest对象时,我们可以通过其send方法发送请求,并通过responseXML属性或responseText属性接收来自服务器的数据。通常情况下,服务器返回的是XML格式的数据,客户端通过解析...

    全面剖析 Ajax XMLHttpRequest对象

    总之,XMLHttpRequest对象是Ajax技术的基础,它的属性和方法提供了与服务器进行异步交互的能力,极大地丰富了Web应用的动态性和用户体验。开发者深入理解和掌握XMLHttpRequest的使用,对于构建高效、交互性强的Web...

    AJAX核心技术1-XMLHttpRequest对象的使用

    [王兴魁]AJAX核心技术1-XMLHttpRequest对象的使用

    全面剖析XMLHttpRequest对象.txt

    #### 二、XMLHttpRequest对象的创建与初始化 在现代浏览器中,可以通过以下方式创建XMLHttpRequest对象: ```javascript var xhr = new XMLHttpRequest(); ``` 如果是在Internet Explorer 5或6中,则可能需要使用...

    全面剖析XMLHttpRequest对象.doc

    W3C组织正致力于XMLHttpRequest对象的标准化,已发布了相关的规范草案,旨在统一其接口和行为。 #### XMLHttpRequest的属性与事件 **readyState属性**:表示XMLHttpRequest对象的当前状态,从“未初始化”到“已...

    XMLHttpRequest对象的使用

    首先,XMLHttpRequest对象是JavaScript内置的对象,通过创建实例化对象来使用。通常,我们会在JavaScript代码中这样创建: ```javascript var xhr = new XMLHttpRequest(); ``` 接下来,我们需要设置请求的类型...

    VS2008 AJAX控件介绍 AJAX组成及XMLHttpRequest对象

    在VS2008中,开发者可以直接使用AJAX控件,它们封装了XMLHttpRequest对象的复杂操作,简化了开发流程。例如,UpdatePanel控件背后的实现就是基于XMLHttpRequest对象的,它自动处理了请求和响应的处理逻辑,使得...

Global site tag (gtag.js) - Google Analytics