logo   Ajax - jQuery funktioner




jQuery indeholder godt 10 funktioner, der er dedikeret til hånteringen af ajax-funktionalitet. af disse kan der udføres egentlig ajax-funktionalitet med de 6 ($.ajax() og 'shorthand'), mens de øvrige er hjælpefunktioner.


Af de 6 er ajax() den væsentligste, mens funktionerne til hentning af data bruges i mindre omfang.


Alle funktioner placeres til udførelse indenfor rammerne af Ajax scriptet. Rækkefølgen er styrende for deres anvendelse / start.


$_ajax() interface
$.ajax()Eget HTTP-request
$.ajaxPrefilter()Lokale tilpasninger af globale opsætninger eller andre opsætninger til ajax().
$.ajaxSetop()Global opsætning til ajax()
$.ajaxTransport
Hent filer (shorthand)
$.get()Indlæser remote side med HTTP GET request.
$.getJSON()Indlæser JSON-fil med HTTP GET request.
$.getScript()Indlæser og udfører javaScript-fil med HTTP GET request.
$.post()Indlæser remote side med HTTP POST request.
load()Indlæser HTML fra remote fil og indsætter den i DOM.
Serialisering: <FORM ..>-data
$.param()Etablerer en seriel tekststreng ud fra enhver array eller objekt. Kan bruges i 'URL query string' i et ajax request.
serialize()Etablerer en seriel tekststreng ud fra $_POST- og $_GET-data.
serializeArray()Etablerer en seriel tekststreng og returnerer en JSON-fil ud fra $_POST- og $_GET-data.



Low level interface

$.ajax()		Etablerer sit eget HTTP-request til et selvstændigt server-program uden at påvirke den 'aktuelle' HTTP-session.
Den er nærmest synonyn med 'ajax'.		async, beforeSend(xhr), cache, complete(xhr,status), contentType, context, data, dataFilter(data,type), dataType, error(xhr,status,error), global, ifModified, jsonp, jsonpCallback, password, processData, scriptCharset, success(result,status,xhr), timeout, traditional, type, url, username, xhr

    $(document).ready(function(){
    $("button").click(function(){
       $.ajax({url:"ajaxfile.txt",
         success:function(result){
         $("div").html(result);
         }
       });
    });
}); 		xxx

$.ajaxPrefilter()		Lokale tilpasninger af globale opsætninger eller andre opsætninger til ajax().dataTypes, settings, localSettings, jqXHR

// register AJAX prefilter : options, original options
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {

    // retry not set or less than 2 : retry not requested
    if( !originalOptions.retryMax || !originalOptions.retryMax >=2 ) return;
    // no timeout was setup
    if( !originalOptions.timeout >0 ) return;

    if( originalOptions.retryCount ) {
       // increment retry count each time
       originalOptions.retryCount++;
    }else{
       // init the retry count if not set
       originalOptions.retryCount = 1;
       // copy original error callback on first time
       originalOptions._error = originalOptions.error;
    };

    // overwrite error handler for current request
    options.error = function( _jqXHR, _textStatus, _errorThrown ){
       // retry max was exhausted or it is not a timeout error
    if( originalOptions.retryCount >= originalOptions.retryMax || _textStatus!='timeout' ){
          // call original error handler if any
          if( originalOptions._error ) originalOptions._error( _jqXHR, _textStatus, _errorThrown );
          return;
       };
       // Call AJAX again with original options
       $.ajax( originalOptions);
    };
}); 		xx

$.ajaxSetup()		Global opsætning af afvigelser fra default parametre til brug for $.ajax() requests til serveren.
Anvendelse frarådes.		async, beforeSend(xhr), cache, complete(xhr,status), contentType, context, data, dataFilter(data,type), dataType, error(xhr,status,error), global, ifModified, jsonp, jsonpCallback, password, processData, scriptCharset, success(result,status,xhr), timeout, traditional, type, url, username, xhr


$.ajaxSetup({
    dataFilter: function(data) {
    var data = JSON.parse(data);
    delete data.redirect;
    return JSON.stringify(data);
    }
}); 		xxx

$.ajaxTransport()		Opbygger et objekt, der håndterer aktuel transmission af ajax data.dataType, handler x
Hentning af data
(kaldes samlet: shorthand methods)

$.get()		Indlæser remote side med HTTP GET request.URL, data, function(data,status,xhr), dataType

$("button").click(function(){
    $.get("demo_test.asp", function(data, status){
       alert("Data: " + data + "\nStatus: " + status);
    });
});

The first parameter of $.get() is the URL we wish to request ("demo_test.asp").
The second parameter is a callback function. The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request 		xxx

$.getJSON()		Indlæser JSON-fil med HTTP GET request.url, data, success(data,status,xhr)

$("button").click(function(){
    $.getJSON("demo_ajax_json.js", function(result){
       $.each(result, function(i, field){
          $("div").append(field + " ");
       });
    });
});

xxx

$.getScript()		Indlæser og udfører javaScript-fil med HTTP GET request.url, success(response,status)

$("button").click(function(){
    $.getScript("demo_ajax_script.js");
});
xxx

$.post()		Indlæser remote side med HTTP POST request.URL, data, function(data,status,xhr), dataType

$.post(
    "result.php",
    { name: "Zara" },
    function(data) {
       $('#stage').html(data);
    }
);
The first parameter of $.post() is the URL we wish to request ("demo_test_post.asp").
Then we pass in some data to send along with the request (name and city).
The ASP script in "demo_test_post.asp" reads the parameters, processes them, and returns a result.
The third parameter is a callback function. The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request. 		xxx

load()		Indlæser HTML fra remote fil og indsætter den i DOM. (f.eks. en RSS-fil).url, data, function(response,status,xhr)

$("button").click(function(){
    $("#div1")
      .load("demo_test.txt", function(responseTxt, statusTxt, xhr){
       if(statusTxt == "success")
          alert("External content loaded successfully!");
       if(statusTxt == "error")
          alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
});
 xxxxx
Serialisering: <FORM..>-data

$.param()		Etablerer en seriel tekststreng i formatet 'www-form-urlencoded' ud fra enhver array eller objekt. Kan bruges i 'URL query string' i et ajax request.

Med ajax() traditional-optionen etableres en ' traditional 'shallow' serialized representation'.		object, trad

$(this).serialize() + "&" + $.param(data) 		xxx

serialize()		Etablerer en seriel tekststreng i formatet 'www-form-urlencoded' ud fra $_POST- og $_GET-data.ingen

$(this).serialize() + "&" + $.param(data) 		xxx

serializeArray()		Etablerer en seriel tekststreng og returnerer en JSON-fil ud fra $_POST- og $_GET-data.ingen

$("button").click(function(){
    var x = $("form").serializeArray();
    $.each(x, function(i, field){
       $("#results").append(field.name + ":" + field.value + " ");
    });
});

The serializeArray() method creates an array of objects (name and value) by serializing form values.
You can select one or more form elements (like input and/or text area), or the form element itself. 		xxx
x
x