jQuery Ajax? ?? ??? ??

jQuery Ajax ??? ??

jQuery? Ajax ??? ??? ?? ?? ??? ????, ?? ????? ?? ??? ??? jQuery.ajax(??)??, ?? ?? Ajax ??? ?? ????? ??? ? ????. ??? ??? get, post, load ?? ?? ???? ???? ???? ?? ? ?????. ??? ?? ??? ?? ???? ?? ???????. :

1.load( url, [data], [callback] )

??: jQuery ??? ??

??:

load ???? ?? HTML ?? ??? ???? DOM? ??? ? ????. .

????? GET ??? ????, data ????? ???? Post ???? ?????.

- ?? ???? ?? ? ???? POST ???? ?????. jQuery 1.2??? ??? HTML ??? ????? ?? ???? ??? ? ??? ???? HTML ??? DOM? ?????. ??? "url #some > selector"? ?? ?? ???? "body>*"???.

??:

load? ?? ??? Ajax ????? ???? ??? ????.

?? ?? ??? ?????. direct HTML? ???? Ajax ?????

load? jQuery ???? ????? ?? ??? HTML? ??? ???? jQuery ?? ??????. ?? ??? ???? ??? ??? ?????. ??? load ?????? ???? ?????? ???? ??? ?? ??? ? ????. ?? ?? Load ?????? ??? ?????.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Ajax - Load</title>
   <script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script>
    <script type="text/javascript">
        $(function()
        {
            $("#btnAjaxGet").click(function(event)
            {
                //發(fā)送Get請(qǐng)求
                $("#divResult").load("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click" + "&timestamp=" + (new Date()).getTime());
            });
            $("#btnAjaxPost").click(function(event)
            {
                //發(fā)送Post請(qǐng)求
                $("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxPost_click" });
            });
            $("#btnAjaxCallBack").click(function(event)
            {
                //發(fā)送Post請(qǐng)求, 返回后執(zhí)行回調(diào)函數(shù).
                $("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxCallBack_click" }, function(responseText, textStatus, XMLHttpRequest)
                {
                    responseText = " Add in the CallBack Function! <br/>" + responseText
                    $("#divResult").html(responseText); //或者: $(this).html(responseText);
                });
            });
            $("#btnAjaxFiltHtml").click(function(event)
            {
                //發(fā)送Get請(qǐng)求, 從結(jié)果中過(guò)濾掉 "鞍山" 這一項(xiàng)
                $("#divResult").load("../data/AjaxGetCityInfo.aspx?resultType=html" + "&timestamp=" + (new Date()).getTime() + " ul>li:not(:contains('鞍山'))");
            });
        })
    </script>
</head>
<body>    
    <button id="btnAjaxGet">使用Load執(zhí)行Get請(qǐng)求</button><br />
    <button id="btnAjaxPost">使用Load執(zhí)行Post請(qǐng)求</button><br />
    <button id="btnAjaxCallBack">使用帶有回調(diào)函數(shù)的Load方法</button><br />
    <button id="btnAjaxFiltHtml">使用selector過(guò)濾返回的HTML內(nèi)容</button>
    <br />
    <div id="divResult"></div>
</body>
</html>

? ?? Load ???? ???? ??? ?????.

?: ?? ??? ???? ???. ???? ??? ???? GET ??? Timestamp ????(net Date()).getTime()? ??? ? ?? ???? ?? ???? URL? ???? ?? ???? ??? ?? ? ????.

?: ""? ?? url ???? ?? ??? ???? "??? ? ?? ??" ??? ????? ??? ??? ??????? ??? ? ????. ??? HTML? ???? ??? ?????. .

2.jQuery.get( url, [data], [callback], [type ] )

??: XMLHttpRequest

??:

?? HTTP GET? ?? ?? ?? ??.

??? $.ajax? ???? ??? GET ?? ?????. ??? ???? ?? ??? ??? ? ????. ?? ?? ? ??? ???? ?? ?? $.ajax? ?????.

??:

? ??? Get ??? ????. ????? URL? ?? ??? ? ????(?:

$.get("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click");

?? ??? ????? ?? ???:

$.get("../data/AjaxGetMethod.aspx", { "param": "btnAjaxGet2_click" });

). ??? ??? ??? ????? URL? ??? ???? ?????

URL? ????? ??? ????? ?? ???? ?? ??? ??? ????? ???? ???? ????.

??? ?? ??? ??? ????.

function (data, textStatus) {
  // data could be xmlDoc, jsonObj, html, text, etc...
  this; // the options for this ajax request
}

??? data? ??? ????? testStatus? ?? ?? ?????.

"timeout","error","notmodified","success","parsererror"

?? ?? ???? ??? ??? ?? ??? ?? ????. ??? ???? ??? ?????:

http://docs.jquery.com/Ajax/jQuery.ajax#options

?? ????? ??? ??? ???? ?? ?? ? ????:

"xml", "html", "script", "json", "jsonp", "text".

??? .

jQuery.getJSON( url, [data], [callback] ) ???? jQuery.get(url, [data],[callback], "json")

3? ?????. . jQuery.getJSON( url, [data], [callback] )

??: XMLHttpRequest

??? ??: jQuery.get(url, [data],[callback], "json")

??:

HTTP GET ??? ?? JSON ???? ?????.

jQuery 1.2??? "myurl?callback=?"? ?? JSONP ??? ?? ??? ???? ?? ????? JSON ???? ??? ? ????. jQuery? ?? ??? ???? ?? ?? ??? ?? ???? ???? ?????.

??: ? ?? ??? ???? ?? ? ? ?? ??? ?????.

??:

getJSON ??? get ??? ?? ????? "JSON"?? ?????. ?? ???? ?? ???? ?? JSON ??? ?? ?? ??? ?????. ?? ???? ??? ????.

[{""pkid"":""0997"",""ProvinceId"":""XJ"",""CityName"":""Aksu"",""CityNameEn "": ""Akesu"",""PostCode"":""843000"",""isHotCity"":false},

{""pkid"":""0412"",""ProvinceId" ":" "LN"",""CityName"":""??"",""CityNameEn"":""??"",""PostCode"":""114000"",""isHotCity"": false}]

? ???? data.length? ???? ??? ?? ?? ??? ? ??? data[0].CityName? CityName ??? ??????. ? ?? ???

4.jQuery.getScript( url, [??] )

??: XMLHttpRequest

???: jQuery.get(url, null, [??], "script" )

??:

HTTP GET ??? ?? JavaScript ??? ???? ?????.

jQuery 1.2 ???? getScript? ??? ???? JS ??? ??? ? ?????. 1.2??? ??? ???? JavaScript ??? ??? ? ????. ??: Safari 2 ????? ?? ???? ????? ????? ??? ? ????. getScript? ?? ????? ???? ?? ?? ??? ??? ???.

??:

?? ?? ??? ?????? ??? ? ?? ?? ??? ??? ???? ???? ?? ?? ?? ??? ???? ?????(????? ??? ??? ??? ???? ???? ??? ??? ?????) ???) ??? ?? ? ??? ?? ??? ??? ?? ??? ????.

?? get ??? ??? ?? jQuery? Ajax ??? ???? ? ??? ?? ??? ??????. ????? jQuery.ajax()? ???? getScript? "script" ?? ?????. ?? ????? ????? Ajax ???? ?? ????? ?? ??? ??? ?? ?????.

$.getJSON("../data/AjaxGetCityInfo.aspx", { "resultType": "json" }, function(data, textStatus)
{
      alert(data.length);
      alert(data[0].CityName);
});

? ??? ???? ???? ?? ?????. ???? ??? ?????:

var head = document.getElementsByTagName("head")[0];            
var script = document.createElement("script");
script.src = s.url;

????? ???? ?? ? ???? ?????.

head.appendChild(script);

? ??? ??? ? ??? ? ?? ???? ??? ?? ???????. ??:

IE6

FireFox

Notes

??? ??? ?? js

pass

?? ??? data ? textStatus ?? ??? ? ????

??? ? ?? js

pass

?? ???? data? textStatus ? ? undiffed

??? getScript ??? ???? ??? ???? ?? ???? ?? ??? ????:

  // Handle Script loading
            if ( !jsonp ) {
                var done = false;
                // Attach handlers for all browsers
                script.onload = script.onreadystatechange = function(){
                    if ( !done && (!this.readyState ||
                            this.readyState == "loaded" || this.readyState == "complete") ) {
                        done = true;
                        success();
                        complete();
                        // Handle memory leak in IE
                        script.onload = script.onreadystatechange = null;
                        head.removeChild( script );
                    }
                };
            }

5. jQuery.post( url, [data], [callback], [type] )

?? : XMLHttpRequest

??:

?? HTTP POST ??? ?? ??? ?????.

??? $.ajax? ???? ??? POST ?? ?????. ??? ???? ?? ??? ??? ? ????. ?? ?? ? ??? ???? ?? ?? $.ajax? ?????.