ajaxが関数内で呼び出すときに正しく機能しない

Question

私はajax要求を持っているjavascript関数を呼び出そうとしていますが、関数外のコードを置くとresponseTextが存在しないため動作しません魅力のように働く。誰かがどのように機能するのか説明してください。

//This is here work properly. 
 
console.log("addPostmanUser"); 
 
var data = JSON.stringify({ 
 
    "email": "holahola@local.es", 
 
    "password": "12345", 
 
    "username": "holahola", 
 
    "name": "holahola", 
 
    "surname": "toledo", 
 
    "birthDate": 687045600000, 
 
    "enabled": true, 
 
    "authorities": [], 
 
    "groups": [], 
 
    "character": null, 
 
    "locale": null, 
 
    "registrationToken": null, 
 
    "facebookId": null, 
 
    "pushToken": null, 
 
    "termsDate": null 
 
}); 
 
var xhr = new XMLHttpRequest(); 
 
xhr.withCredentials = true; 
 
xhr.addEventListener("readystatechange", function(e) { 
 
    if (xhr.readyState === 4) { 
 
    console.log("addPostmanUser response: "); 
 
    console.log(xhr); 
 
    } 
 
}); 
 
xhr.open("POST", "http://IP/user", true); 
 
xhr.setRequestHeader("accept", "application/json"); 
 
xhr.setRequestHeader("content-type", "application/json"); 
 
xhr.setRequestHeader("cache-control", "no-cache"); 
 
xhr.send(data); 
 

 
//this one doesn't work 
 
function inSameFile() { 
 
    console.log("addPostmanUser"); 
 
    var data = JSON.stringify({ 
 
    "email": "holahola@local.es", 
 
    "password": "12345", 
 
    "username": "holahola", 
 
    "name": "holahola", 
 
    "surname": "toledo", 
 
    "birthDate": 687045600000, 
 
    "enabled": true, 
 
    "authorities": [], 
 
    "groups": [], 
 
    "character": null, 
 
    "locale": null, 
 
    "registrationToken": null, 
 
    "facebookId": null, 
 
    "pushToken": null, 
 
    "termsDate": null 
 
    }); 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.withCredentials = true; 
 
    xhr.addEventListener("readystatechange", function(e) { 
 
    if (xhr.readyState === 4) { 
 
     console.log("addPostmanUser response: "); 
 
     console.log(xhr); 
 
    } 
 
    }); 
 
    xhr.open("POST", "http://IP/user", true); 
 
    xhr.setRequestHeader("accept", "application/json"); 
 
    xhr.setRequestHeader("content-type", "application/json"); 
 
    xhr.setRequestHeader("cache-control", "no-cache"); 
 
    xhr.send(data); 
 
}

<link rel="stylesheet" href="https//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<form> 
 
    <div> 
 
    <a class="enter" href="" onClick="inSameFile();" id="btn_register">Registrarme</a> 
 
    <br> 
 
    <a class="enter" href="" id="btn_cancel">Cancelar</a> 
 
    <br> 
 
    </div> 
 
    <div></div> 
 
</form>

Answer 1

<a class="enter" href="" onClick="inSameFile();" id="btn_register" >Registrarme</a><br> 

あなたがリンクをクリックしたときはどうなりますか？

1. クリックイベントが発生
2. JavaScriptはブラウザが（このケースでは、現在のページ）hrefに指定されたページをロードすること
3. 上の任意のイベントを処理します。

だから、2つのうちの1つは、ここで起こってい：

XHRリクエストは、ページがそれをしますホスティングので、応答がある前に、それは中止される場合には、あまりにもゆっくりと起こるために起こっているのどちらかどこかに行って。

または

XHRオブジェクトは、新しいページがロードされます、コンソールに記録されます。それはXHRオブジェクトを破壊します（それは、残っているページに存在していたためです）。（ログ保存をオンにしてもコンソールにサマリーが表示されているにもかかわらず）内容を調べることができなくなります。

---

あなたが、その後はJavaScriptをトリガーのいずれか（JSが成功した場合、サーバー側のフォールバックとpreventDefaultを使用して）decent solutionまたはが速い取るの構築に努力を投資する上でクリックする人のために何かをしたい場合リンクの代わりにボタンを使用するという汚い選択肢があります。