jquery中的Ajax

$.ajax()方法

$.ajax(options)

常用参数

参数	类型	说明
url	String	url
data	Object	发送到服务器的数据
callback	Function	回调函数
type	String	POST GET
timeout	Number	请求超时时间
data	String/Object
dataType	String	xml html script json jsonp text
beforeSend	Function	function(XMLHttpRequest){ this;}//调用此次ajax请求传递的options参数
complete	Function	成功失败均调用function(XMLHttpRequest, textStatus){this;}
success	Function	function(data, textStatus){this;}
error	Function	function(XMLHttpRequest, textStatus, errorThrown){this;}
global	Boolean	默认true 是否触发全局Ajax事件

//代替$.getScript()方法
$.ajax({
    type: "GET",
    url: "test.js",
    dataType: "script"
});

load()方法

从web服务器获取静态数据文件

参数名称	类型	说明
url	String	url
data(可选参数)	Object	发送到服务器的数据
callback(可选参数)	Function	回调函数

$("#textDiv").load("test.html");  //在textDiv区域加载test.html
$("#textDiv").load("test.html .commet");  //只加载类名为commet的元素
//无参数get发送
$("#textDiv").load("test.html .commet", function(){});  
//有参数  post发送  
$("#textDiv").load("test.html .commet", 
                    {name: "许魏洲", age: 24}, function(){});  

回调函数的三个参数

参数	解释
responseText	返回内容
textStatus	请求状态
XMLHttpRequest	xhr对象

无论ajax请求是否成功，结束后都会触发回调函数

$.get()方法

参数名称	类型	说明
url	String	url
data(可选参数)	Object	发送到服务器的数据
callback(可选参数)	Function	回调函数
type(可选)	String	服务端返回内容的格式xml, html, script, json, text, _default

$.get("get.php", {name: "许魏洲", age: 24}, function(){});

回调函数的两个参数

参数	解释
data	返回内容 xml, html, json,
textStatus	请求状态

请求成功，才会触发回调函数

返回参数格式
html

$.get("get.php", {name: "许魏洲", age: 24}, function(data, textStatus){
    $("#resText").html(data);    //html片段 可以直接添加到页面上
});

xml
由于期待返回xml文档，服务端设置Content-Type /xml
header("Content-Type/xml; charset=utf-8"); //php

$.get("get.php", {name: "许魏洲", age: 24}, function(data, textStatus){
    var username = $(data).find("comment").attr("username");
    var username = $(data).find("comment content").text();
});

json

$.get("get.php", {name: "许魏洲", age: 24}, function(data, textStatus){
    var username = data.username;
    var username = data.content;
}, "json");

$.post()

get请求数据会被缓存起来，有安全问题。而且有大小限制。
load()也是post请求，可实现相同作用。

$.getScript()

加载js代码，也可用于跨域资源共享 jsonp

                        //回调函数
$.getScript("test.js", function() {});

$.getJSON()

                        //回调函数  通过data变量遍历响应的数据
$.getJSON("test.json", function(data) {
    $.each(data, function(index, comment) {
        //comment["username"]  comment["age"]
    });
});

序列化

1. serialize()

$("#form").serialize()     //可当做data传输

使用字符串方式需要用encodeURIComponent(text)

$(":checkbox,:radio").serialize();  //将复选框和单选框序列化为字符串形式

2 . serializeArray()

$(":checkbox,:radio").serializeArray();  //将复选框和单选框序列化为JSON格式数据
//遍历
$.each(fields, function(i, field) {
    var value = fileld.value;
});

3 . $.param()方法
对一个数组或对象序列化为key/value格式

var obj = {a:1, b:2, c:3};
var k = $.param(obj);
console.log(k);   //a=1&b=2&c=3

jquery Ajax全局事件

Ajax请求开始时触发ajaxStart方法的回调函数，结束时触发ajaxStop回调函数。

//正在加载提示信息的显示隐藏
$("#loading").ajaxStart(function() {
    $(this).show();
});
$("#loading").ajaxStop(function() {
    $(this).hide();
});

方法	说明
ajaxStart(callback)
ajaxStop(callback)
ajaxComplete(callback)	请求完成
ajaxError(callback)	请求发生错误，错误可以作为最后一个参数传递
ajaxSend(callback)	请求发送前
ajaxSuccess(callback)	请求成功时