jQuery基础:通过Ajax向服务器请求加载数据
一、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>