1-1 使用load()方法异步请求数据
使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中：
load(url, [data], [callback])
// url：加载服务器地址
// 可选项data：请求时发送的数据
// callback：数据请求成功后，执行的回调函数
示例
$(function() {
$("#btnShow").bind("click", function(){
var $this = $(this);
$(".content")
.html("")
.load("http://www.imooc.com/data/fruit_part.html", function(){
$this.attr("disabled", "true");
});
});
});
var $this = $(this)
- this其实是一个HTML元素
- $this 只是个变量名，加"$"是为了说明其是个jquery对象
- 而$(this)是个转换，将this表示的dom对象转换为jquery对象，这样就可以使用jquery提供的方法操作
1-2 使用getJSON()方法异步加载JSON格式数据
使用getJSON()可以通过Ajax异步请求的方式，获取服务器中的数据，并对数据进行解析，显示在页面中：
jQuery.getJSON(url, [data], [callback])或$.getJSON(url, [data], [callback])
// url：json格式的文件的服务器地址
// data：请求时的数据
// callback：回调函数
示例
$(function(){
$("#btnShow").bind("click", function(){
var $this = $(this);
$.getJSON("Data/sport.json", function(data){
$this.attr("disabled", "true");
$.each(data, function(){
$("ul").append("<li>" + sport["name"] + "</li>");
})
});
});
});
$.each(data, function(index, ele){})
- data：要遍历的集合
- index：索引值
- ele：集合中的子元素
1-3 使用getScript()方法异步加载并执行js文件
jQuery.getScript(url, [callback])或$.getScript(url, [callback])
// url：请求地址
// callback：回调函数
示例
$(function(){
$("#btnShow").bind("click", function(){
var $this = $(this);
$.getScript("Data/sport.js", function(){
$.this.attr("disabled", "true");
});
});
});
1-4 使用get()方法以GET方式从服务器获取数据
$.get(url, [callback])
示例
$(function(){
$("#btnShow").bind(
var $this = $(this);
$.get("Data/info.php", function(data){
$this.attr("disabled", "true");
$("ul").append("<li>my name:" + data.name + "</li>");
$("ul").append("<li>my motto:" + data.motto + "</li>");
}, "json");
);
});
json：设置从服务器获取数据的类型，所以得到的数据格式为json类型的
默认get从服务器获取到的数据是字符串类型
1-5 使用post()方法以POST方式从服务器发送数据
$.post(url, [data], [callback])
示例
$(function(){
$("#btnCheck").bind("click", function(){
$.post("Data/check.php", {
num: $("#txtNumber").val()
}, function(data){
$("ul").append("<li>你输入的<b>" + $("#txtNumber").val() + "</b>是<b>" + data + "</b></li>");
});
});
});
1-6 使用serialize()方法序列化表单元素值
使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求：
$(selector).serialize();
// selector：一个或多个表单中的元素或表单元素本身
示例
<button id="btnAction">序列化</button>
<form>
姓名：<input name="Text1" type="text" />
性别：<select name="Select1"><option value="0">男</option><option value="1">女</option></select>
<input name="Checkbox1" type="checkbox" />资料是否可见
</form>
$(function(){
$("#btnAction").bind("click", function(){
$("#litest").html($("form").serialize());
// Text1=yizihan&Select1=0&Checkbox1=on
});
});
1-7 使用ajax()方法加载服务器数据
使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值：
$.ajax([settings])
// settings为发送ajax请求时的配置对象
// 包含url（路径）、data（请求时传递的数据）、dataType（服务器返回的数据类型）、success（请求成功后执行的回调函数）、type（发送数据请求的方式，默认为get）
示例
$(function(){
$("#btnShow").bind("click", function(){
var $this = $(this);
$.ajax({
url: "Data/article.txt",
data: { num: $("#txtNumber").val() },
type: "post",
success: function(data){
$this.attr("disabled", "true";
$("ul").append(data);
}
});
});
});
1-8 使用ajaxSetup()方法设置全局Ajax默认选项
使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值：
$.ajaxSetup([options])
//
示例
$(function(){
$.ajaxSetup({
dataType: "text",
success: function(){
$("ul").empty().append(data);
}
});
$("#btnShow_1").bind("click", function(){
$.ajax({url: "Data/article_1.txt" });
});
$("#btnShow_2").bind("click", function(){
$.ajax({url: "Data/article_2.txt" });
});
});
1-9 使用ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数：
$(selector).ajaxStart(function())
$(selector).ajaxStop(function())
示例
$(function(){
$("#divload").ajaxStart(function() { $(this).show(); });
$("#divload").ajaxStop(function() { $(this).hide(); });
$("#btnShow").bind("click", function(){
var $this = $(this);
$.ajax(
url: "Data/info.php",
dataType: "json",
success: function(data) {
$this.attr("disabled", "true");
$("ul").append("<li>my name: " + my.name + "</li>");
}
);
});
});
