3.6 利用Ajax实现网页的get请求

Ajax的全称是Asynchronous JavaScript and XML（异步的JavaScript和XML）。Ajax不是一种新的计算机语言，而是几种现有技术的全新组合和应用。利用Ajax可以实现浏览器与服务器端完美的数据通信，而这些数据通信无须基于网页重新加载。简单来说，Ajax就是XMLHttpRequest、JavaScript、XML、CSS和HTML技术的组合。

jQuery提供了对Ajax很好的支持，使用者无须关心Ajax的核心对象或实现机制，只需要使用$.get()或$.post()就能很方便地操作。

$.get()的语法为：

$.get( url [, data ] [, success ] [, dataType ] )

data参数返回的可以是string字符串、json对象或JavaScript代码。下面演示一个例子，用户请求某个文件信息，服务器返回该文件内容。

【示例3-7】get-ajax.html

        01    <! DOCTYPE HTML>
        02    <html>
        03    <head>
        04    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        05    <title>$.get()</title>
        06    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
        07    <script type="text/javascript">
        08        function sendAjax() {
        09             $.get("data.txt", function(data){//指定url和回调函数
        10               alert(data);  //展示返回结果
        11               }, "text");
        12       }
        13    </script>
        14    </head>
        15    <body style="text-align:center">
        16        <input type="button" value="获取数据" onclick="sendAjax(); "/>
        17    </body>
        18    </html>

本示例的运行效果如图3.8所示。这里读者要注意，data.txt必须是UTF-8格式，和HTML格式一致。第11行指定dataType参数为text，不然本示例只能在IE下运行。

图3.8 $.get()效果

$.get()方法其实是$.ajax()的简写形式。当获取数据成功或失败时需要指定不同的方式，就需要用$.ajax()的完整形式，语法如下：

        $.ajax({
          url: url,
          data: data,
          success: success,
          error:error,
          dataType: dataType
        });

下面更改前面的示例，为获取数据参考成功和失败的方法。

【示例3-8】get-ajax1.html

        01    <! DOCTYPE HTML>
        02    <html>
        03    <head>
        04    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        05    <title>$.ajax()</title>
        06    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
        07    <script type="text/javascript">
        08        function sendAjax() {
        09             $.ajax({
        10             url:"data.txt",
        11             dataType: 'text',
        12             success:function(data, status){
        13               alert("结果："+data);
        14               alert("状态："+status);
        15             },
        16             error:function(req, status, error){
        17               alert("状态："+status);
        18               alert("错误："+error);
        19             }});
        20        }
        21    </script>
        22    </head>
        23    <body style="text-align:center">
        24        <input type="button" value="获取数据" onclick="sendAjax(); "/>
        25    </body>
        26    </html>

第09～19行使用标准的$.ajax()获取data.txt的值，并输出是否成功的状态信息。本示例的效果如图3.9所示。

图3.9 $.ajax()效果

上一章目录下一章