Traiter une URL invalide avec la méthode "ajax" de jQuery

Version imprimable

Bonjour à tous,

Je suis actuellement en train de développer une application mobile en HTML/Kendo UI/CSS (et Apache Cordova) et qui communique avec un service Web (ASMX). Au moment où l'utilisateur lance l'application, il lui est demandé de saisir une URL qui lui est propre et sur laquelle se trouve le service Web en question lui permettant de s'authentifier et d'effectuer diverses opérations.

Pour cela, j'utilise la méthode ajax de jQuery qui fonctionne très bien. Le seul bémol est lorsque l'utilisateur indique une mauvaise URL, l'application ne répond plus. En effet, au moment de l'appel à la méthode ajax, une petite fenêtre pop-up de chargement (Loading...) apparaît et disparaît au moment où l'utilisateur est connecté. Lorsque l'URL est mauvaise, cette petite fenêtre pop-up reste à l'écran.

Ci-dessous, une partie du code permettant de se connecter au service Web :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $.ajax({ beforeSend: function () { openLoadingPopup(); }, complete: function () { closeLoadingPopup(); }, crossDomain: true, contentType: "application/json; charset=utf-8", url: URL introduite + 'Service.asmx/NomMethode', data: { Username: localStorage.getItem('username') }, dataType: "jsonp", success: function (data) { // Traitements }, error: function (xhr, ajaxOptions, thrownError) { alert((JSON.parse(xhr.responseText)).Message); } });
Que puis-je y changer afin d'indiquer un message d'erreur si l'URL est incorrecte ? Ou si un certain temps s'est écoulé sans qu'il n'y ait eu de réponse ? La propriété timeout ne semble rien faire dans mon cas. Pas plus que le code suivant :

Code:

complete: function (jqXHR, textStatus) { alert(textStatus); closeLoadingPopup(); }

Merci d'avance,

Opec78.

16/09/2014, 16h17
darkterreur

Bonjour,

A ta place je ferai un truc tout con, un ".on('change', ..." sur ton champs de saisie avec une Regex sur la valeur de ton champs.
Comme cela à chaque saisies, le champ est vérifié et tu ne fait rien temps que c'est pas bon.

par exemple mettre un input cacher a 1 et si c'est bon tu le passe a 2.
Et dans ton code si ton input vaut 2 alors tu éxecute l'ajax etc...
Tu peux même faire apparaitre un texte en rouge ou une sur brillance du champs pour avertir.

Bonsoir

Je vous conseille de faire un essai avec la méthode recommandée (http://api.jquery.com/jQuery.getJSON/).

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var jqXHR = $.getJSON( url, { "Username" : localStorage.getItem('username') } );
 
jqXHR.done( function( data, textStatus, jqXHR ){
    // succès de la transaction, on doit traiter le contenu de data
    console.log( data, textStatus, jqXHR );
 
});
 
jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
    // échec de la transaction, gérer la catastrophe
    console.log( jqXHR, textStatus, errorThrown );
 
});
 
jqXHR.always( function( jqXHR, textStatus ){
    // la transaction est terminée
    console.log( jqXHR, textStatus );
});

Pour obtenir une réponse en JSONP votre URL est bizarre, voir : http://danielhagnoul.developpez.com/...axRequest.html

Citation:

Envoyé par darkterreur

Bonjour,

A ta place je ferai un truc tout con, un ".on('change', ..." sur ton champs de saisie avec une Regex sur la valeur de ton champs.
Comme cela à chaque saisies, le champ est vérifié et tu ne fait rien temps que c'est pas bon.

par exemple mettre un input cacher a 1 et si c'est bon tu le passe a 2.
Et dans ton code si ton input vaut 2 alors tu éxecute l'ajax etc...
Tu peux même faire apparaitre un texte en rouge ou une sur brillance du champs pour avertir.

Bonjour darkterreur,

Toutes mes excuses, je me suis sans doute mal exprimé dans ma question. Ce que j'avais en tête en parlant d'URL invalide n'était pas une URL syntaxiquement incorrecte mais plutôt une URL injoignable. Par exemple, si l'utilisateur fait une faute de frappe et entre "http://www.societe-a.com/" alors qu'il aurait dû entrer "http://www.societe-b.com" sur lequel se trouve bel et bien le service Web en question, alors, il devrait recevoir un message d'erreur étant donné que l'application mobile n'a pu contacter le service Web vu qu'il ne se trouvait pas sur le site "http://www.societe-a.com".
Citation:
Envoyé par danielhagnoul
Bonsoir

Je vous conseille de faire un essai avec la méthode recommandée (http://api.jquery.com/jQuery.getJSON/).
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 var jqXHR = $.getJSON( url, { "Username" : localStorage.getItem('username') } ); jqXHR.done( function( data, textStatus, jqXHR ){ // succès de la transaction, on doit traiter le contenu de data console.log( data, textStatus, jqXHR ); }); jqXHR.fail( function( jqXHR, textStatus, errorThrown ){ // échec de la transaction, gérer la catastrophe console.log( jqXHR, textStatus, errorThrown ); }); jqXHR.always( function( jqXHR, textStatus ){ // la transaction est terminée console.log( jqXHR, textStatus ); });
Pour obtenir une réponse en JSONP votre URL est bizarre, voir : http://danielhagnoul.developpez.com/...axRequest.html
Bonjour danielhagnoul,

Merci pour votre réponse. J'ai adapté mon code en prenant exemple sur le vôtre et j'obtiens donc ceci :
Code:

1 2 3 4 5 6 7 var jqXHR = $.getJSON(URL introduite + '/Service.asmx/NomMethode?callback=?', { Username: localStorage.getItem('username') }); jqXHR.done(function (data, textStatus, jqXHR) { alert('OK!'); }); jqXHR.fail(function (jqXHR, textStatus, errorThrown) { alert('Failed: ' + textStatus); }); jqXHR.always(function (jqXHR, textStatus) { });
Cependant, parfois, en introduisant une mauvaise URL (existante mais qui ne possède pas le service Web), j'obtiens bien un message d'erreur "Failed: parsererror" et parfois, aucune indication d'erreur avec d'autres URLs tout aussi incorrectes. Je suppose que c'est le serveur distant qui décide de ne pas répondre.

Y aurait-il dès lors éventuellement quelque chose me permettant d'aller dans le code d'erreur si je n'obtiens aucune réponse après un certain temps (ex. : 20 secondes) ?

P.S. : Mes connaissances en Javascript sont encore quelque peu limitées mais j'y travaille :)

Bonjour,
En effet j'étais a coté de la plaque.

Daniel petite question, en quoi "getJSON()" differe de ceci ?

Code:

1
2
3
4
5
6
$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

Opec78, j'ai trouver ceci dans les deux cas:

Code:

1
2
3
4
5
6
7
8
9
10
11
var request = $.ajax({
    dataType: "json",
    url: url,
    data: data,
    success: function( ) { },
    timeout: 2000
}).fail( function( xhr, status ) {
    if( status == "timeout" ) {
        // do stuff in case of timeout
    }
});

ou avec la méthode de daniel

Code:

1
2
var p = $.getJSON(..., function(){ alert('success');});
setTimeout(function(){ p.abort(); }, 2000);

A tester

Citation:

Daniel petite question, en quoi "getJSON()" differe de ceci ?

Voir les liens que j'ai donné, il y a beaucoup à lire mais cela en vaut la peine.

En deux mots, méthode recommandée par jQuery, plus simple, plus sûre et pas obsolète.

Il y a déjà une option timeOut, mais elle ne fonctionne pas à 100% pour "script", "json" ou "jsonp". Avec "mon code", cela donne :
Code:

1 2 3 4 5 6 7 $.ajaxSetup( { "timeout" : 3000 } ); // 3s var jqXHR = $.getJSON(URL introduite + '/Service.asmx/NomMethode?callback=?', { Username: localStorage.getItem('username') }); jqXHR.done(function (data, textStatus, jqXHR) { alert('OK!'); }); jqXHR.fail(function (jqXHR, textStatus, errorThrown) { alert('Failed: ' + textStatus); });

Un grand merci à vous deux, darkterreur et danielhagnoul ! En combinant vos idées, je suis parvenu à ce que je voulais :)

danielhagnoul : En effet, préciser le timeout ne fonctionne pas à 100% puisque cela n'a pas fonctionné avec mon problème. J'ai donc utilisé la fonction setTimeout proposée par darkterreur.

Au cas où cela pourrait être utile, voici ce que donne mon code final :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 var success = false; openLoadingPopup(); var jqXHR = $.getJSON(URL introduite + '/Service.asmx/NomMethode?callback=?', { Username: localStorage.getItem('username') }); jqXHR.done(function (data, textStatus, jqXHR) { success = true; // Autres traitements }); jqXHR.fail(function (jqXHR, textStatus, errorThrown) { alert('Failed!'); }); jqXHR.always(function (jqXHR, textStatus) { closeLoadingPopup(); }); setTimeout(function () { if (success == false) jqXHR.abort(); }, 30000);
Encore une fois, un grand merci ! :)

18/09/2014, 11h17
danielhagnoul

Proposition de Q/R pour la :faq: Comment puis-je interrompre une transaction AJAX ?