zoukankan      html  css  js  c++  java
  • 如何创建和使用XMLHttpRequest对象?

     

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

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

      request = new XMLHttpRequest()

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

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

      xmlhttp = new ActiveXObject('Msxml2.XMLHTTP')

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

      xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')

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

      运行注意

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

      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

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

      readyState4的时候,我们可以获取到数据。

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

      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/

  • 相关阅读:
    python3 urllib 类
    python 金角大王博客园学习地址
    配置文件一mapper.xml
    配置文件一mybatis-config.xml
    配置文件一applicationContext.xml
    类文件路径一classpath
    配置文件一web.xml
    日志框架一logback配置和使用
    SpringBoot + redis实现分布式session共享
    SpringBoot集成Redis 一 分布式锁 与 缓存
  • 原文地址:https://www.cnblogs.com/space007/p/6016608.html
Copyright © 2011-2022 走看看