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:
Request (Optioner relateret til fremsendelse af data til serveren.) |
| accepts | Datatype serveren skal benytte til opbygning af response. | |
| async | Om ajax skal anvendes synkront / asynkront. | |
| beforesend | Funktion der skal udføres før request sendes til server. | |
| cache | Om requests skal anvende cache. | |
| contentType | MIME-type for data til serveren. | |
| context | !!!!!!! | |
| crossDomain | Om metoder / properties skal kunne tilgås på trærs af site. | |
| data | Har tilknyttet de data, der skal sendes til serveren | |
| global | Om globale events skal kunne anvendes | |
| headers | !!!!!!! | |
| ifModified | Om request kun kan udføres, når nye data til stede. | |
| isLocal | !!!!!!! | |
| jsonp | CallBack-ident anvendt ved download med JSONP. | |
| jsonpCallback | Navn på callback knyttet til JSONP request. | |
| mimeType | MIME-type til at overstyre XHR-minetype. | |
| password | Password ved krav derom fra HTTP | |
| processData | Om data i et request omformes til 'query string'. | |
| scriptCharset | Tegnsæt til brug ved 'jsonp', 'script' og type='GET' | |
| timeout | Antal millisekunder før request afbrydes. | |
| traditional | Om der ved serialisering med .param() skal anvendes 'traditional 'shallow' serialized representation'. | |
| type | Alias for 'method' i FORM. Ident fen type data, der kommer fra FORM. | |
| url | Sti til og navn for det (php/JSONP)-program, der skal udføre request opgaven. | |
| username | Brugernavn 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 |
| complete | Callback ved success og fejl i request. | |
| contents | !!!!!!! | |
| converters | Egenudviklet konvertering fra text til json til overstyring af default konvertering. | |
| dataFilter | Funktion til ajax-uafhængig behandling af de rå response-data før tilbagesending til klient | |
| dataType | Datatype tilbage fra serveren som response. | |
| error | Callback ved fejl i request. | |
| statusCode | Tilbagesvar svarende til fejlkoder i HTTP-response. | |
| success | Callback 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).
|