web-dev-qa-db-fra.com

Problèmes de chemin d'accès relatif dans l'appel Ajax Javascript

D'accord, j'ai un fichier JavaScript avec les fonctions suivantes:

function AskReason() {
    var answer = Prompt("Please enter a reason for this action:", "");
    if (answer != null)
        DoReason(answer);
}

function createXMLHttpRequest() {
    try {
        return new XMLHttpRequest();
    }
    catch (e)
    { alert('XMLHttpRequest not working'); }
    try {
        return new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    { alert('Msxml2.XMLHTT not working'); }
    try {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e)
    { alert('Microsoft.XMLHTTP not working'); }
    alert("XMLHttpRequest not supported");
    return null;
}

function DoReason(reason) {
    var xmlHttpReq = createXMLHttpRequest();
    var url = "/Shared/AskReason.ashx?REASON=" + reason;
    xmlHttpReq.open("GET", url, true);
    xmlHttpReq.send(null);
}

Cette ligne:

    var url = "/Shared/AskReason.ashx?REASON=" + reason;

C'est ce qui cause le problème.

Dans VS 2010, débogage de l'application - cet appel fonctionne pour mon gestionnaire ashx.

Lorsque je déplace le projet vers un répertoire virtuel - exemple http://localhost/myapp

ce code va casser et je dois changer le javascript en ceci:

var url = "http://localhost/myapp/Shared/AskReason.ashx?REASON=" + reason;

Avez-vous des idées sur la façon de résoudre ce problème pour fonctionner dans les deux environnements ou d'accepter simplement la modification manuelle lorsque je déploie des applications sur des serveurs?

Merci, Mike

javascriptrelative-path
17
MDV2000

Pointy way fonctionne, mais vous devez savoir à l'avance où vous allez le déployer.

Alternativement, ne commencez simplement pas le chemin relatif par un /:

var url = "Shared/AskReason.ashx?REASON=" + reason;

Cela sera résolu par rapport à l'emplacement du document actuel. Donc, si le document actuel est:

http://localhost/myapp/index.aspx

... alors cela résoudra

http://localhost/myapp/Shared/AskReason.ashx?REASON=foo
22
T.J. Crowder

Les chemins qui commencent par un "/" (et pas de protocole et d'hôte) sont relatifs à racine de l'hôte. Si vous déployez de telle sorte que votre application se trouve sur "http: // quel que soit/myapp", alors vos chemins relatifs à la racine doivent commencer par "/ myapp".

Lorsque vous travaillez dans un environnement côté serveur qui implique une sorte de mécanisme de modèle de page, une astuce courante consiste à faire de cette partie du chemin une sorte de variable de configuration afin que vous puissiez écrire des pages avec des chemins comme:

<a href='${root}/something/something'>click me</a>

Ensuite, cette variable "racine" est développée en fonction de la configuration vers "/ myapp" ou autre.

6
Pointy

J'ai eu un problème similaire où une URL absolue était nécessaire mais la référence s'est cassée lors du passage de l'hôte local au serveur de production. Je l'ai résolu en vérifiant si une chaîne "localhost" existe dans:

var environ = window.location.Host;

Ensuite, vous pouvez simplement faire:

if (environ === "localhost") {
    var baseurl = window.location.protocol + "//" + window.location.Host + "/" + "shared/";
} else {
    var baseurl = window.location.protocol + "//" + window.location.Host + "/";
}

Ensuite, vous pouvez ajouter baseurl devant l'URL à référencer.

3
chromaloop

L'URL

 var url = "/Shared/AskReason.ashx?REASON=" + reason;

Recherche le fichier dans le répertoire racine [car il s'agit d'un chemin absolu], efficacement

 http: //localhost/Shared/AskReason.ashx

Vous devez inclure le nom du répertoire virtuel OR déterminer la structure appropriée:

Commencer sans le/vous donnera un chemin relatif ... si vous avez besoin de naviguer dans les répertoires, utilisez le style de notation ../Shared/, ou enfin utilisez la commande Directory de vos serveurs pour déterminer votre chemin actuel.

2
iivel

J'ai le même problème avec ASP.NET MVC avec mon AJAX appel sur un fichier .js séparé. Voici à quoi cela ressemble:

 return $.ajax({
            type: "POST",
            url: '/Dashboard/Execute',
            contentType: "application/json; charset=utf-8",
            data: filter,
            dataType: "json",
        });

Cela fonctionne bien sur mon local, bien sûr. Mais lorsqu'il est déployé sur un sous-répertoire dans IIS, par exemple.

wwwroot/appsite/subdomainfolder/

Cela déclenchera 404 Not Found car il n'a pas attaché le sous-dossier sur l'URL.

Si je retire le

"/"

au début de l'URL, il le générera comme celui-ci:

http://localhost/subdomainfolder/Dashboard/Dashboard/ExecuteReader

Ce qui déclenchera à nouveau le problème 404 Not Found.

Voici donc les deux options pour ma solution:

Supprimez la barre oblique inverse et supprimez le nom du contrôleur (tableau de bord dans ce cas):

return $.ajax({
            type: "POST",
            url: '/Execute',
            contentType: "application/json; charset=utf-8",
            data: filter,
            dataType: "json",
        });

Ou, restez tel quel, ajoutez simplement un double point au début de l'URL:

return $.ajax({
            type: "POST",
            url: '../Dashboard/Execute',
            contentType: "application/json; charset=utf-8",
            data: filter,
            dataType: "json",
        });
1
Willy David Jr