Discussion :

[Opec78]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci d'avance,

Opec78.

[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.

[danielhagnoul]

Bonsoir

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Opec78]

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".

Bonsoir

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[darkterreur]

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

A tester

[danielhagnoul]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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); });

[Opec78]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[danielhagnoul]

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