jQueryAjax笔记

ajax优点：能在不刷新整个页面的前提下更新数据，使用户操作与服务器响应异步化。

ajax缺点：破坏浏览器“前进”、“后退”按钮的正常功能，搜索引擎爬虫不能理解那些奇怪的JS代码和因此引起的页面内容的变化。

XMLHttpRequest对象：它是ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。

//用传统的JavaScript实现的一个简单的ajax例子
var xhr;
if(window.ActiveObject){
    xhr=new ActiveObject('Microsoft.XMLHTTP');    //IE6是以ActiveObject方式来引入XMLHttpRequest对象的
}else if{window.XMLHttpRequest){
    xhr=new XMLHttpRequest();
}else{
    throw new Error('Ajax is not supported by this browser');
}
xhr.onreadystatechange=function(){        //当readyState值被改变时，会激发一个readystatechange事件，用readystatechange属性来注册回调函数
    if(this.readyState==4){
        if(this.status>=200&&this.status<300){
            document.getElementById('someContainer').innerHTML=this.responseText();
        }
    }
}

//指定HTTP方法和要使用的服务器URL，默认情况下async参数为true
xhr.open('GET','test.php',true);
xhr.send();

get方法和post方法的区别：

1.get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。

2.get方式对传输的数据有大小限制（通常不能大于2kb），而使用post方式传递的数据量要比get方式大得多（理论上不受限制）。

3.get方式请求的数据会被浏览器缓存起来。但这样也会带来安全性问题。

4.get请求应该只用于获取数据时使用，可能需要向服务器发送一些参数数据。如果向服务器发送数据的目的是为了进行改变，就应该使用post请求。

jQuery中的ajax：在jQuery中，$.ajax()方法属于最底层的方法，第2层是load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。

load(url[,parameters][,callback])：parameters（字符串｜对象｜数组），当使用parameters来提供请求参数时，如果使用的是散列对象或者数组，则通过post方式来发起请求，否则发起get请求。可以在URL添加紧随空格的选择器后缀来指定选择器。

$('.injectMe').load('/someResource div');

$.get(url[,parameters][,callback][,type])：parameters（字符串｜对象｜数组），callback（在请求完成时回调，传入的第一个参数是响应主体（根据type来解析），第二个参数是文本信息，第三个参数包含对XHR实例的引用），type（指定如何解析响应主体，值为html、text、xml、json、script或者jsonp，它的默认值会根据响应头中定义的内容类型来智能确定，比如Content-Type:text/html表示响应主体为HTML片段，Content-Type:application/json表示响应主体为JSON格式的字符串。）

$.post(url[,parameters][,callback][,type])：parameters（字符串｜对象｜数组），callback（在请求完成时回调，传入的第一个参数是响应主体（根据type来解析），第二个参数是文本信息，第三个参数包含对XHR实例的引用），type（指定如何解析响应主体，值为html、text、xml、json、script或者jsonp，它的默认值会根据响应头中定义的内容类型来智能确定）

//服务器返回HTML数据，不需要进行处理
$('#send').click(funciton(){
    $.get('get1.php',{
        username:$('#username').val(),
        content:$('#content').val()
    },function(data,textStatus){
        $('#resText').html(data);
    });
});

//服务器返回的数据格式为XML，需要对返回的数据进行处理
//处理XML文档与处理HTML文档一样，也可以使用常规的attr()、find()、filter()以及其他方法
$('#send').click(function(){
    $.get('get2.php',{
        username:$('#username').val(),
        content:$('#content').val()
    },function(data,textStatus){
        var username=$(data).find('comment').attr('username');
        var content=$(data).find('comment content').text();
        var textHtml="<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
        $('#resText').html(txtHtml);    //将返回的数据添加到页面上
    });
});

//服务器返回的数据格式为JSON，需要对返回的数据进行处理
$('#send').click(function(){
    $.get('get3.php',{
        username:$('#username').val(),
        content:$('#content').val()
    },function(data,textStatus){
        var username=data.username;
        var content=data.content;
        var txtHtml="<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
        $('#resText').html(txtHtml);
    },'json');
});

$.getScript(url[,callback])：发起get请求来获取由url指定的脚本。

//new.stuff.js
alert("I'm inline!");
var someVariable="Value of someVariable";
function someFunction(value){
    alert(value);
};

//只有在单击#loadButton元素后，才能单击#inspectButton元素来显示警告框alert(value)
$(function(){
    $("#loadButton").click(function(){
        $.getScript("new.stuff.js");
    });
    $("#inspectButton").click(function(){
        someFunction(someVariable);
    });
});

$.getJSON(url[,parameters][,callback])：使用get请求。parameters（字符串｜对象｜数组），callback第一个参数是把响应主体作为JSON表示法解析所得到的数据值，第二个参数是状态文本，第三个参数提供了一对XHR实例的引用。

$(function(){
    $('#send').click(function(){
        $.getJSON('test.json',function(data){
            $('#resText').empty();
            var html=' ';
            $.each(data,function(commentIndex,comment){
                html+='<div class="comment"><h6>'+comment['username']+':</h6><p class="para">'+comment['content']+'</p></div>';
            });
            $('#resText').html(html);
        });
    });
});

//通过使用JSONP形式的回调函数来加载其他网站的JSON数据
//例如从http:/ /Flickr. com搜索汽车类别的4张最新图片
$(function(){
    $('#send').click(function(){
        $.getJSON("http:/ /api.flickr. com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback?",
            function(data){
                $.each(data.items,function(i,item){
                    $('<img class="para"/>').attr('src',item.media.m).appendTo('#resText');
                    if(i==3){
                        return false;
                    }
                });
            }
        );
    });
});

$.ajax(options)

参数名称	类型	说明
url	String
type	String	请求方式为post或get(默认)
timeout	Number	设置请求超时时间
data	Object或String	发送到服务器的数据。无论是哪种参数类型，$.ajax()实用函数都会负责对值进行编码。
dataType	String	用来识别预计由响应返回的数据类型。如果不指定，jQuery将自动根据HTTP包含的MIME信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型有：xml、html、script、json、jsonp、text
cache	boolean	如果为false，则确保浏览器不会缓存响应，默认为true
content	元素	指定某个元素为与这个请求相关的所有回调函数的上下文
global	boolean	如果为false，则禁止触发全局ajax事件。默认为true
contentType	String	指定请求内容的类型。如果省略，则默认值为application/x-www-form-urlencoded，与表单提交所使用的默认值的类型相同
beforeSend	Function	发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在函数中返回false将会取消请求 function(XMLHttpRequest){ this;    //调用本次Ajax请求时传递的options参数 }
success	Function	如果对请求的响应显示的是成功状态码则调用此函数。第一个参数是由服务器返回，并根据dataType参数进行处理后的数据。第二个参数是包含状态值的字符串——在这种状态下，总是success。第三个参数提供了一个对XHR实例的引用。 function(data,testStatus){ //data  可能是xmlDoc、jsonObj、html、text等 this;    //调用本次Ajax请求时传递的options参数 }
error	Function	如果对请求的响应返回的是错误状态码则调用此函数。传入这个函数的参数有三个：XHR实例、状态消息字符串（在这个情况下，是error、timeout、notmodified、或parseerror）以及可选的异常对象。 function(XMLHttpRequest,textStatus,errorThrown){ //通常情况下textStatus和errorThown只有其他一个包含信息 this;    //调用本次Ajax请求时传递的options参数 }
complete	Function	在请求完成后调用的函数。传入的参数有两个：XHR实例和状态信息字符串(success或error)。如果也指定了success或error回调函数，则会在回调函数之后调用该函数。 function(XMLHttpRequest){ this;    //调用本次Ajax请求时传递的options参数 }
async	boolean	如果为true，则将请求作为同步请求来提交。默认为false
processData	boolean	如果设置为false，则阻止将传入的数据处理为URL编码的格式。默认为true
dataFilter	Function	用来筛选响应数据的回调函数
jsonp	String	指定一个查询参数名称来覆盖默认的jsonp回调参数名callback
username	String	在HTTP认证请求中使用的用户名
password	String	在HTTP认证请求中使用的密码
scriptCharset	String	当远程和本地内容使用不同的字符集时，用来设置script和jsonp请求所使用的字符集
xhr	Function	用来提供XHR实例自定义实现的回调函数
traditional	boolean	如果为true，则使用传统风格的参数序列化。

$.ajax()方法是jQuery最底层的Ajax实现，因此可以用它来代替其他的所有ajax方法。

//代替$.getScript()方法
$(function(){
    $('#send').click(function(){
        $.ajax({
            type:"GET",
            url:"text.js",
            dataType:"script"
        });
    });
});

//代替$.getJSON()方法
$(function(){
    $('#send').click(function(){
        $.ajax({
            type:"GET",
            url:"test.json",
            dataType:"json",
            success:function(data){
                //代码
            });
        });
    });
});

$.ajaxSetup(options)：定义了一组默认的Ajax选项，这些属性与$.ajax()函数的属性完全一样。（通过这个函数设置的默认值不会应用到load()方法，也不会覆盖$.get()和$.post()等实用函数的HTTP请求方式。）

//随后的每个Ajax调用都会使用这些默认值，除非使用传入Ajax实用函数的属性来显式地覆盖它们。
$.ajaxSetup({
    type:'POST',
    timeout:5000,
    dataType:'html'
});

Ajax事件：全局事件是被触发的自定义事件，而局部事件表现为传递给$.ajax()（及其相关的便捷函数）的回调函数。

事件名称	类型	描述
ajaxStart	全局	当Ajax请求开始时触发，只要没有其他请求处于激活状态。对于并发的请求，这个事件只会为第一个请求触发。不传递任何参数
beforeSend	局部	在发起请求之前调用，以便允许在向服务器发送请求之前修改XHR实例，或者通过返回false来取消请求
ajaxSend	全局	在发起请求之前触发，为了允许在向服务器发送请求之前修改XHR实例。
success	局部	当请求返回一个成功的响应时调用
ajaxSuccess	全局	当请求返回一个成功的响应时触发
error	局部	当请求返回一个错误的响应时调用
ajaxError	全局	当请求返回一个错误的响应时触发
complete	局部	当请求结束时调用，而不管状态（是否为同步的请求）如何。
ajaxComplete	全局	当请求结束时调用，而不管状态（是否为同步的请求）如何。
ajaxStop	全局	当Ajax请求结束并且没有其他并发的请求处于激活状态时触发。不传递任何参数

除了使用bind()来创建事件处理器，jQuery还提供了一组方便的函数来创建。

ajaxComplete(callback)、ajaxError(callback)、ajaxSend(callback)、ajaxStart(callback)、ajaxStop(callback)、ajaxSuccess(callback)