代码改变世界
[登录 · 注册]
  • Ajax 学习总结
  •    Ajax 技术在 JavaWeb 应用中随处可见,比如购物车中根据商品数量及时更新等应用,那么我们今天就来说说 Ajax 的一些小应用!

      Ajax 技术也就是允许浏览器与服务器通信而无需刷新当前页面,数据在客户端和服务端独立传输,而不是以前客户端向服务端发送一个请求,服务器返回整个页面,如此反复。完成 Ajax 请求就需要使用 XMLHttpRequest 类的方法,下面我们先开始介绍 XMLHttpReqest 的 API

    一、XMLHttpRequest API

      1.1 XMLHttpRequest 方法

        1. open("method", "url") -- -- 建立对服务器的调用,Method 参数可以是 get,也可以是 post,url 可以是相对的也可以是绝对的(准备发送请求)

            2. send("content")  -- -- 向服务器发送请求(发送的内容)

            3. setRequestHeader(“header”, "value") -- -- 把指定的首部设置为所提供的值,在设置任何首部之前必须先调用 open() 方法

      1.2 XMLHttpRequest 属性

        1. OnReadystateChange  -- -- 每个状态改变都会触发这个时间处理器,通常是 JS 函数(改事件由服务器触发)

          1.2.1 Ajax 执行过程中,服务器会通知客户端当前的通信状态,依靠 readyState 属性实现,改变 readryState 属性是服务器对客户端连接操作的一种方式,每次 readyState 属性改变都会触发 onReadyStateChange  事件

        2. readyState -- -- 请求的状态,有 5 个可取值 0(未初始化), 1(正在加载), 2(已经加载), 3(交互中), 4(已经完成) 

        3. responseText -- -- 服务器的响应,表示为一个串

        4. responseXML -- -- 服务器的响应,表示为XML 可以解析为 DOM 对象

        5. status -- -- 服务器的 Http 状态码(200 对应 ok,404 对应 notFound)

     二、Ajax 小案例(使用 JS 实现)

      使用 Ajax 实现如下案例,分别用三种数据传输格式(Html、XML、JSON)

      2.1  案例演示

      

      2.2 Html 传输格式

        由于返回的数据格式为 html 所以利用函数 innerHtml 插入标签内即可。

        htmlTest.jsp 代码如下

     1 <%--
     2   Created by IntelliJ IDEA.
     3   User: yin‘zhao
     4   Date: 2017/12/04
     5   Time: 23:23
     6   To change this template use File | Settings | File Templates.
     7 --%>
     8 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
     9 <html>
    10 <head>
    11     <title>HtmlPage</title>
    12     <script type="text/javascript">
    13         window.onload = function () {
    14 //            获取 a 标签
    15             var aTags = document.getElementsByTagName("a");
    16 //            为每一个 a 标签添加点击事件
    17             for (var i = 0; i < aTags.length; i++) {
    18                 aTags[i].onclick = function () {
    19 //                    新建 XMLHttpRequest 对象
    20                     var request = new XMLHttpRequest();
    21 //                    定义传输方法为 GET
    22                     var method = "GET";
    23 //                    定义 URL
    24                     var url = this.href + "?time=" + new Date();
    25 //                    发送请求
    26                     request.open(method, url);
    27 //                    不需要传输数据,设置传输内容为 null
    28                     request.send(null);
    29 //                    处理响应
    30                     request.onreadystatechange = function () {
    31 //                        如果响应已经完成
    32                         if (request.readyState == 4) {
    33 //                            如果服务器状态码正确
    34                             if (request.status == 200 || request.status == 304) {
    35 //                                那么就将响应字段加入预先定义好的 Html 中
    36                                 document.getElementById("htmlTest").innerHTML = request.responseText;
    37                             }
    38                         }
    39                     }
    40 //                    超链接点击事件返回 false,取消其默认事件的触发
    41                     return false;
    42                 }
    43             }
    44         }
    45     </script>
    46 </head>
    47 <body>
    48 <ul>
    49     <li><a href="yy.html">YY Page</a></li><br>
    50     <li><a href="SSPage.html">SS Page</a></li><br>
    51     <li><a href="YYSSPage.html">YS Page</a></li><br>
    52 </ul>
    53 <div id="htmlTest"></div>
    54 </body>
    55 </html>

        各超链接所对应的页面(SSPage.jsp、yy.html、YYSSPage.html)

    1 <h3>SS</h3>
    2 <b>ssPage please go to</b>
    1 <h3>YY</h3>
    2 <b>yyPage please go to</b>
    1 <h3>YS</h3>
    2 <b>ysPage please go to</b>

      2.3 XML 传输格式

        传输格式为 XML 需要在 jsp 页面中解析为 XML 获取标签内容然后加入页面

        xmlTest.jsp

     1 <%--
     2   Created by IntelliJ IDEA.
     3   User: yin‘zhao
     4   Date: 2017/12/05
     5   Time: 8:41
     6   To change this template use File | Settings | File Templates.
     7 --%>
     8 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
     9 <html>
    10 <head>
    11     <title>XMLPage</title>
    12     <script type="text/javascript">
    13         window.onload = function () {
    14             var aTag = document.getElementsByTagName("a");
    15             for (var i = 0; i < aTag.length; i++) {
    16                 aTag[i].onclick = function () {
    17                     var url = this.href + "?time=" + new Date();
    18                     var method = "GET";
    19                     var request = new XMLHttpRequest();
    20 
    21                     request.open(method, url);
    22                     request.send(null);
    23                     request.onreadystatechange = function () {
    24                         if (request.readyState == 4) {
    25                             if (request.status == 200 || request.readyState == 304) {
    26 //                                获得返回数据的 XML 格式
    27                                 var result = request.responseXML;
    28 //                                获得返回内容的 name 标签
    29                                 var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
    30 //                                获得返回内容的 website 标签
    31                                 var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
    32 //                                创建 h3 标签
    33                                 var hNode = document.createElement("h3");
    34 //                                将 website 内容加入到 h3 标签内
    35                                 hNode.appendChild(document.createTextNode(name));
    36 
    37                                 var bNode = document.createElement("b");
    38                                 bNode.appendChild(document.createTextNode(website));
    39 
    40                                 var divNode = document.getElementById("details");
    41 //                                每次点击的时候首先将其内容清空,在加入对应的标签
    42                                 divNode.innerHTML = "";
    43                                 divNode.appendChild(hNode);
    44                                 divNode.appendChild(bNode)
    45                             }
    46                         }
    47                     }
    48                     return false;
    49                 }
    50             }
    51         }
    52     </script>
    53 </head>
    54 <body>
    55   <ul>
    56       <li><a href="yy.xml">YYPage</a></li><br><br>
    57       <li><a href="ss.xml">SSPage</a></li><br><br>
    58       <li><a href="ys.xml">YSPage</a></li><br><br>
    59   </ul>
    60   <div id="details"></div>
    61 </body>
    62 </html>

        各超链接所对应的 xml 文件(ss.xml、yy.xml、ys.xml)

    1 <?xml version="1.0" encoding="UTF-8" ?>
    2 <details>
    3 <name>ss</name>
    4 <website>ss.com</website>
    5 </details>
    1 <?xml version="1.0" encoding="UTF-8" ?>
    2 <details>
    3     <name>yy</name>
    4     <website>yy.com</website>
    5 </details>
    1 <?xml version="1.0" encoding="UTF-8" ?>
    2 <details>
    3     <name>ys</name>
    4     <website>ys.com</website>
    5 </details>

      2.4 JSON 传输格式

        传输数据格式为 JSON 首先在页面需要将其转换为 JSON 格式

        jsonTest.jsp

     1     <%--
     2       Created by IntelliJ IDEA.
     3       User: yin‘zhao
     4       Date: 2017/12/04
     5       Time: 23:23
     6       To change this template use File | Settings | File Templates.
     7     --%>
     8     <%@ page contentType="text/html;charset=UTF-8" language="java" %>
     9     <html>
    10     <head>
    11         <title>JSONPage</title>
    12         <script type="text/javascript">
    13             window.onload = function () {
    14                 var aTags = document.getElementsByTagName("a");
    15 
    16                 for (var i = 0; i < aTags.length; i++) {
    17                     aTags[i].onclick = function () {
    18                         var request = new XMLHttpRequest();
    19                         var method = "GET";
    20                         var url = this.href + "?time=" + new Date();
    21                         request.open(method, url);
    22                         request.send(null);
    23 
    24                         request.onreadystatechange = function () {
    25                             if (request.readyState == 4) {
    26                                 if (request.status == 200 || request.status == 304) {
    27                                     var result = request.responseText;
    28     //                                转换为 JSON 格式,将字符串
    29                                     var jsonCon = eval("(" + result + ")");
    30     //                                获取 name 和 website 节点值
    31                                     var name = jsonCon.person.name;
    32                                     var website = jsonCon.person.website;
    33     //                                创建新的 html 节点
    34                                     var hNode = document.createElement("h3");
    35                                     hNode.appendChild(document.createTextNode(name));
    36                                     var bNode = document.createElement("b");
    37     //                                给新建的节点添加子节点,并为新的子节点添加内容
    38                                     bNode.appendChild(document.createTextNode(website));
    39 
    40                                     var divNode = document.getElementById("jsonTest");
    41     //                                清空 div 节点中的内容
    42                                     divNode.innerHTML = "";
    43     //                                添加子节点
    44                                     divNode.appendChild(hNode);
    45                                     divNode.appendChild(bNode);
    46                                 }
    47                             }
    48                         }
    49                         return false;
    50                     }
    51                 }
    52             }
    53         </script>
    54     </head>
    55     <body>
    56     <ul>
    57         <li><a href="yy.json">YY Page</a></li><br>
    58         <li><a href="ss.json">SS Page</a></li><br>
    59         <li><a href="ys.json">YS Page</a></li><br>
    60     </ul>
    61     <div id="jsonTest"></div>
    62     </body>
    63     </html>

        各超链接所对应的 json 文件

    1 {
    2   "person":{
    3     "name":"ss",
    4     "website":"ss.com"
    5   }
    6 } 
    1 {
    2   "person":{
    3     "name":"ys",
    4     "website":"ys.com"
    5   }
    6 } 
    {
      "person": {
        "name": "yy",
        "website": "yy.com"
      }
    }

      2.5 各种传输格式的优缺点

        2.5.1 优点

          1. Html 传输格式不需要 js 解析 html 代码,可读性好,html 代码和 innerHtml 属性搭配效率高

          2. XML 是一种通用的传输格式,不必把数据强加到已经定义好的格式中,而为数据自定义合适的标记,且利用 DOM 可以完全掌握文档

          3. JSON 和 XML 相似但相比起来更加轻巧

        2.5.2 缺点

          1. 若需要使用 Ajax 更新一篇文档的多个部分则 html 不合适

          2. 当浏览器接收到较长的 XML 文档时 DOM 解析可能会很复杂

          3. JSON 的语法严谨,代码不宜读

        2.5.3 适用场景

          1. 若 application 不需要与其他程序共享数据时使用 HTML

          2. 如果数据需要重用 JSON 在性能和大小方面有优势

          3. 当远程程序未知时 XML 文档是首选

    三、案例再实现(使用 JQuery 实现)

      案例效果如上,只是实现方式为 JQuery

      3.1 JQuery 中 Ajax 的 API

        1. load(url) -- -- 任何 HTML 节点都可以使用 load 方法加载 Ajax,它可以载入远程的 HTML 代码并插入 HTML 中,若需要使用部分内容则可以使用选择器(在定义 URL 的时候使用选择器)

        2. load 方法的传递方式根据 load 方法是否传递参数而定,若没有传递参数那么就是 get 请求方式,若有则为 post 请求方式

        3. 对于必须在完成加载才可以继续的操作,load() 方法提供了回调函数,该函数有三个参数,代表请求返回内容的 data,代表请求状态的 textStatus 对象和 XMLHttpRequest 对象

        4. $.get(url, args, function)  -- -- 使用 get 方式进行异步请求,data 代表返回的内容可以是 XML、Html、JSON 等数据格式;args 为 JSON 格式的传递参数;响应结束时触发回调函数,其响应结果在函数参数中

        5. $.getJSON() -- -- 对于 JSON 传输格式直接使用该方法,参数和 $.get() 方法一样

      3.2 HTML 数据传递格式

        htmlTest.jsp

     1 <%--
     2   Created by IntelliJ IDEA.
     3   User: yin‘zhao
     4   Date: 2017/12/04
     5   Time: 23:23
     6   To change this template use File | Settings | File Templates.
     7 --%>
     8 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
     9 <html>
    10 <head>
    11     <title>HtmlPage</title>
    12     <script type="text/javascript" src="../jquery-1.7.2.js"></script>
    13     <script type="text/javascript">
    14         $(function () {
    15             $("a").click(function () {
    16 //                使用选择器,选择出 h3 标签部分
    17                 var url = this.href + " h3";
    18 //                参数
    19                 var args = {"time": new Date()};
    20 //                所有的 html 节点均可调用 load 方法将返回内容直接加入到目标标签内
    21                 $("#htmlTest").load(url, args);
    22                 return false;
    23             });
    24         })
    25     </script>
    26 </head>
    27 <body>
    28 <ul>
    29     <li><a href="yy.html">YY Page</a></li><br>
    30     <li><a href="SSPage.html">SS Page</a></li><br>
    31     <li><a href="YYSSPage.html">YS Page</a></li><br>
    32 </ul>
    33 <div id="htmlTest"></div>
    34 </body>
    35 </html>

      3.3 XML 数据传输格式

      xmlTest.jsp

     1 <%--
     2   Created by IntelliJ IDEA.
     3   User: yin‘zhao
     4   Date: 2017/12/05
     5   Time: 8:41
     6   To change this template use File | Settings | File Templates.
     7 --%>
     8 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
     9 <html>
    10 <head>
    11     <title>XMLPage</title>
    12     <script type="text/javascript" src="../jquery-1.7.2.js"></script>
    13     <script>
    14         $(function () {
    15             $("a").click(function () {
    16                 var url = this.href;
    17                 var args = {"time": new Date()};
    18 
    19                 $.get(url, args, function (data) {
    20 //                    找到 name 节点属性值
    21                     var name = $(data).find("name").text();
    22                     var website = $(data).find("website").text();
    23 //                    首先清空在添加节点,然后加入新建的节点
    24                     $("#details").empty().append("<h2>" + name + "</h2><b>" + website + "</b>");
    25                 });
    26                 return false;
    27             })
    28         })
    29     </script>
    30 </head>
    31 <body>
    32 <ul>
    33     <li><a href="yy.xml">YYPage</a></li>
    34     <br><br>
    35     <li><a href="ss.xml">SSPage</a></li>
    36     <br><br>
    37     <li><a href="ys.xml">YSPage</a></li>
    38     <br><br>
    39 </ul>
    40 <div id="details"></div>
    41 </body>
    42 </html>

      3.4 JSON 数据传输格式

      jsonTest.html

     1 <%--
     2   Created by IntelliJ IDEA.
     3   User: yin‘zhao
     4   Date: 2017/12/04
     5   Time: 23:23
     6   To change this template use File | Settings | File Templates.
     7 --%>
     8 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
     9 <html>
    10 <head>
    11     <title>JSONPage</title>
    12     <script type="text/javascript" src="../jquery-1.7.2.js"></script>
    13     <script type="text/javascript">
    14         $(function () {
    15             $("a").click(function () {
    16                 var url = this.href;
    17                 var args = {"time": new Date()};
    18 
    19                 $.getJSON(url, args, function (data) {
    20                     var name = data.person.name;
    21                     var website = data.person.website;
    22 
    23                     $("#jsonTest").empty().append("<h3>" + name + "</h3><b>" + website + "</b>");
    24                 })
    25                 return false;
    26             })
    27         })
    28     </script>
    29 </head>
    30 <body>
    31 <ul>
    32     <li><a href="yy.json">YY Page</a></li><br>
    33     <li><a href="ss.json">SS Page</a></li><br>
    34     <li><a href="ys.json">YS Page</a></li><br>
    35 </ul>
    36 <div id="jsonTest"></div>
    37 </body>
    38 </html>

       以上这些就是我所知道有关 Ajax 的一些知识,我们可以利用以上知识实现三级联动,演示如下:

      

      写的有不好的地方还望指出,谢谢!

  • 【推广】 阿里云小站-上云优惠聚集地(新老客户同享)更有每天限时秒杀!
    【推广】 云服务器低至0.95折 1核2G ECS云服务器8.1元/月
    【推广】 阿里云老用户升级四重礼遇享6.5折限时折扣!
  • 原文:https://www.cnblogs.com/bgzyy/p/8109673.html
Copyright 2008-2020 晋ICP备12007731号-1