Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。它可以在不重新加载整个网页的情况下，对网页的某部分进行更新。Ajax 可以实现前后端交互，使得用户体验更好。
Ajax 实现前后端交互的步骤如下：
1. 前端发起请求：前端使用 XMLHttpRequest 发起请求，将请求参数封装在请求中。 2. 服务器处理请求：服务器根据请求参数处理相应的业务逻辑，并将处理结果返回到前端。 3. 接受响应数据：XMLHttpRequest 接受服务器返回的数据并将其封装成 JavaScript 对象。 4. 处理响应数据：前端根据服务器返回的数据处理相应的业务逻辑并更新界面显示内容。
Ajax 的优点是能够快速、异步地从本地或服务器上获取信息而不必重新加载整个页面。它能够减少 HTTP 请求的数量、减少带宽占用、减少本地 CPU 运行时间以及减少本地内存占用。此外，Ajax 还能够使得 Web 页面具有强大的交互性能、使得 Web 页面具有“真正”的异步特性、使得 Web 页面具有“真正”的即时性特性以及使得 Web 页面具有“真正”的实时性特性。
Ajax 的缺点是不能直接从浏览器中打开一个 Ajax 应用（也就是不能直接将 Ajax 应用作为一个独立文件打开）、不能直接将 Ajax 应用作为一个独立文件保存到浏览器中、不能直接将 Ajax 应用作为一个独立文件打印出来、不能直接将 Ajax 应用作为一个独立文件进行分享或者传递、不能直接将 Ajax 应用作为一个独立文件进行书签保存或者历史保存、不能直接将 Ajax 应用作为一个独立文件进行 SEO 优化。
AJAX 是一个首字母缩写，代表异步 JavaScript 和 XML，这一技术帮助我们在没有浏览页面刷新的情况下从服务器加载数据。
如果你对 AJAX 比较陌生，我建议你在学习本教程之前先去浏览一下我们的 Ajax 教程。
JQuery 是一个伟大的工具，提供了一组丰富的 AJAX 方法来开发下一代 web 应用程序。
使用 jQuery AJAX 来下载任何静态或动态的数据都是非常简单的。jQuery 提供了 load() 方法来实现这一功能 ——
这是 load() 方法的简单语法 ——
[selector].load( URL, [data], [callback] );这是所有参数的描述 ——
URL —— 服务器端 URL 向发送请求的一端提供资源。可能是一个 CGI、ASP、JSP、PHP 脚本，能够动态生成数据或数据库。
data —— 这一可选参数代表了一个对象，它的属性被序列化到要传递给请求端的正确编码的参数。如果指定了，那么请求是由 POST 方法实现的。如果省略了，那么请求是由 GET 方法实现的。
考虑下面这个带有一小段 jQuery 编码的 HTML 文件 ——
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts..cn/attachments/image/wk/jquery/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$('#stage').load('/jquery/result.html');
});
});
</script>
</head>
<body>
<p>Click on the button to load /jquery/result.html file −</p>
<div id="stage" style="background-color:cc0;">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>这里 load() 启动一个 Ajax 请求到指定的 URL /jquery/result.html 文件。加载这个文件后，所有的内容将会被填充到 ID 为 stage 的 < div> 标签内。假设，我们的 /jquery/result.html 文件只有一个 HTML 行——
< h1>THIS IS RESULT...</h1>当点击给定的按钮后，result.html 文件开始被加载。
有可能会出现返回的 JSON 字符串与你的请求不符的情况。jQuery 使用 getJSON() 函数解析返回 JSON 字符串并使结果字符串作为第一个参数以进行后续的操作对回调函数是可用的。
这是 getJSON() 方法的简单语法 ——
[selector].getJSON( URL, [data], [callback] );这是所有参数的描述 ——
URL —— 服务器端资源的 URL 通过 GET 方法取得联系。
data —— 一个对象，它的属性作为名称/值对，用于构造一个要被附加到 URL 上的字符串，或者预先格式化并编码的查询字符串。
考虑下面的带有一小段 jQuery 编码的 HTML 文件 ——
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts..cn/attachments/image/wk/jquery/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('/jquery/result.json', function(jd) {
$('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Age : ' + jd.age+ '</p>');
$('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.json file −</p>
<div id="stage" style="background-color:#eee;">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>这里 JQuery 使用 getJSON() 方法来启动一个 Ajax 请求道指定的 URL result.json 文件中。在加载这个文件后，所有的内容会被传递到回调函数，最终会填充到 ID 为 stage 的 < div> 标签内部。假设，我们的 result.json 文件有下述 json 格式的内容 ——
{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}当你点击给定的按钮时，result.json 文件就开始加载 ——
许多情况下，你从客户端收集输入并把这些输入传递到服务器端以做进一步处理。JQuery AJAX 使用任何可用的 Ajax 方法的 data 参数，使得将收集的数据传递到服务器端变得容易。
这个例子解释了怎样将客户端的输入传递到 web 服务器脚本，它会发送相同的结果，然后我们可以输出它 ——
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts..cn/attachments/image/wk/jquery/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
var name = $("#name").val();
$("#stage").load('/jquery/result.php', {"name":name} );
});
});
</script>
</head>
<body>
<p>Enter your name and click on the button:</p>
<input type="input" id="name" size="40" /><br />
<div id="stage" style="background-color:cc0;">
STAGE
</div>
<input type="button" id="driver" value="Show Result" />
</body>
</html>这是在 result.php 脚本上编写的代码 ——
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?> 现在你可以在给定的输入框中键入任何文本，然后点击"显示结果"按钮来看看你在输入框中键入的内容。
你已经用 JQuery 了解了基本的 AJAX 概念。下表是所有的 JQuery AJAX 方法，你可以根据你的编程序要选择你需要的方法 ——
| 序号 | 方法 & 描述 |
|---|---|
| 1 |
jQuery.ajax( options )
使用一个 HTTP 请求加载一个远程页面。 |
| 2 |
jQuery.ajaxSetup( options )
为 AJAX 请求设置全局设置。 |
| 3 |
jQuery.get( url, [data], [callback], [type] )
使用一个 HTTP GET 请求加载一个远程页面。 |
| 4 |
jQuery.getJSON( url, [data], [callback] )
使用一个 HTTP GET 请求加载 JSON 数据。 |
| 5 |
jQuery.getScript( url, [callback] )
使用一个 HTTP GET 请求加载并执行一个 JavaScript 文件。 |
| 6 |
jQuery.post( url, [data], [callback], [type] )
使用一个 HTTP POST 请求加载一个远程页面。 |
| 7 |
load( url, [data], [callback] )
从远程文件加载 HTML 并把它注入到 DOM 中。 |
| 8 |
serialize( )
将一组输入元素序列化一个字符串数据中。 |
| 9 |
serializeArray( )
像 .serialize() 方法一样，序列化所有的表单及表单元素，但是返回 JSON 数据结构。 |
你可以在 AJAX 调用进程的生命周期中，调用不同的 JQuery 方法。下述方法是基于不同的事件/状态的 ——
你可以浏览全部的 AJAX 事件。
| 序号 | 方法 & 描述 |
|---|---|
| 1 |
ajaxComplete( callback )
当一个 AJAX 请求完成后，附加一个要被执行的函数。 |
| 2 |
ajaxStart( callback )
当一个 AJAX 开始并且没有准备好的操作时，附加一个要被执行的函数。 |
| 3 |
ajaxError( callback )
当一个 AJAX 请求失败后，附加一个要被执行的函数。 |
| 4 |
ajaxSend( callback )
在一个 AJAX 请求发送之前，附加一个要被执行的函数。 |
| 5 |
ajaxStop( callback )
当全部的 AJAX 请求结束后，附加一个要被执行的函数。 |
| 6 |
ajaxSuccess( callback )
当一个 AJAX 请求成功完成后，附加一个要被执行的函数。 |
jQuery 效果jQuery 属性操作jQuery 文档操作方法这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。方法描述addClass...
jQuery.when()方法jQuery 杂项方法实例一个参数传递给 $.when() 被受理，执行回调函数 $(function () {$.when( { testing: 123 }...
jQuery deferred.then() 方法jQuery 杂项方法实例添加 .then 方法 $(function () {$.get(test.php).then( function(){ alert($.g...
jQuery.makeArray()方法jQuery 杂项方法实例将一个HTML元素集合转换成对应的数组 $(function () {var elems = document.getEleme...
jQuery focus() 方法jQuery 事件方法实例 添加函数到 focus 事件。当 input 字段获得焦点时发生 focus 事件：$("input").focus(f...