ajax学习总结
$.ajax()是所有ajax方法中最底层的方法，其它的方法都是基于$.ajax()方法的封装。
这个方法只需要传一个参数对象{}，里面都是键值对。
键值对有多个的情况下用逗号分隔，最后一个不要加逗号。
data属性值一般用对象键值对的方式data:{a:4,b:5}
ajax用的最多的就是表单提交,
ajax的两种提交方式：1表单提交 2json字符串提交，使用JSON.stringify(data)
JSON对象的方法：
JSON.stringify 把一个对象转换成json字符串，
JSON.parse 把一个json字符串解析成对象。 jquery的方法为：$.parseJSON(str);
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
一、传统的表单提交，缺点：表单元素特别多的情况下，写起来麻烦，容易出错。
$(function(){
$("form input[type=submit]").click(function(){
$.ajax({
type:"post",
url:"",
data:{
user:$("form input[name=user]").val(),
email:$("form input[name=email]").val()
},
success:function(response,status,xhr){
$("#box").html(response);
}
});
});
});
二、表单序列化方式：如果有多个表单的情况下，在复制的时候，data就不用修改了。序列化之后的data为字符串形式的键值对，还进行了编码，保证了准确性。
$(function(){
$("form input[type=submit]").click(function(){
$.ajax({
type:"post",
url:"",
data:$('form').serialize(),
success:function(response,status,xhr){
$("#box").html(response);
}
});
});
});
三、对单选框、复选框、下拉框进行的序列化：
$("form input[name=sex]").click(function(){
$(this).serialize();//用于提交时的序列化
decodeURIComponent($(this).serialize());//解码
});
四、怎样生成json数据：
$("form input[name=sex]").click(function(){
$(this).serializeArray();//生成的是json数据
var json= $(this).serializeArray();
$("box").html(json[0].name+"="+json[0].value);
}
五、初始化重复的属性：
$.ajaxSetup({
type:"post",
data:$("form").serialize(),
success:function(){
alert("请求成功后");
}，
complete:function(){
alert("请求结束后，不管成功还是结束");
},
beforeSend:function(){
alert("发送请求之前");
},
error:function(){
alert("请求失败后");
}
});
$.ajax({
这里就不用重复上面的属性了……
});
六、data属性值如果是复杂的对象键值对，程序难以解析，这时可以用$.param()方法，将对象转化为字符串键值对格式。param() 方法创建数组或对象的序列化表示。
该序列化值可在进行 AJAX 请求时在 URL 查询字符串中使用。
data:$.param({user:$("form input[name=user]").val(),
email:$("form input[name=email]").val()
}),
...
七、全局事件$(document).ajaxStar()和$(document).ajaxStop();当请求开始时，显示“正在加载中”，请求结束时隐藏。
$(document).ajaxStart(function(){
$(".loading").show();
}).ajaxStop(function(){
$(".loading").hide();
});
全局事件：
$(document).ajaxError(function(){
alert("错误！");
});
八、如果请求时间太长，可以设置超时：
$.ajax({
type:"",
url:"",
...
timeout:180000 //3分钟（1000毫秒=1秒）
//超时后的处理：
error : function(xhr,textStatus){
if(textStatus=='timeout'){
//处理超时的逻辑
}else{
//其他错误的逻辑
}
}
});
九、如果某个ajax不想触发全局事件，可以在当前的ajax里设置：
$.ajax({
global:false
});
十、跨域请求时,设置返回数据格式为jsonp:
$.ajax({
dataType:"jsonp"
});
十一、jqXHR对象
jqXHR对象就是$.ajax()返回的对象
var jqXHR=$.ajax({
type:"post",
url:"",
data:$('form').serialize()
});//上面只是一些基本的参数，与真正要执行的程序分开来，提高了可读性。
jqXHR.success(function(response){
alert(response);
});
之前的一些方法：.success() .complete() .error()在未来可能会被取消，代替的方法为：
.done() .always() .fail()
所以，如果使用jqXHR对象的话，最好采用后面的方法。
好处：1、可连缀执行 2、课多次执行同一个函数，前面的不会被后面的覆盖。
</script>
<body>
<form action="">
<input type="text" name="user">
<input type="text" name="email">
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<input type="submit" value="提交">
</form>
<span class="loading" style="display:none">正在努力加载中……</span>
<div id="box"></div>
</body>
</html>
