学而实习之 不亦乐乎

jQuery基础:通过Ajax向服务器请求加载数据

2019-02-13 08:35:52

一、Ajax技术

Ajax(Asynchronous JavaScript and XML,异步 JavaScript 和 XML)是指一种快速创建交动态网页的技术。
从根本上说一个Ajax方案涉及以下技术:
1.JavaScript:处理与用户及其他浏览器相关事件的交互,解释来自服务器的数据,并将其呈现在页面上。
2.XMLHttpRequest:这个对象可以在不中断其他浏览器任务的情况下向服务器发送请求。
3.文本文件:服务器提供的 XML、HTML 或 JSON 格式的文本数据。

Ajax技术能将静态的网页转换成具有交互性的 Web 应用。所有现代的浏览器都支持 XMLHttpRequest 对象,但各浏览器对 XMLHttpRequest 对象的实现并不完全一致,幸好有 jQuery ,它可以帮我
们很好的解决这个问题。

二、基于请求加载数据

(1)加载HTML

利用 jQuery 来实现加载HTML很简单,所以下面仅给出示例。

本实例实现加载一小段HTML代码段(a.html)到HTML页面(index.html)中去。
index.html 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Load HTML Segment</title>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#letter-a a').click(function (event) {
                event.preventDefault();
                $('#container').load('a.html');
            });
        });
    </script>
</head>
<body>
    <div id="main">
        <div class="letter" id="letter-a">
            <h3><a href="#">Load Data</a></h3>
        </div>
        <div id="container">
        </div>
    </div>
</body>
</html>

a.html 代码:

<div>
    <p>This is the content of a.html</p>
</div>

(2)加载JSON数据

多数据时候我们可能并不想加载HTML到页面中,因为加载数据到页面,然后再进入处理,可能更灵活一些。
JSON是一种JavaScript内置的数据格式,既能减少数据传输量,也会减少编码量。同时由于JSON数据的定义比较严格,在使用时一定要注意格式,稍微不小心就会出错。最好不要手动编辑JSON,用工具生成最好不过。关于JSON的详细介绍这里也不再提及。下面只给出一个小示例。

根据上面加载 HTML 的例子,如果想直接加载 JSON 数据也是可以的,但是只能看到一串JSON数据。正常情况下我们都是需要将JSON数据时行处理的。
JSON数据:

[
  {
    "name": "James",
    "age": "20",
    "country": "USA"
  },
  {
    "name": "John",
    "age": "20",
    "country": "USA"
  },
  {
    "name": "Rose",
    "age": "20",
    "country": "USA"
  },
  {
    "name": "Honry",
    "age": "20",
    "country": "USA"
  }
]

index.html 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Load JSON</title>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#letter-a a').click(function (event) {
                event.preventDefault();
                $.getJSON('a.json', function (data) {
                    var html = '';
                    html += '<table border="1">';
                    html += '   <thead>';
                    html += '       <tr>';
                    html += '           <th>Name</th>';
                    html += '           <th>Age</th>';
                    html += '           <th>Country</th>';
                    html += '       </tr>';
                    html += '   </thead>';
                    html += '   <tbody>';
                    $.each(data, function (itemIndex, item) {
                        html += '    <tr>';
                        html += '       <td>' + item.name + '</td>';
                        html += '       <td>' + item.age + '</td>';
                        html += '       <td>' + item.country + '</td>';
                        html += '    </tr>';
                    });
                    html += '    </tbody>';
                    html += '</table>';

                    $('#container').html(html);
                });
            });
        });
    </script>
</head>
<body>
    <div id="main">
        <div class="letter" id="letter-a">
            <h3><a href="#">Load Data</a></h3>
        </div>
        <div id="container">
        </div>
    </div>
</body>
</html>

(3)执行脚本(加载JS文件)

在页面上加载所有的JS代码有时并不是明智的选择,有些JS在页面需要的时候动态调用是一个不错的方法。
其实在jQuery里也很简单,需要用到全局函数 $.getScript() 。
下面请看示例:
c.js 代码:

var data = [
    {
        "name": "James",
        "age": "20",
        "country": "USA"
    },
    {
        "name": "John",
        "age": "20",
        "country": "USA"
    },
    {
        "name": "Rose",
        "age": "20",
        "country": "USA"
    },
    {
        "name": "Honry",
        "age": "20",
        "country": "USA"
    }
];

var html = '';
html += '<table border="1">';
html += '   <thead>';
html += '       <tr>';
html += '           <th>Name</th>';
html += '           <th>Age</th>';
html += '           <th>Country</th>';
html += '       </tr>';
html += '   </thead>';
html += '   <tbody>';
$.each(data, function (itemIndex, item) {
    html += '<tr>';
    html += '   <td>' + item.name + '</td>';
    html += '   <td>' + item.age + '</td>';
    html += '   <td>' + item.country + '</td>';
    html += '</tr>';
});
html += '   </tbody>';
html += '</table>';

$('#container').html(html);

index.html页面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Load JS</title>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#letter-a a').click(function (event) {
                event.preventDefault();
                $.getScript('c.js');
            });
        });
    </script>
</head>
<body>
    <div id="main">
        <div class="letter" id="letter-a">
            <h3><a href="#">Load Data</a></h3>
        </div>
        <div id="container">
        </div>
    </div>
</body>
</html>

(4)加载XML文档

与加载JSON很相似,也很简单,直接看示例。
XML文档:

<?xml version="1.0" encoding="UTF-8"?>
<persons>
  <person name="John" age="20" country="USA">
    <evaluate>
      A good man!
    </evaluate>
  </person>
  <person name="Rose" age="20" country="USA">
    <evaluate>
      A beautify girl!
    </evaluate>
  </person>
  <person name="James" age="10" country="USA">
    <evaluate>
      A good student!
    </evaluate>
    <quote author="Mumfrey Mappel">
      <class>ELA, A.</class>
      <class>Science, A.</class>
      <class>Mathematics, A.</class>
      <class>PE, A.</class>
    </quote>
  </person>
</persons>

index.html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Load XML</title>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#letter-a a').click(function (event) {
                event.preventDefault();
                $.get('d.xml', function (data) {
                    $('#container').empty();
                    var html = '';
                    html += '<table border="1">';
                    html += '   <thead>';
                    html += '       <tr>';
                    html += '           <th>Name</th>';
                    html += '           <th>Age</th>';
                    html += '           <th>Country</th>';
                    html += '           <th>Evaluate</th>';
                    html += '           <th>quote</th>';
                    html += '       </tr>';
                    html += '   </thead>';
                    html += '   <tbody>';

                    $(data).find('person').each(function () {
                        var $person = $(this);

                        html += '<tr>';
                        html += '   <td>' + $person.attr('name') + '</td>';
                        html += '   <td>' + $person.attr('age') + '</td>';
                        html += '   <td>' + $person.attr('country') + '</td>';
                        html += '   <td>' + $person.find('evaluate').text() + '</td>';

                        var $quote = $person.find('quote');
                        var qhtml = '';
                        if ($quote.length) {
                            var qhtml = '<td>';
                            $quote.find('class').each(function () {
                                qhtml += '<div>';
                                qhtml += $(this).text() + '</div > ';
                            });
                            qhtml += '</td > ';
                        }
                        html += qhtml;
                        html += '</tr>';
                    });

                    $('#container').append($(html));
                });
            });
        });
    </script>
</head>
<body>
    <div id="main">
        <div class="letter" id="letter-a">
            <h3><a href="#">Load Data</a></h3>
        </div>
        <div id="container">
        </div>
    </div>
</body>
</html>