第6章 jQuery中的Ajax应用

Ajax的概念：客户端js所引起的http请求代号(是JavaScript,XML,XMLHttpRequest等各项技术的综合应用)
Ajax的特点：无刷新的数据更新,不能跨域访问
Ajax的核心是:XMLHttpRequest对象.
Ajax示例:

var xmlHttpReq=new XMLHttpRequest();    //创建XMLHttpRequest对象
xmlHttpReq.open("get","firstHandler.ashx",true);    //调用open()方法,true=>采用异步方式
xmlHttpReq.onreadystatechange=function(){    //设置回调函数
if(xmlHttpReq.readyState==4&&xmlHttpReq.status==200)    //监控状态的返回
{
alert(xmlHttpReq.responseText);        //输出从服务器接受的数据
}
}
xmlHttpReq.send();    //发送HTTP请求

JQuery中的Ajax
jQuery对Ajax操作进行了三层封装:
1 $.ajax()方法,属于最底层的方法,因此可以代替第二三层的所有方法
2 第2层是load(), $.get(), $.post()三个方法
3 第3层是$.getScript()和$.getJSON()方法
一般随着层数的递增,调用越简单

jQuery.ajax()方法: $.ajax(options)
options中包含了的常用参数有
url:发送请求的地址
type:请求方式
data:发送到服务器的数据,一般是json格式(即Key/Value格式),如:{"stuname":"张三","stuAge":"20"}
dataType:服务器返回的数据类型
success:请求成功后的回调函数

//示例1:
$(function () {
$("#btnSend").click(function () {
$.ajax({
url: "http://localhost:1105/$ajax_post/Handler.ashx",
dataType: "text",
type: "post",
data: { "stuName": "张三", "stuAge": "22", "stuSex": "男" },
success: function (data) {
alert(data);
}
});
});
});

//示例2:
$(function () {
$("#btnGetClass").click(function () {
$.ajax({
type: "post",
url: "http://localhost:1105/Handler.ashx",
dataType: "JSON",
timeout: 2000,
error: function () { alert("数据加载错误"); },
success: function (data) {
$("#ddlClass").empty();        //每次加载时清空下拉框
$("<option>" + "--请选择--" + "</option>").appendTo("#ddlClass");    //加载时设置下拉框的第一项为请选择
$.each(eval(data), function (i, item) {
$("<option>" + item["Classname"] + "</option>").attr("value", item["ClassID"]).appendTo($("#ddlClass"));    //从服务器获取数据并追加到下拉框中
})
}
})
});
});

jQuery.get()方法和jQuery.post()方法: $.get/post(url,[data],[callback],[type]);
它们之间的区别:get()在服务器端用QueryString[]获取值
post()用json格式传参,在服务器端用Form[]取值.

//示例:
$(function(){
$("#btnSend").click(function(){
$.get("MyHandler.ashx",
{
username:$("#txtusername").val(),
contact:$("#txtContact").val(),
message:$("#txtmessage").val()
},function(data,textStatus){
$("#divContent").append(data);    //把返回的数据追加到div中
alert(textStatus);    //返回请求状态
}
);
});
});

JQuery中的load()方法: load([data],[callback])
一般利用它去加载指定的页面或内容

//示例:
$(function(){
$("#btnLoad").click(funtion(){
var url=$("#txtUrl").val();
$("#txtComment").load(url);
});
});

jQuery中的$.getScript()方法和$.getJSON()方法
$.getScript/getJSON(url,callback) url=>待载入的js文件或json文件

//示例:
$(function(){
$("#btnLoad").click(funtion(){
$.getJSON("student.json",    //引入事先写好的名为"student"的json文件
function(data){
$.each(data,function(i,item){        //$.each()通用遍历方法,遍历对象和数组
alert(item.stuName+" "+item.stuAge+" "+item.stuSex);
});
}
);
});
});

序列化元素:serialize(),serializeArray()和$.param()方法.
$.param是serialize()方法的核心,将一个数组或对象按照key/value进行序列化,例:
var obj={a:1, b:2, c:3};
var k=$.param(obj);
serialize()序列化后返回字符串.
serializeArray():与serialize()类似,但它返回json对象

jQuery中的Ajax全局事件
ajaxSend(callback):AJAX请求发送前执行的函数
ajaxError(callback):AJAX请求发生错误时执行的函数
ajaxSuccess(callback):AJAX请求成功时执行的函数
ajaxComplete(callback):AJAX请求完成时执行的函数