20151207jquery 学习笔记 Ajax
.load()方法是局部方法，因为他需要一个包含元素的 jQuery 对象作为前缀。而$.get()和 $.post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做静态文件的异步获取， 而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适。 $.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数 type，即服务 器返回的内容格式：包括 xml、html、script、json、jsonp 和 text。第一个参数为必选参数， 后面三个为可选参数。
//使用$.get()异步返回 html 类型
$('input').click(function(){
$.get('test.php',{
url:'ycku'
},function(response,status,xhr){
if(status=='success'){
$('#box').html(response);
} }) //type 自动转为 html
});
注意：第四参数 type 是指定异步返回的类型。一般情况下 type 参数是智能判断，并不 需要我们主动设置，如果主动设置，则会强行按照指定类型格式返回。
//使用$.get()异步返回 xml
$('input').click(function(){
$.get('test.xml',function(response,status,xhr){
$('#box').html($(response).find('root').find('url').text());
}); //type 自动转为 xml
});
注意：如果载入的是 xml 文件，type 会智能判断。如果强行设置 html 类型返回，则会 把 xml 文件当成普通数据全部返回，而不会按照 xml 格式解析数据。
//使用$.get()异步返回 json
$.get('test.json',function(response,status, xhr){
alert(response[0].url);
});
$.post()方法的使用和$.get()基本上一致，他们之间的区别也比较隐晦，基本都是背后的 不同，在用户使用上体现不出。具体区别如下：
1.GET 请求是通过 URL 提交的，而 POST 请求则是 HTTP 消息实体提交的；
2.GET 提交有大小限制（2KB），而 POST 方式不受限制；
3.GET 方式会被缓存下来，可能有安全性问题，而 POST 没有这个问题；
4.GET 方式通过$_GET[]获取，POST 方式通过$_POST[]获取。
//使用$.post()异步返回 html
$.post('test.php',{
url:'ycku'
},function(response,status,xhr){
$('#box').html(response);
});
$.getScript()和$.getJSON()
jQuery 提供了一组用于特定异步加载的方法：$.getScript()，用于加载特定的 JS 文件； $.getJSON()，用于专门加载 JSON 文件。
有时我们希望能够特定的情况再加载 JS 文件，而不是一开始把所有 JS 文件都加载了， 这时课时使用$.getScript()方法。
//点击按钮后再加载 JS 文件
$('input').click(function(){
$.getScript('test.js');
});
$.getJSON()方法是专门用于加载 JSON 文件的，使用方法和之前的类似。
$('input').click(function(){
$.getJSON('test.json',function(response,status, xhr){
alert(response[0].url);
});
});
$.ajax()
$.ajax()是所有 ajax 方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。 这个方法只有一个参数，传递一个各个功能键值对的对象。
//$.ajax 使用
$('input').click(function(){
$.ajax({ type:'POST', //这里可以换成 GET
url:'test.php',
data:{
url:'ycku'
}, success:function(response,stutas,xhr){
$('#box').html(response);
}
});
});
注意：对于 data 属性，如果是 GET 模式，可以使用三种之前说所的三种形式。如果是 POST 模式可以使用之前的两种形式。
表单序列化
Ajax 用的最多的地方莫过于表单操作，而传统的表单操作是通过 submit 提交将数据传 输到服务器端。如果使用 Ajax 异步处理的话，我们需要将每个表单元素逐个获取才方能提 交。这样工作效率就大大降低。
//常规形式的表单提交
$('forminput[type=button]').click(function (){
$.ajax({
type:'POST',
url:'test.php',
data:{
user:$('forminput[name=user]').val(),
email:$('form input[name=email]').val()
},
success:function(response,status,xhr){
alert(response);
}
});
});
使用表单序列化方法.serialize()，会智能的获取指定表单内的所有元素。这样，在面对 大量表单元素时，会把表单元素内容序列化为字符串，然后再使用 Ajax 请求。
//使用.serialize()序列化表单内容
$('forminput[type=button]').click(function (){
$.ajax({
type:'POST',
url:'test.php',
data:$('form').serialize(),
success:function(response,status,xhr){
alert(response);
}
});
});
.serialize()方法不但可以序列化表单内的元素，还可以直接获取单选框、复选框和下拉 列表框等内容。
//使用序列化得到选中的元素内容
$(':radio').click(function(){
$('#box').html(decodeURIComponent($(this).serialize()));
});
除了.serialize()方法，还有一个可以返回 JSON 数据的方法：.serializeArray()。这个方法 可以直接把数据整合成键值对的 JSON 对象。
$(':radio').click(function(){
console.log($(this).serializeArray());
varjson=$(this).serializeArray();
$('#box').html(json[0].value);
});
有时，我们可能会在同一个程序中多次调用$.ajax()方法。而它们很多参数都相同，这 个时候我们课时使用 jQuery 提供的$.ajaxSetup()请求默认值来初始化参数。
$('forminput[type=button]').click(function (){
$.ajaxSetup({
type:'POST',
url:'test.php',
data:$('form').serialize()
});
$.ajax({
success:function(response,status,xhr){
alert(response);
}
});
});
在使用 data 属性传递的时候，如果是以对象形式传递键值对，可以使用$.param()方法 将对象转换为字符串键值对格式。
varobj={a:1,b:2,c:3};
varform=$.param(obj);
alert(form);
注意：使用$.param()将对象形式的键值对转为 URL 地址的字符串键值对，可以更加稳 定准确的传递表单内容。因为有时程序对于复杂的序列化解析能力有限，所以直接传递 obj 对象要谨慎。
注：以上教程均来源于北风网，特此声明！！！
