实现AJAX异步调用和局部刷新的基本步骤


Posted in Javascript onMarch 17, 2022

引言

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

1、创建XMLHttpRequest对象

不同的浏览器使用的异步调用对象也有所不同,在IE浏览器中异步调用使用的是XMLHTTP组件中的XMLHttpRequest对象,而在Netscape、Firefox浏览器中则直接使用XMLHttpRequest组件。因此,在不同浏览器中创建XMLHttpRequest对象的方式都有所不同.

在IE浏览器中创建XMLHttpRequest对象的方式如下所示:

var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

在Netscape浏览器中创建XMLHttpRequest对象的方式如下所示:

var xmlHttpRequest = new XMLHttpRequest();

由于无法确定用户使用的是什么浏览器,所以在创建XMLHttpRequest对象时,最好将以上两种方法都加上.如以下代码所示:

<html>
   <head>
      <title>创建XMLHttpRequest对象</title>
      <script language = "javascript" type = "text/javascript">
      <!--
      var xmlHttpRequest;  //定义一个变量,用于存放XMLHttpRequest对象
      function createXMLHttpRequest()    //创建XMLHttpRequest对象的方法
      {
	      if(window.ActiveXObject)   //判断是否是IE浏览器
	      {
	         xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");  //创建IE浏览器中的XMLHttpRequest对象
	      }
	      else if(window.XMLHttpRequest)    //判断是否是Netscape等其他支持XMLHttpRequest组件的浏览器
	      {
	          xmlHttpRequest = new XMLHttpRequest();  //创建其他浏览器上的XMLHttpRequest对象
	      }
	    }
       -->
      </script>
      createXMLHttpRequst();   //调用创建对象的方法
    </head>
<body>
</body>

</html>

"if(window.ActiveXObject)"用来判断是否使用IE浏览器.其中ActiveXOject并不是Windows对象的标准属性,而是IE浏览器中专有的属性,可以用于判断浏览器是否支持ActiveX控件.通常只有IE浏览器或以IE浏览器为核心的浏览器才能支持Active控件.

"else if(window.XMLHttpRequest)"是为了防止一些浏览器既不支持ActiveX控件,也不支持XMLHttpRequest组件而进行的判断.其中XMLHttpRequest也不是window对象的标准属性,但可以用来判断浏览器是否支持XMLHttpRequest组件.

如果浏览器既不支持ActiveX控件,也不支持XMLHttpRequest组件,那么就不会对xmlHttpRequest变量赋值.

2、创建HTTP请求

创建了XMLHttpRequest对象之后,必须为XMLHttpRequest对象创建HTTP请求,用于说明XMLHttpRequest对象要从哪里获取数据.通常可以是网站中的数据,也可以是本地中其他文件中的数据.

创建HTTP请求可以使用XMLHttpRequest对象的open()方法,其语法代码如下所示:

XMLHttpRequest.open(method,URL,flag,name,password)

代码中的参数解释如下所示:

method:该参数用于指定HTTP的请求方法,一共有get、post、head、put、delete五种方法,常用的方法为get和post。

URL:该参数用于指定HTTP请求的URL地址,可以是绝对URL,也可以是相对URL。

flag:该参数为可选参数,参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步方式、false表示同步方式,默认为true。

name:该参数为可选参数,用于输入用户名。如果服务器需要验证,则必须使用该参数。

password:该参数为可选参数,用于输入密码。如果服务器需要验证,则必须使用该参数。通常可以使用以下代码来访问一个网站文件的内容。

xmlHttpRequest.open("get","http://www.aspxfans.com/BookSupport/JavaScript/ajax.htm",true);

或者使用以下代码来访问一个本地文件内容:

xmlHttpRequest.open("get","ajax.htm",true);

注意:如果HTML文件放在Web服务器上,在Netscape浏览器中的JavaScript安全机制不允许与本机之外的主机进行通信。也就是说,使用open()方法只能打开与HTML文件在同一个服务器上的文件。而在IE浏览器中则无此限制(虽然可以打开其他服务器上的文件,但也会有警告提示)。

3、设置响应HTTP请求状态变化的函数

创建完HTTP请求之后,应该就可以将HTTP请求发送给Web服务器了。然而,发送HTTP请求的目的是为了接收从服务器中返回的数据。从创建XMLHttpRequest对象开始,到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5中状态。

       ⑴未初始化状态。在创建完XMLHttpRequest对象时,该对象处于未初始化状态,此时XMLHttpRequest对象的readyState属性值为0。

       ⑵初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时,该对象处于初始化状态。此时XMLHttpRequest对象的readyState属性值为1。

       ⑶发送数据状态。在初始化XMLHttpRequest对象后,使用send()方法发送数据时,该对象处于发送数据状态,此时XMLHttpRequest对象的readyState属性值为2。

       ⑷接收数据状态。Web服务器接收完数据并进行处理完毕之后,向客户端传送返回的结果。此时,XMLHttpRequest对象处于接收数据状态,XMLHttpRequest对象的readyState属性值为3。

       ⑸完成状态。XMLHttpRequest对象接收数据完毕后,进入完成状态,此时XMLHttpRequest对象的readyState属性值为4。此时接收完毕后的数据存入在客户端计算机的内存中,可以使用responseText属性或responseXml属性来获取数据。

只有在XMLHttpRequest对象完成了以上5个步骤之后,才可以获取从服务器端返回的数据。因此,如果要获得从服务器端返回的数据,就必须要先判断XMLHttpRequest对象的状态。

XMLHttpRequest对象可以响应readystatechange事件,该事件在XMLHttpRequest对象状态改变时(也就是readyState属性值改变时)激发。因此,可以通过该事件调用一个函数,并在该函数中判断XMLHttpRequest对象的readyState属性值。如果readyState属性值为4则使用responseText属性或responseXml属性来获取数据。具体代码如下所示:

//设置当XMLHttpRequest对象状态改变时调用的函数,注意函数名后面不要添加小括号
xmlHttpRequest.onreadystatechange = getData;
//定义函数
function getData()
{
   //判断XMLHttpRequest对象的readyState属性值是否为4,如果为4表示异步调用完成
   if(xmlHttpRequest.readyState == 4)
   {
   /设置获取数据的语句
   }
}

4、设置获取服务器返回数据的语句

如果XMLHttpRequest对象的readyState属性值等于4,表示异步调用过程完毕,就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。

但是,异步调用过程完毕,并不代表异步调用成功了,如果要判断异步调用是否成功,还要判断XMLHttpRequest对象的status属性值,只有该属性值为200,才表示异步调用成功,因此,要获取服务器返回数据的语句,还必须要先判断XMLHttpRequest对象的status属性值是否等于200,如以下代码所示:

if(xmlHttpRequst.status == 200)
  {
     //使用以下语句将返回结果以字符串形式输出
     document.write(xmlHttpRequest.responseText);
     //或者使用以下语句将返回结果以XML形式输出
     //document.write(xmlHttpRequest.responseXML);
  }

注意:如果HTML文件不是在Web服务器上运行,而是在本地运行,则xmlHttpRequest.status的返回值为0。因此,如果该文件在本地运行,则应该加上xmlHttpRequest.status == 0的判断。

通常将以上代码放在响应HTTP请求状态变化的函数体内,如以下代码所示:

//设置当XMLHttpRequest对象状态改变时调用的函数,注意函数名后面不要添加小括号
xmlHttpRequest.onreadystatechange = getData;
//定义函数
  function getData()
  {
    //判断XMLHttpRequest对象的readyState属性值是否为4,如果为4表示异步调用完成
    if(xmlHttpRequest.readyState==4)
    {
       //设置获取数据的语句
       if(xmlHttpRequest.status == 200 || xmlHttpRequest.status == 0)
       {
          //使用以下语句将返回结果以字符串形式输出
          document.write(xmlHttpRequest.responseText);
          //或者使用以下语句将返回结果以XML形式输出
          //docunment.write(xmlHttpRequest.responseXML);
       }
     }
  }

5、发送HTTP请求

在经过以上几个步骤的设置之后,就可以将HTTP请求发送到Web服务器上去了。发送HTTP请求可以使用XMLHttpRequest对象的send()方法,其语法代码如下所示:

XMLHttpRequest.send(data)

其中data是个可选参数,如果请求的数据不需要参数,即可以使用null来替代。data参数的格式与在URL中传递参数的格式类似,以下代码为一个send()方法中的data参数的示例:

name=myName&value=myValue

只有在使用send()方法之后,XMLHttpRequest对象的readyState属性值才会开始改变,也才会激发readystatechange事件,并调用函数。

6、局部更新

在通过Ajax的异步调用获得服务器端数据之后,可以使用JavaScript或DOM来将网页中的数据进行局部更新。常用的局部更新的方式有以下3种:

 ⑴表单对象的数据更新

表单对象的数据更新,通常只要更改表单对象的value属性值,其语法代码如下所示:

FormObject.value = "新数值"

有关表单对象的数据更新的示例如以下代码所示:

<html>
  <head>
  <title>局部更新</title>
  <script language = "javascript" type = "text/javascript">
  <!--
  function changeData()
  {
     document.myForm.myText.value = "更新后的数据"
  }
  -->
  </head>
  <body>
     <form name = "myForm">
     <input type = "text" value = "原数据" name = "myText">
     <input type = "button" value = "更新数据" onclick = "changeData()">
     </form>
   </body>
</html>

⑵IE浏览器中标签间文本的更新

在HTML代码中,除了表单元素之外,还有很多其他的元素,这些元素的开始标签与结束标签之间往往也会有一点文字(如以下代码所示),对这些文字的更新,也是局部更新的一部分。

<p>文字</p>
<span>文字</span>
<div>文字</div>
<label>文字</label>
<b>文字</b>
<i>文字</i>

在IE浏览器中,innerText或innerHTML属性可以用来更改标签间文本的内容。其中innerText属性用于更改开始标签与结束标签之间的纯文本内容,而innerHTML属性用于更改HTML内容。如以下代码所示: 

<html>
<head>
<title>局部更新</title>
<script language = "javascript" type = "text/javascript">
    <!--
    function changeData()
    {
       myDiv.innerText = "更新后的数据";
    }
                                  -->
</script>
</head>

<body>
   <div id = "myDive">原数据</div>
   <input type = "button" value = "更新数据" onclick = "changeData()">
</body>
</html>

 ⑶DOM技术的局部刷新

 innerText和innerHTML两个属性都是IE浏览器中的属性,在Netscape浏览器中并不支持该属性。但无论是IE浏览器还是Netscape浏览器,都支持DOM。在DOM中,可以修改标签间的文本内容。

在DOM中,将HTML文档中的每一对开始标签和结束标签都看成是一个节点。例如HTML文档中有一个标签如下所示,那么该标签在DOM中称之为一个“节点”。

<div id = "myDiv">原数据</div>

 在DOM中使用getElementById()方法可以通过id属性值来查找该标签(或者说是节点),如以下语句所示:

var node = document.getElementById("myDiv");

注意:在一个HTML文档中,每个标签中的id属性值是不能重复的。因此,使用getElementById()方法获得的节点是唯一的。

 在DOM中,认为开始标签与结束标签之间的文本是该节点的子节点,而firstChild属性可以获得一个节点下的第1个子节点。如以下代码可以获得<div>节点下的第1个子节点,也就是<div>标签与</div>标签之间的文字节点。

node.firstChild

注意,以上代码获得的是文字节点,而不是文字内容。如果要获得节点的文字内容,则要使用节点的nodeValue属性。通过设置nodeValue属性值,可以改变文字节点的文本内容。完整的代码如下所示:

<html>
<head>
<title>局部更新</title>
<script language = "javascript" type = "text/javascript">
<!--
  function changeData()
  {
  //查找标签(节点)
  var node = document.getElementById("myDiv");
  //在DOM中标签中的文字被认为是标签中的子节点
  //节点的firstChild属性为该节点下的第1个子节点
  //nodeValue属性为节点的值,也就是标签中的文本值
  node.firstChild.nodeValue = "更新后的数据";
  }
  -->
</script>
</head>
</html>

注意:目前主流的浏览器都支持DOM技术的局部刷新。

7、完整的AJAX实例

<html>
<head>
<title>AJAX实例</title>
<script language="javascript" type="text/javascript">    
         <!--

          var xmlHttpRequest;  //定义一个变量用于存放XMLHttpRequest对象
          //定义一个用于创建XMLHttpRequest对象的函数
          function createXMLHttpRequest()
          {
          if(window.ActiveXObject)
          {
          //IE浏览器的创建方式
          xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
         }else if(windew.XMLHttpRequest)
         {
         //Netscape浏览器中的创建方式
         xmlHttpRequest = new XMLHttpRequest();
         }
         }
         //响应HTTP请求状态变化的函数
         function httpStateChange()
         {
         //判断异步调用是否完成
         if(xmlHttpRequest.readyState == 4)
         {
         //判断异步调用是否成功,如果成功开始局部更新数据
         if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0)
         {
         //查找节点
         var node = document.getElementById("myDIv");

         //更新数据

          node.firstChild.nodeValue = xmlHttpRequest .responseText;
         }
         else
         {
          //如果异步调用未成功,弹出警告框,并显示出错信息
          alert("异步调用出错/n返回的HTTP状态码为:"+xmlHttpRequest.status + "/n返回的HTTP状态信息为:" + xmlHttpRequest.statusText);
        }
       }
       }
       //异步调用服务器段数据
       function getData(name,value)
      {                   
      //创建XMLHttpRequest对象
      createXMLHttpRequest();
      if(xmlHttpRequest!=null)
      {
      //创建HTTP请求
      xmlHttpRequest.open("get","ajax.text",true)
      //设置HTTP请求状态变化的函数
      xmlHttpRequest.onreadystatechange = httpStateChange;
      //发送请求
      xmlHttpRequest.send(null);
      }
   }
   -->
   </script>
</head>

<body>
   <div id="myDiv">原数据</div>
   <input type = "button" value = "更新数据" onclick = "getData()">
</body>
</html>

总结

到此这篇关于实现AJAX异步调用和局部刷新的基本步骤的文章就介绍到这了,更多相关实现AJAX的步骤内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery键盘事件介绍
Jan 31 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
详解Vue单元测试case写法
May 24 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
一篇文章弄清楚Ajax请求的五个步骤
VUE中的v-if与v-show区别介绍
Mar 13 #Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 #Vue.js
Vue2.0搭建脚手架
Vue.js中v-for指令的用法介绍
Mar 13 #Vue.js
面试中canvas绘制图片模糊图片问题处理
Javascript中async与await的捕捉错误详解
Mar 03 #Javascript
You might like
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python程序退出方式小结
2017/12/09 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
对Django url的几种使用方式详解
2019/08/06 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
HTTP状态码详解
2021/03/18 杂记
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
个人自我剖析材料
2014/02/07 职场文书
环保小标语
2014/06/13 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript