logo   Optioner i .AJAX()




Ajax() er den mest generelle af jQuery's funktioner til udførelse af ajax-aktiviteter. Via dens optioner kan hele forløbet styres fra start på request til afslutning af response.


Optionerne i .ajax() kan opdeles efter om de anvendes i forbindelse med resuest eller response:


Optionerne hos jquery.com:


God beskrivelse fra coursesweb:


Request
(Optioner relateret til fremsendelse af data til serveren.)
acceptsDatatype serveren skal benytte til opbygning af response.
asyncOm ajax skal anvendes synkront / asynkront.
beforesendFunktion der skal udføres før request sendes til server.
cacheOm requests skal anvende cache.
contentTypeMIME-type for data til serveren.
context!!!!!!!
crossDomainOm metoder / properties skal kunne tilgås på trærs af site.
dataHar tilknyttet de data, der skal sendes til serveren
globalOm globale events skal kunne anvendes
headers!!!!!!!
ifModifiedOm request kun kan udføres, når nye data til stede.
isLocal!!!!!!!
jsonpCallBack-ident anvendt ved download med JSONP.
jsonpCallbackNavn på callback knyttet til JSONP request.
mimeTypeMIME-type til at overstyre XHR-minetype.
passwordPassword ved krav derom fra HTTP
processDataOm data i et request omformes til 'query string'.
scriptCharsetTegnsæt til brug ved 'jsonp', 'script' og type='GET'
timeoutAntal millisekunder før request afbrydes.
traditionalOm der ved serialisering med .param() skal anvendes 'traditional 'shallow' serialized representation'.
typeAlias for 'method' i FORM. Ident fen type data, der kommer fra FORM.
urlSti til og navn for det (php/JSONP)-program, der skal udføre request opgaven.
usernameBrugernavn ved krav derom fra HTTP.
xhr!!!!!!!Callback for at etablerere et native XMLHttpRequest object.
xhrFields!!!!!!!
Response
Optioner relateret til returnering af data til klienten. Kaldes ofte CallBack
completeCallback ved success og fejl i request.
contents!!!!!!!
convertersEgenudviklet konvertering fra text til json til overstyring af default konvertering.
dataFilterFunktion til ajax-uafhængig behandling af de rå response-data før tilbagesending til klient
dataTypeDatatype tilbage fra serveren som response.
errorCallback ved fejl i request.
statusCodeTilbagesvar svarende til fejlkoder i HTTP-response.
successCallback ved succesfuld gennemførelse af Ajax-aktivitetenSender response-data og evt. callback retur til klienten.


Request

accepts
depends on data type

$.ajaxSetup({cache:false});
    $.ajax({url:mhrxDeployDir + "loggedIn.jsp",
       dataType:"json",
       accepts:"application/json",
       type:"GET",
       success:function(data) {
          // etc code
Den datatype, der på serveren skal benyttes til opbyning af response.
Optionen 'dataType' bør anvendes i stedet for.

Kan have følgende værdier:
accepts: {
    "*": allTypes,
    text: "text/plain",
    html: "text/html",
    xml: "application/xml, text/xml",
    json: "application/json, text/javascript"
},


async
true | false (default true)

$.ajax({
    type: “GET”,
    url: “/destination.php?q=1”,
    async : true
}).done(function( msg ) {
});
Toggle for om ajax() skal anvendes synkront (scriptet - og brugen af siden - stopper indtil svar fra serveren er modtaget) eller asynkront (scriptet fortsætter og vil håndtere svar fra serveren når / hvis det modtages). Bruges næsten altid.
Kan bl.a. være nødvendigt at sætte den til 'false', for at få 'sussess'-optionen til at virke.

beforeSend
(xhr)

$.ajax({
    url: "file.php",
    beforeSend: function() {
       xhr.setRequestHeader("Accept", "text/javascript");
       $('#resp').html('Loading...');
    },

    success: function(response){
       $('#resp').html('response');
}
});
Tilknytning af funktion, der skal udføres før request til serveren afsendes.

cache
true

$.ajax({
    cache: false,
    type: "GET",
    data: "somedatehere",
    url: "somurl.php",
    success:function(response){
       //the response here.
   }
});
Toggle for om Ajax-requests skal caches. Svarer til HTTP caching. Skal være 'false' for datatyperne 'script' og 'jsonp'.

contentType
'application/x-www-form-urlencoded; charset=UTF-8' (default)

$.ajax({
    dataType: "json",
    contentType : "application/json; charset=UTF-8",
    url: '/getjson.php',
    data : formData,
    success: function(response) {
       CurrentArray = response;
    } });
Ident for MIME-type for data, der sendes til serveren = POST-format.

Ved 'false' sendes ingen contentType til serveren.

context
$.ajax({
    url: "file.php",
    context: $('#idd'),
    success: function(){
       $(this).html('Done'); // this will be "#idd"
    }
});

eller

$.ajax({
    type: 'POST',
    data: 'value=34',
    context: $(this),
    success: function(resp){
       $(this).next().html(resp);
    }
});

specifies the "this" value for all AJAX related callback functions.
!!!!!
context: document.body,
An object to use as the context (this) of all Ajax-related callbacks

crossDomain
false for same-domain, true for cross-domain requests Tilladelse til at metoder og properties i scripts knyttet til andre sider på sitet kan tilgås.
Kan f.eks. benyttes af JSONP.

global
true

$.ajax({
    url: "file.php",
    global: false,
    success: function(msg){
       alert(msg);
    }
});
Toggle for om de 6 globale event handlere skal kunne anvendes:
.ajaxSend()
.ajaxStart()
.ajaxStop()
.always() (ex .ajaxComplete())
.fail() (ex .ajaxError())
.done() (ex .ajaxSuccess())

Deres funktionalitet styres via individuelle ajax metoder.

data


$.ajax({
    type: "GET",
    url: "file.php",
    data: "id=78&name=some_name"
});
Tilknytning af de data, der skal sendes til serveren.

Før overførsel kan de struktureres med 'serialize()' eller 'serializeArray':
  • serialize(): Dataene opbygges som URL-parametre.
    data: $(this).serialize()
  • serializeArray(): dataene til opbygges som associativ array
    data: $(this).serializeArray().
    The data to send to the server when performing the Ajax request

headers
{}

$.ajax({
    headers: { "Content-Type": "application/json", "Accept": "application/json" },
    type: "POST",
    url: "file.php",
    data: {'json': 'data'},
    dataType: "json",
    success: function(json){
       // do something...
}
});
a map of additional header key/value pairs to send along with the request. This setting is set before the beforeSend function is called; therefore, any values in the headers setting can be overwritten from within the beforeSend function !!!!!!
An object of additional headers to send to the server

ifModified
false

$.ajax({
    url: "file.php",
    ifModified: true,
    success: function(data, status){
       if(status!="notmodified") {
          $("#display").append(data);
       }
    }
});
Toggle (ved true) for at et request kun vil kunne sættes til 'success', hvis der er sket ændring af response siden sidste request.
Set this option to true if you want to force the request to be successful only if the response has changed since the last request

isLocal
depends on current location protocol!!!!!
Set this option to true if you want to force jQuery to recognize the current environment as “local”

jsonp
<script>
$(document).ready(function(){

    $("#useJSONP").click(function(){
       $.ajax({
          url: 'http://domain.com/jsonp-demo.php',
          data: {name: 'Chad'},
          dataType: 'jsonp',
          jsonp: 'callback',
          jsonpCallback: 'jsonpCallback',
          success: function(){
             alert("success");
          }
       });
    });
});

function jsonpCallback(data){
$('#jsonpResult').text(data.message);
}
</script>
JSON with PADDING: Hentning af en JSON-fil fra et andet domæne. Andre domæner kan tilbyde den service, at deres JSON-filer kan downloades (stien dertil og filnavn anføres i 'url' optionen).

Navnet på den callBack-ident filleverandøren anvender.

jsonpCallback
jsonCallback(
$(document).ready(function() {
   $("#jsonpbtn2").click(function() {
       var surl = "http://www.fbloggs.com/sandbox/jsonp.php";
       var id = $(this).attr("id");
       $.ajax({
          url: surl,
          data: {id: id},
          dataType: "jsonp",
          jsonp : "callback",
          jsonpCallback: "jsonpcallback"
          });
       });
    });
Navn på callback funktion knyttet til JSONP request.

mimeType
-MIME-type til at overstyre XHR-mimetype.
Default ???
Andre ???

password
$.ajax({     type: "GET",
    url: "http://localhost:8080/test",
    data: '',
    contentType: "application/json; charset=utf-8",
    dataType: "xml",
    username: "ajax",
    password: "code",
    success: OnSuccessCall,
    error: OnErrorCall
});
Password, hvis krav derom fra HTTP.

processData
true

// Sends an xml document as data to the server
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: function(response){
$("#display").html(response);
}
});
Toggle for at data i et request omformes til en 'query streng' = false.

scriptCharset
$.ajax({
    type: "GET",
    url: "file.php",
    scriptCharset: "utf-8",
    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
    data: "id=12&name=some_name",
    success: function(response){
       $("#idd").html(response);
    }
});
Tegnsæt til brug ved 'jsonp' og 'script' requests og type = 'GET'.
Tvinger request til at fortolke de modtagne data baseret på det anførte karaktersæt.

timeout
$.ajax({
    url: "/getData",
    timeout:3000 //3 second timeout
}).done(function(){
    //do something
}).fail(function(jqXHR, textStatus){
    if(textStatus === 'timeout')
    {
       alert('Failed from timeout');
       //do something. Try again perhaps?
    }
});?
Antal millisekunder request tillades at køre før afbrydelse. Alert kan tilknyttes.

traditional


$.ajax({
    type: "POST",
    url: "your url",
    data: { input1: 10, input2: 1000, array1: [1, 2] },
    dataType: "json",
    traditional: true,
    success: function (data) {
       // do something
    },
    error: function (data) {
       alert("failed " + data);
    }
});
Toggle for om der ved serialisering med .param() skal anvendes 'traditional 'shallow' serialized representation'.
Bør være 'true'.

type
'GET'

$.ajax({
    type: "POST",
    url: "file.php",
    data: 'name=some_name&pass=pasword',
    success: function(response){
       $("#idd").text(response);
    }
});
Alias for 'method' i FORM. Ident fen type data, der kommer fra FORM.

url
the current page

$.ajax({
    url: "file.php",
    success: function(response){
       $("#idd").text(response);
    }
});
Sti til og navn for det (php/JSONP)-program, der skal udføre request opgaven.

username
$.ajax({     type: "GET",
    url: "http://localhost:8080/test",
    data: '',
    contentType: "application/json; charset=utf-8",
    dataType: "xml",
    username: "ajax",
    password: "code",
    success: OnSuccessCall,
    error: OnErrorCall
});
Brugernavn, hvis krav derom fra HTTP.

xhr
-Callback for at etablerere et native XMLHttpRequest object.

xhrFields
-An object to set on the native XHR object
Response

complete
(xhr, status)

$.ajax({
    url: "file.php",
    complete: function() { alert('complete'); }
});
En af de 3 callback optioner. Svarer til '.success()', men kan også anvendes ved fejl i request. Bør kun anvendes ved $(document).
Den enmme: ".complete(function) {alert("Færdig");});".
$(document).ajaxComplete(function()
A function to be called when the request finishes (after success and error callbacks are executed)

contents
-!!!!!
An object that determines how the library will parse the response

converters
converters: {
    "text json": function(data) {
       return data;
    }
}
Egenudviklet konvertering fra text til json til overstyring af default konvertering.

dataFilter
(data, type)

dataFilter: function(data, type){
    if(type == "xml") alert("returned xml!");
    var newdata = data.replace(/     newdata = newdata.replace(/>/g, '}');
    return newdata;
},
Funktion til ajax-uafhængig behandling af de rå response-data før tilbagesending til klient.

"An example of WHAT it could be for could be a custom data compression implementation. Say you're returning xml or json and you want to compress is. You could potentially add a dataFilter that decompresses the raw data and returns it.
Note that the dataFilter runs PRIOR to the parser. So as long as you return valid json, xml, etc the parser will come along and pass on the response in the correct type."


dataType
var data = {"name":"John Doe"}
$.ajax({
    dataType : "json",
    contentType: "application/json; charset=utf-8",
    data : JSON.stringify(data),
    success : function(result) {
       alert(result.success); // result is an object which is created from the returned JSON
    },
});
Den type data, der forventes tilbage fra serveren som 'Response'.
- "text":
- "xml": xml til behandling i jQuery,
- "html": tekst og tags. Valideres ved indsættelse via DOM,
- "script": Valideres som javaScript og i tekstfil,
- "json": Valideres i JSON-format som javaScript Objekt,
- "jsonp": Indsættes i en 'JSON'-blok v.h.a. JSONP.
Ved blank gættes bedst muligt.
Intelligent Guess (xml, json, script or html.
The type of data expected back from the server

error
(xhr, status, error)

$.ajax({
    url: "file.php",
    error: function(xhr, status, error) { alert(error); }
});
En af de 3 callback optioner. Opsamler oplysning om, at et request ikke lykkes.
Den nemme: ".error(function) {alert("Fejl");});".

statusCode
{}

statusCode: {
    200: function (response) {
       alert('1');
       AfterSavedAll();
    },
    201: function (response) {
       alert('1');
       AfterSavedAll();
    },
    400: function (response) {
       alert('1');
       bootbox.alert('<span style="color:Red;">Error While Saving Outage Entry Please Check</span>', function () { });
    },
    404: function (response) {
       alert('1');
       bootbox.alert('<span style="color:Red;">Error While Saving Outage Entry Please Check</span>', function () { });
    }
},
Tilbagesvar svarende til fejlkoder i HTTP-response.

success


$.ajax({
       url: "file.php",
       data: 'id=an_id',
       success: function(response, status, xhr){
       if(status=="success") {
          $("#display").html(response);
       }
       else { alert(status+ ' - '+ xhr.status); }
    }

}); -
Har dobbeltrolle:
1. Sender response-data retur til klienten navngivet med den anførte selektor.
2. En af de 3 lokale callback optioner. Sender callback om at etableringen af response-data er mislykkedes (eller lykkedes).
































































x
x