Ajax技术

最新推荐文章于 2022-03-20 17:11:23 发布

祁娥安

最新推荐文章于 2022-03-20 17:11:23 发布

阅读量1.1k

点赞数

分类专栏： Ajax 文章标签： Ajax XMLHttpRequest JavaScript

本文链接：https://blog.csdn.net/weixin_45794138/article/details/103318886

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Ajax是一种创建灵活、交互性强的Web应用技术，使用Ajax可以实现响应迅速、无刷新的Web应用。Ajax集成了目前浏览器中通过JavaScript脚本可以实现的所有功能，并以一种崭新的方式使用这些技术，使得B/S结构的Web开发变得更加灵活。

Ajax概述

随着Web 2.0时代的到来，Ajax技术产生并逐渐成为主流的Web应用。相对于传统的Web应用开发，Ajax运用的是更加先进、更加标准化、更加高效的Web开发技术体系。由于Ajax是客户端技术，其编译和执行由浏览器完成，所以无论哪种Web语言都可以使用Ajax技术开发前台应用和页面特效。

什么是Ajax

Ajax是JavaScript、XML、CSS、DOM等多种已有技术的结合，可以实现客户端的异步请求操作，这样可以实现在不需要刷新页面的情况下与服务器进行通信，从而减少了用户的等待时间。Ajax(Asynchronous JavaScript And XML，异步JavaScrip和XML技术)是由Jesse James Garrett创造的。可以说，Ajax是"增强的JavaScript"，是一种可以调用后台服务器获得数据的客户端JavaScript技术，支持更新部分页面的内容而不重载整个页面。

Ajax的开发模式

传统的Web应用模式中，页面中用户的每一次操作都将触发一次返回Web服务器的HTTP请求，服务器进行相应的处理后，返回一个HTML页面给客户端浏览器。Ajax中，页面中用户的操作将通过Ajax引擎与服务器进行通信，然后将返回结果提交给客户端页面的Ajax引擎，再由Ajax引擎决定将这些数据插入页面的指定位置。
一个典型的Ajax应用如下图所示：
在这里插入图片描述

Ajax的优点

Ajax在用户与服务器之间引入了Ajax引擎作为中间媒介，Web页面不用打断交互流程就可以重新加载，实现动态更新，从而可以消除网络交互过程中"处理—等待—处理—等待"的缺点。也就是说，不需要刷新客户端浏览器就可以实现重新向服务器发出请求。
使用Ajax的优点具体表现在以下几个方面：

无刷新更新页面。Ajax使用XMLHttpRequest对象向服务器发送请求并得到服务器响应，在不需要重新载入整个页面的情况下，即可根据服务器端返回的请求更改页面内容。使用Ajax技术可以有效减少用户等待页面刷新的时间。
可以把一部分以前由服务器负担的工作转移到客户端，利用客户端闲置的资源进行处理，减轻服务器和宽带的负担，节约空间和宽带租用成本。
减轻服务器的负担。Ajax的原则是"按需求获取数据"，可以最大程度地减少冗余请求和响应对服务器造成的负担。
可以调用XML等外部数据，进一步促进Web页面显示和数据的分离。
Ajax是基于标准化并被广泛支持的技术，不需要下载插件或者小程序。

Ajax技术的组成

Ajax技术并不是一种新型的语言，而是多种已有的Web技术的整合，主要包括JavaScript、XML语言、DOM和CSS等。

JavaScript脚本语言

JavaScript是一种是一种解释型的、基于对象的脚本语言，其核心已经嵌入目前主流的Web浏览器中。虽然平时应用最多的是通过 JavaScript实现一些网页特效及表单数据验证等功能，但 JavaScript可以实现的功能远不止这些。 JavaScript是一种具有车富的面向对象特性的程序设计语言，利用它能执行许多复杂的任务。例如Ajax就是利用 JavaScript将DOM、 XHTML（或HTML）、XML以及CSS等技术综合起来，并控制它们的行为。因此，要开发一个复杂高效的Ajax应用程序，就必须对 JavaScript有深入的了解。

JavaScript不是Java语言的精简版，并且只能在某个解释器或“宿主”上运行，如ASP、PHP、JSP、Internet浏览器或者 Windows脚本宿主。

JavaScript是一种宽松类型的语言，宽松类型意味着不必显式定义变量的数据类型。此外，在大多数情况下， JavaScript将根据需要自动进行转换。例如，如果将一个数值添加到由文本组成的某项（一个字符串），该数值将被转换为文本。

XMLHttpRequest对象

XMLHttpRequest是Ajax中最核心的技术，它是一个具有应用程序接口的 JavaScript对象，能够使用超文本传输协议（HTTP）连接一个服务器，是微软公司为了满足开发者的需要，于1999年在IE 5.0浏览器中率先推出的。现在许多浏览器都对其提供了支持，不过实现方式与IE有所不同。使用XMLHttpRequest对象，Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，不用每次都刷新页面，也不用每次都将数据处理的工作交给服务器来做，这样既减轻了服务器负担，又加快了响应速度，缩短了用户等待的时间。

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。XMLHttpRequest是Ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是JavaScript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

使用XMLHttpRequest对象发送请求和处理响应之前，首先需要初始化该对象。由于XMLHttpRequest不是一个W3C标准，所以对于不同的浏览器，初始化的方法也是不同的。

IE测览器
IE浏览器把 XMLHttpRequest实例化为一个 ActiveX对象。
具体方法如下:

var http_request=new ActiveXObject("Msxml2.XMLHTTP");

或者

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

上面语法中的Msxml2.XMLHTTP和Microsoft.XMLHTTP是针对IE浏览器的不同版本进行设置的，日前比较常用的是这两种。

Mozilla、 Safari等其他浏览器
Mozilla、Safari等其他浏览器把它实例化一个本地JavaScript对象。
具体方法如下：

var http_request=new XMLHttpRequest();

为了提高程序的兼容性，可以创建一个跨浏览器的XMLHttpRequest对象。方法很简单，只需要判断一下不同浏览器的实现方式，如果浏览器提供了XMLHttpReauest类，则直接创建一个实例，否则使用IE的ActiveX控件。
具体代码如下：

//Mozilla、Safari等浏览器
if(window.XMLHttpRequest){
  http_request=new XMLHttpRequest();
  //IE浏览器
}else if(window.ActiveXObject){
try{
 http_request=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
  try{
   http_request=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
     }
   }
}

由于JavaScript具有动态类型特性，而且XMLHttpRequest对象在不同浏览器上的实例是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，不需要考虑创建该实例的方法。

1. XMLHttpRequest对象的常用方法
（1）open()方法
open()方法用于设置进行异步请求目标的URL，请求方法以及其他的参数信息，具体语法如下：

open("method","URL"[,asyncFlag[,"userName"[,"password"]]])

在上面的语法中，method用于指定请求的类型，一般为get或post；URL用于指定请求的地址，可以使用绝对地址或者相对地址，并且可以传递查询字符串；asyncFlag可选参数，用于指定请求方式，同步请求为true，异步请求为false，默认为true；userName为可选参数，用于指定用户名，没有时可省略；password为可选参数，用于指定请求密码，没有时可省略。
（2）send()方法
send()方法用于向服务器发送请求。如果请求声明为异步，该方法立即返回，否则将等到接收到响应为主。具体的语法格式如下：

send(content)

在上面的语法中，content用于指定发送的数据，可以是DOM对象的实例、输入流或字符串。如果没有参数需要传递，可以设置为null。
（3）setRequestHeader()方法
setRequestHeader(0方法为请求的HTTP头设置值。具体语法如下：

setRequestHeader("label","value")

在上面的语法中，label用于指定HTTP头，value用于为指定的HTTP头设置值。
注意：
setReauestHeader()方法必须在调用open()方法之后才能调用。
（4）abort()方法
abort()方法用于停止当前异步请求。
（5）getAllResponseHeaders()方法
getAllResponseHeaders()方法用于以字符串形式返回完整的HTTP头部信息，当存在参数时，表示以字符串形式返回由该参数指定的HTTP头信息。

2.XMLHttpRequest对象的常用属性
XMLHttpRequest对象的常用属性

属性	说明
onreadystatechange	每次状态改变都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求状态，有以下5个取值: 0=未初始化 1=正在加载 2=已加载 3=交互中 4=完成
responseText	服务器的响应，表示为字符串
responseXML	服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
status	返回服务器的HTTP状态码，如： 200="成功" 202="请求被接收，但尚未成功" 400="错误的请求" 404="文件未找到" 500="内部服务器错误"
statustext	返回HTTP状态码对应的文本

3.XMLHttpRequest对象与服务器交互
XMLHttpRequest对象最大的用途就是不需要刷新页面就可以与服务器进行交互。可以将Ajax与服务器的交互分为3个步骤：
（1）初始化XMLHttpRequest对象
关键代码如下：

 var xmlHttpRequest=false; //定义XMLHttpRequest对象
        try{
            //如果浏览器支持XMLHttpRequest对象，创建ActiveXObject对象
            xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try{
                xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e2){
                
            }
            if(!xmlHttpRequest&&typeof XMLHttpRequest!="undefined"){
               try{
                   xmlHttpRequest=new XMLHttpRequest();
               }catch(e3){
                   xmlHttpRequest=false;
               }
           }

（2）设置请求状态和返回处理函数
语法格式如下：

xmlHttpRequest.onreadystatechange=function_name;

其中，xmlHttpRequest是XMLHttpRequest的对象；function_name是用来处理请求状态和返回码的函数名(回调函数)。
（3）发送HTTP请求
语法格式如下：

xmlHttpRequest.open(send_method,url,flag);

其中，xmlHttpRequest是XMLHttpRequest的对象；send_method是发送方法，可以是GET或POST，对应表单使用的方法；url是页面调用的地址；flag是一个标记，如果为true，则表示在等待被调用页面响应的时间内可以继续执行的页面代码，反之为false。

代码实例： 通过XMLHttpRequest对象读取HTML文件，并输出读取结果。
关键代码如下：

<script language="javascript">
    //(1)初始化XMHttpReauest对象
      var xmlHttpRequest; //定义XMLHttpRequest对象
        function createXMLHttpRequestObject(){
            //IE浏览器下运行
            if(window.ActiveXObject){
                try{
                    xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
                }catch(e){
                    xmlHttpRequest=false;
                }
            }else{  //如果在Mozilla或其他的浏览器下运行
                try{
                    xmlHttpRequest=new xmlHttpRequest();
                }catch(e){
                    xmlHttpRequest=false;
                }
            }
            if(!xmlHttpRequest){
               alert("返回创建的对象或显示错误信息！");
               }else{
                   return xmlHttpRequest;
               }
        }
        function RequestHTML(){
            createXMLHttpRequestObject();
            //判断url调用的状态值并处理
            xmlHttpRequest.onreadystatechange=StatHandler;
            //调用text.html
            xmlHttpRequest.open("GET","text.html",true);
            xmlHttpRequest.send(null);
        }
        function StatHandler(){
            if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
               document.getElementById("webpage").innerHTML=xmlHttpRequest.responseText;
               }
        }
    </script> 
<!--创建超链接--> 
<a href="#" onclick="RequestHTML();">通过XMLHttpRequest对象请求HTML文件</a> 
<!--通过div标签输出请求内容-->
<div id="webpage"></div>

通过XMLHttpRequest对象不但可以读取HTML文件，还可以读取文本文、XML文件。其实现交互的方法与读取HTML文件类似。

XML、DOM和CSS

1.XML
XML(eXtensible Markup Language，可扩展的标记语言) 提供了用于描述结构化数据的格式。XMLHttpRequest对象与服务器交互的数据通常采用XML格式，但也可以是基于文本的其他格式。
2.DOM
DOM(Document Object Model，文档对象模型) 为XML文档的解析定义了一组接口。解析器读入整个文档，然后构建一个驻留内存的树结构，最后通过DOM可以遍历树以获取来自不同位置的数据，可以添加、修改、删除、查询和重新排列树及其分支。另外，还可以根据不同类型的数据源创建XML文档。在Ajax应用中，通过JavaScript操作DOM，可以达到不刷新页面的情况下实时修改用户界面的目的。
3.CSS
CSS(Cascading Style Sheet，层叠样式表) 是用于控制网页样式并允许将样式信息与网页内容分离的一种标记语言。在Ajax中，通常使用CSS进行页面布局，并通过改变文档对象的CSS属性控制页面的外观和行为。CSS是一种Ajax开发人员所需要的重要武器，提供了从内容中分离应用样式和设计的机制。虽然CSS在Ajax应用中扮演着至关重要的作用，但它也是构建创建跨浏览器应用的一大阻碍，因为不同的浏览器支持不同的CSS级别。

Ajax与PHP的交互

通过XMLHttpRequest对象请求PHP页面有两种方式，一种是GET方式，另一种是POST方式。具体使用哪一种方式与PHP进行交互，取决于PHP页面中变量值的传递方法，如果使用POST方法传递变量值，则使用POST方式进行交互操作。否则使用GET方式进行交互操作。

通过GET方式与PHP进行交互

代码实例： 应用GET方式，通过XMLHttpRequest对象与PHP进行交互。
（1）创建index.php文件，编写JS脚本，通过Ajax请求searchst.php文件，执行查询操作，将查询结果定义到DIV标签中，创建form表单，提交查询的关键字，通过DIV标签输出查询结果。代码如下：

<script language="javascript">
    //定义XMLHttpRequest对象
        var xmlHttp;
        function createXmlHttpRequestObject(){
            //如果在IE下运行
            if(window.ActiveXObject){
               try{
               	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                 }catch(e){
               	xmlHttp=false;
                 }
               }else{ //如果在Mozilla或其他的浏览器下运行
               	try{
               		xmlHttp=new XMLHttpRequest();
               	}catch(e){
               		xmlHttp=false;
               	}
               }
               //返回创建的对象或显示错误的信息
               if (!xmlHttp) {
               	alert("返回创建的对象或显示错误的信息");
               }else{
               	return xmlHttp;
               }
        }

        function showsimple(){
        	createXmlHttpRequestObject();
        	var content=document.getElementById("searchtxt").value;
        	if (content==" ") {
        		alert('查询关键字不能为空！');
        		return false;
        	}
        }

        //判断url调用的状态值并处理
        xmlHttp.onreadystatechange=StatHandler;
        xmlHttp.open("GET",'searchrst.php?content='+content,false);
        xmlHttp.send(null);

        function StatHandler(){
        	if (xmlHttp.readyState==4&&xmlHttp.status==200) {
        		document.getElementById("webpage").innerHTML=xmlHttp.responseText;
        	}
        }
    </script>
    
    <form id="searchform" name="searchform" method="get" action="#">
      <tr>
        <td height="40">&nbsp;</td>
          <td align="center">请输入关键字：&nbsp;
           <input type="text" name="searchtxt" id="searchtxt" size="30" />
              <input id="s_search" name="s_search" type="button" value="查询" onClick="return showsimple()" />
          </td>
      </tr>
    </form>
    <tr>
        <td align="center" valign="top">
            <div id="webpage"></div>
        </td>
    </tr>

（2）创建searchrst.php文件，在该文件中首先定义页面的编码格式，然后连接数据库，最后根据Ajax中传递的值执行查询操作，返回查询结果，代码如下：

<?php
    //发送指定数据的编码格式
    header('Content-type:text/html;charset=utf-8');
    //连接数据库
    include_once("../../conn/conn.php");
    //获取Ajax传递的查询关键字
    $cont=$_GET['content'];
    //判断如果关键字不为空
    if(!empty($cont)){
        //定义SQL语句
        $sql="select * from tb_Member where name like '%".$cont."%' ";
        //执行模糊查询
        $result=mysqli_query($conn,$sql);
        //获取查询结果
        if(mysqli_num_rows($result)>0){
            echo "<table width='500' border='1' cellpadding='1' cellspacing='1' bordercolor='#FFFFCC' bgcolor='#666666'>";
            echo "<tr>
            <td height='30' align='center' bgcolor='#FFFFFF'>用户名</td>
            <td align='center' bgcolor='#FFFFFF'>密码</td>
            <td align='center' bgcolor='#FFFFFF'>创建时间</td>
            </tr>";
            //循环输出查询结果
            while($myrows=mysqli_fetch_array($result)){
                echo "<tr><td height='22' bgcolor='#FFFFFF'>".$myrows['name']."</td>";
                echo "<td height='22' bgcolor='#FFFFFF'>".$myrows['password']."</td>";
                echo "<td height='22' bgcolor='#FFFFFF'>".$myrows[2]."</td>";
                echo "</tr>";
            }
            echo "</table>";
        }else{
            echo "没有符合条件的数据";
        }
    }
    ?>

通过POST方式与PHP交互

通过POST方式进行交互，主要针对的是PHP页面中通过POST方法提交的数据。
代码实例： 应用POST方式，通过XMLHttpRequest对象与PHP进行交互。将表单中的数据无刷新添加到指定的数据表中，添加成功后输出数据表中的数据。
（1）创建index.php文件，编写JavaScript脚本。在JavaScript脚本中，首先定义Ajax对象初始化函数createXmlHttpRequestObject()，然后定义Ajax对象处理函数showsimple()，通过POST方式与searchrst.php进行交互，最后定义数据处理函数StatHandler()，数据添加成功后，将数据库中的数据定义到DIV标签中，代码如下:

<script language="javascript">
        //定义XMLHttpRequest对象
        var xmlHttp;
        function createXmlHttpRequestObject(){
            //在IE浏览器中运行
            if(window.ActiveXObject){
               try{
                   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
               }catch(e){
                   xmlHttp=false;
                  }
               }else{  //在其他浏览器中运行
                   try{
                       xmlHttp=new XMLHttpRequest();
                   }catch(e){
                       xmlHttp=false;
                   }
               }
               //返回创建的对象或显示错误信息
               if(!xmlHttp){
                    alert("返回创建的对象或是显示错误信息！");
               }else{
                   return xmlHttp;
       }
            
            //创建主控制函数
            function showsimple(){
                createXmlHttpRequestObject();
                //获取表单提交的值
                var name=document.getElementById("username").value;
                var pwd=document.getElementById("password").value;
                var time=document.getElementById("time").value;
                //判断表单提交的值(不能为空)
                if(name==""&&pwd==""&&time==""){
                   alert("添加的数据不能为空");
                   return false;
                   }
                //构造URL函数
                var post_method="name="+name+"&pwd="+pwd+"&time="+time;
                //调用指定的添加文件
                xmlHttp.open("POST","searchrst.php",true);
                //设置请求头信息
                xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencodeed;");
                //判断URL调用的状态值并处理
                xmlHttp.onreadystatechange=StatHandler;
                //将数据发送到服务器
                xmlHttp.send(post_method);
            }
                
                //定义处理函数
                function StatHandler(){
                    //如果执行成功，则输出下面内容
                    if(xmlHttp.readyState==4&&xmlHttp.status==200){
                       if(xmlHttp.responseText=""){
                          alert("数据添加成功！");
                          //将服务器返回的数据定义到DIV中
                          document.getElementById("webpage").innerHTML=xmlHttp.responseText;
                          }else{  //如果返回值为空
                              alert("添加失败！");
                          }
                       }
                }
    </script>
<form id="searchform" name="searchform" method="post" action="#">
        <input name="username" type="text" id="username" size="25" />
        <input name="Submit" type="button" value="提交" onClick="showsimple();" />
</form>
<td colspan="2" align="center" valign="top"><div id="webpage"></div></td>

（2）创建searchrst.php文件，获取Ajax中POST方法传递的数据，执行insert语句，将数据添加到数据表中，添加成功后，查询出数据表中所有的数据，代码如下：

  <?php
    //指定发送数据的编码格式
    header("Content-type:text/html;charset=utf-8");
    //连接数据库
    include_once("../../conn/conn.php");
    //获取Ajax传递的值，并实现字符编码转换
    $userName=iconv('UTF-8','gb2312',$_POST['name']);
    $pwd=iconv('UTF-8','gb2312',$_POST['pwd']);
    $time=iconv('UTF-8','gb2312',$_POST['time']);
    $sql="insert into tb_Member(name,password,time) values('$userName','$pwd','$time')";
    //执行添加语句
    $result=mysqli_query($conn,$sql);
    if($result){
        $sqles="select * from tb_Member";
        $results=mysqli_query($conn,$sqles);
        echo "<table width='500' border='1' cellpadding='1' cellspacing='1' bordercolor='#FFFFCC' bgcolor='#666666'>";
        echo "<tr>
            <td height='30' align='center' bgcolor='#FFFFFF'>用户名</td>
            <td align='center' bgcolor='#FFFFFF'>密码</td>
            <td align='center' bgcolor='#FFFFFF'>创建时间</td>
            </tr>";
         //循环输出查询结果
        while ( $myrows = mysqli_fetch_array( $results ) ) {
                        echo "<tr><td height='22' bgcolor='#FFFFFF'>" . $myrows[ 'name' ] . "</td>";
                        echo "<td height='22' bgcolor='#FFFFFF'>" . $myrows[ 'password' ] . "</td>";
                        echo "<td height='22' bgcolor='#FFFFFF'>" . $myrows[ 2 ] . "</td>";
                        echo "</tr>";
                }
                echo "</table>";
        } else {
                echo "没有符合条件的数据";
        }
    ?>

Ajax开发注意事项

Aax在开发过程中需要在意以下几个问题：

1.测览器兼容性
Ajax使用了大量的JavaScript和Ajax引擎，而这些内容需要浏览器提供足够的支持。目前提供这些支持的浏览器有IE 5.0及以上版本、Mozila 1.0、 NetScape 7及以上版本。Mozilla虽然也支持Ajax，但是提供XMLHttpRequest对象的方式不一样，所以，使用Ajax的程序必须测试其针对各个浏览器的兼容性。

2.XMLHttpRequest对象封装
Ajax技术的实现主要依于XMLHttpRequest对象，但是在调用其进行异步数据传输时，由于XMLHttpRequest对象的实例在处理事件完成后就会被销毁，所以如果不对该对象进行封装处理，在下次需要调用它时就得重新构建，而且每次调用都需要写一大段的代码，使用起来很不方便。不过，现在很多开源的Ajax框架都提供了对XMLHttpRequest对象的封装方案。其详细内容这里不做介绍，读者可参考相关资料。

3.性能问题
Ajax将大量的计算从服务器移到了客户端，这就意味着浏览器将承受更大的负担，而不再是只负责简单的文档显示。由于Ajax的核心语言是JavaScript，而JavaScript并不是以高性能而知名，另外JavaScript对象也不是经量级的，特别是DOM元素耗费了大量的内存，因此、如何提高JavaScript代码的性能对于Ajax开发者来说尤为重要。

下面介绍3种优化Ajax应用执行速度的方法：

优化for循环。
将DOM节点附加到文档上。
尽量减少点操作符号"."的使用。

祁娥安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax技术

Ajax是一种创建灵活、交互性强的Web应用技术，使用Ajax可以实现响应迅速、无刷新的Web应用。Ajax集成了目前浏览器中通过JavaScript脚本可以实现的所有功能，并以一种崭新的方式使用这些技术，使得B/S结构的Web开发变得更加灵活。...
复制链接

扫一扫