使用Ajax：get请求、post请求、ajax请求、载入文件、设置Ajax选项、序列号字符串
Ajax优点
Ajax主优点是：与传统的页面刷新请求不同，Ajax实现局部数据请求和更新功能，使得客户端与服务器端交互的数据量大大降低，节省了大量带宽，同时请求响应的速度也变得更加迅速
使用JavaScript创建Ajax对象
以下Ajax案例与jQuery有关
jQuery封装了Ajax交互过程，用户仅需要调用jQuery方法，就可以轻松实现客户端与服务器端异步通信
使用get请求
jQuery定义了get()方法，专门负责通过远程HTTP GET请求方式载入信息。该方法具有一个简单的GET请求功能，以取代复杂的$.ajax()方法
jQuery.get(url,[data],[callback],[type])
第一个参数为必须设置项，后面3个参数为可选参数
url：表示请求页面的url地址
data：表示一个对象结构的名值对列表
callback：表示异步交互成功之后调用的回调函数。回调函数的参数值为服务器端响应的信息
type：表示服务器端响应信息返回的内容格式，如XML、HTML、Script、JSON和Text，或者_default
例：向test.php文件发送一个请求，并把一组数据传递给该文件，然后在回调函数中读取并显示服务器端响应的信息
test.php
[
{
name:'Tom',age:15},
{
name:'Jack',age:18}
]
get请求
<input type="submit" value="jQuery实现get请求" />
<script type="text/javascript">
$('input').click(function() {
$.get('test.php', {
name: 'cccc',
age: 10
}, function(data) {
alert(data)
})
})
</script>
注：
1、get方法的data参数是传递给服务器端的数据，function中的参数data是服务器返回的数据，两者不是一个东西
2、get请求中也可以将data数据直接写在url之后
$('input').click(function() {
$.get('test.php?name=csss&age=10',function(data){
alert(data)
}
})
3、jQuery中还有getJSON()和getScript()两个方法，前者专门请求载入JSON数据，后者请求载入Javascript文件，本质上就是get方法指定了返回值类型
结果：
POST请求
jQuery定义了post()方法，专门负责通过远程HTTP POST请求方式载入信息。该方法具有一个简单的POST请求功能，以取代复杂的$.ajax()方法
Jquery.post(url,[data],[callback],[type])
使用方式与get方式相同
ajax()请求
ajax()方法是jQuery实现Ajax的底层方法，它是get()、post()等方法的基础。对于特殊的数据请求和响应处理，应该选择$.ajax()方法；但是在没有特殊需求时，使用get、post方法即可
jQuery.ajax([settings])
该方法只有一个参数，一个列表结构的对象，包含各配置及回调函数
例：加载JavaScript文件
$.ajax({
type:'GET', //请求方式
url:'test.js', //请求文件的url
dataType:'script' //响应的数据类型
})
例：把客户端的数据传递给服务器，并获取服务器的响应信息
$.ajax({
type: 'POST',
url: 'test.php',
data: 'name=Tom&age=12', //传递给服务器的数据
success: function(data) {
//异步通信成功后的回调函数
alert(data)
}
})
例：加载HTML页面
$.ajax({
url: 'test.html',
cache: false, //进展缓存
success: function(html) {
$('#box').append(html) //把HTML片段附加到当前文档的盒子中
}
})
例：以同步方式加载数据，当使用同步方法加载数据时，其他用户操作将被锁定
var html = $.ajax({
url: 'test.php', //请求文件的url
async: false //同步请求
})
ajax()方法还有其它很多参数，这里就不一一列举
注：设置了dataType选项，应确保服务器返回正确的MIME信息，例如，XML返回text/xml；如果dataType为script，则在请求时，如果请求文件与当前文件不在同一个域名中，所有的PSOT请求都被转换为GET请求，因为jQuery将使用DOM的script标签来加载响应信息
跟踪状态
jQuery在XMLHttpRequest对象定义的readyState属性的基础上，对异步交互中服务器响应状态进行了封装，提供了6个响应事件，以便于进一步细化对整个请求响应过程的跟踪
| 事件 | 说明 |
|---|---|
| ajaxStart() | Ajax请求开始时进行相应 |
| ajaxSend() | Ajax请求发送前进行相应 |
| ajaxComplete() | Ajax请求完成时进行相应 |
| ajaxSuccess() | Ajax请求成功时进行相应 |
| ajaxStop() | Ajax请求结束时进行相应 |
| ajaxError() | Ajax请求发生错误时进行相应 |
载入文件
遵循Ajax异步交互的设计原则，jQuery定义了可以加载网页文档的方法load()。该方法能够把加载的网页文件附加到指定的网页标签中
例：
p.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>load()方法载入网页文件</p>
</body>
</html>
jQuery脚本
<script type="text/javascript">
$(function() {
$('input').click(function() {
$('div').load('p.html')
})
})
</script>
注：使用ajax()方法可以替换load方法，因为load方法是以ajax()方法作为底层来实现的
$(function() {
$('input').click(function() {
var str = ($.ajax({
//调用ajax方法，返回XMLHttpRequest对象
url: 'p.html', //载入url
async: false, //禁止异步载入
})).responseText //获取对象中包含的服务器响应信息
$('div').html(str) //把载入的网页内容附加到div元素内
})
})
设置Ajax选项
ajaxSetup()方法可以预设异步交互中通用选项，在该方法中设置的选项，可以实现全局共享，从而在具体交互中只需要设置各项话参数即可。该方法的参数与ajax方法相同
例：
$(function() {
$.ajaxSetup({
//预设公共选项
url: 'test.php', //请求的url
global: false, //禁止触发全局Ajax事件
type: 'POST', //请求方式
dataType: 'text', //响应数据的类型
success: function(data) {
//响应之后的回调函数
alert(data)
}
})
$('input').eq(0).click(function() {
$.ajax({
data: 'name=第一个'
})
})
$('input').eq(1).click(function() {
$.ajax({
data: 'name=第二个'
})
})
})
大体用法应该这样，运行了以下存在一些问题，url是相对路径时，编译器软件和浏览器都是找不到文件，修改为绝对路径时，编译软件可以运行，浏览器显示不允许载入本地文件
序列化字符串
了解
serialize()方法可以将客户端提交的信息转换为由&字符连接的多个名值对
<form action="#" method="post">
姓名：<input type="text" name="user" /> <br />
性别：
男<input type="radio" name="sex" value="男" />
女<input type="radio" name="sex" value="女" /><br />
<input type="submit" value="jQuery实现get请求" id="submit" />
</form>
<p></p>
<script type="text/javascript">
$("input[type='submit']").click(function() {
$("p").html($("form").serialize())
return false; //取消默认行为，这里的默认行为是提交表单
})
</script>