스크립트가 포함된 AJAX 요청이 로드 및 실행될 때까지 자바스크립트 코드 실행을 대기하려면 어떻게 해야 합니까?
응용 프로그램에서 사용 중입니다.Ext.Ajax.request실행하는 스크립트를 로드합니다.eval.
문제는 AJAX 요청이 완료되기까지 시간이 걸리기 때문에 이후에 실행되는 코드는 AJAX를 통해 로드되는 스크립트에 변수가 필요하다는 것입니다.이 예에서는 이러한 경우를 보여줍니다.AJAX 호출의 스크립트가 로드 및 실행될 때까지 AJAX 후 자바스크립트 실행이 대기하도록 이 코드를 어떻게 변경할 수 있습니까?
testEvalIssue_script.htm:
<script type="text/javascript">
console.log('2. inside the ajax-loaded script');
</script>
main.htm:
<html>
<head>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript">
function loadViewViaAjax(url) {
Ext.Ajax.request({
url: url,
success: function(objServerResponse) {
var responseText = objServerResponse.responseText;
var scripts, scriptsFinder=/<script[^>]*>([\s\S]+)<\/script>/gi;
while(scripts=scriptsFinder.exec(responseText)) {
eval.call(window,scripts[1]);
}
}
});
}
console.log('1. before loading ajax script');
loadViewViaAjax('testEvalIssue_script.htm');
console.log('3. after loading ajax script');
</script>
</head>
<body>
</body>
</html>
출력:
1. before loading ajax script
3. after loading ajax script
2. inside the ajax-loaded script
출력을 다음과 같이 올바른 순서로 하려면 어떻게 해야 합니까?
1. before loading ajax script
2. inside the ajax-loaded script
3. after loading ajax script
Ajax는 비동기식입니다. 즉, Ajax 호출은 발송되지만 코드는 멈추지 않고 이전처럼 계속 행복하게 실행됩니다.Ajax는 응답이 수신될 때까지 실행을 중지/일시 중지하지 않습니다.당신은 콜백 기능 같은 것을 추가해야 할 것입니다.
<html>
<head>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript">
function loadViewViaAjax(url, callback) {
Ext.Ajax.request({
url: url,
success: function(objServerResponse) {
var responseText = objServerResponse.responseText;
var scripts, scriptsFinder=/<script[^>]*>([\s\S]+)<\/script>/gi;
while(scripts=scriptsFinder.exec(responseText)) {
eval.call(window,scripts[1]);
}
callback.call();
}
});
}
console.log('1. before loading ajax script');
var afterAjax = function(){
console.log('3. after loading ajax script');
}
loadViewViaAjax('testEvalIssue_script.htm', afterAjax);
</script>
</head>
<body>
</body>
</html>
Ajax 호출은 비동기식이므로 Ajax를 통해 로드된 데이터에 의존하는 것을 실행하려면 성공 방법으로 실행해야 합니다.코드를 다른 메소드에 넣은 다음 평가 문 뒤에 해당 메소드를 호출합니다.
<script type="text/javascript">
function doSomeAmazingThings() {
// amazing things go here
}
function loadViewViaAjax(url) {
Ext.Ajax.request({
url: url,
success: function(objServerResponse) {
var responseText = objServerResponse.responseText;
var scripts, scriptsFinder=/<script[^>]*>([\s\S]+)<\/script>/gi;
while(scripts=scriptsFinder.exec(responseText)) {
eval.call(window,scripts[1]);
}
doSomeAmazingThings();
console.log('3. after loading ajax script');
}
});
}
console.log('1. before loading ajax script');
loadViewViaAjax('testEvalIssue_script.htm');
</script>
AJAX 호출 동기화를 시도해 볼 수 있습니다...당연히 Ext 사용을 중지해야 합니다.Ajax 라이브러리, 하지만 다음 코드 행 전에 Ajax 결과가 필요하다면 그럴 가치가 있습니다.
이렇게 하면 인트라넷 페이지가 데이터베이스와 통신할 수 있습니다.Javascript가 페이지에 대한 제어를 다시 포기할 때까지 페이지 업데이트를 볼 수 없다는 단점이 있습니다. 따라서 동기화된 Ajax에서는 상태 표시줄, 진행률 표시줄 또는 오버레이와 같은 것이 불가능합니다(내 파이어폭스의 경우에는 그렇지 않고 일부 상황에서는 동기화된 코드 내부에서도 업데이트됩니다).
저는 이것을 사용합니다 - 약간 집에서 재배되고 지저분하지만, 제 동아리에서 수년 동안 흠잡을 데 없이 작동했습니다.새 AJAX()를 만들고, URL을 설정하고, 필요에 따라 쿼리(이름/값 쌍)를 추가하고, 비동기식을 false로 설정하면 함수에서 Execute를 호출하면 AJAX가 반환될 때까지 차단됩니다.
또는 비동기식으로 사용하려면 생성한 AJAX 개체에 대해 새 "onready" 함수를 작성하고 비동기식을 true로 변경하십시오.
제가 몇 년 전에 쓴 글입니다. 그래서 가장 깔끔하지도 않고, 다르게 하는 방법도 있지만, 입문서처럼 작동하고, 다른 도서관에 의존하지 않고 원하는 대로 수정할 수 있습니다.
function AJAX(){
//Declarations
var thisExt=this; //To be referenced by events
//Initialize Properties
thisExt.URL="";
thisExt.Query="";
thisExt.Method="GET";
thisExt.Asynchronous=true;
thisExt.Encoding="application/x-www-form-urlencoded";
thisExt.PostData="";
// Provide the XMLHttpRequest class for IE 5.x-6.x:
// Other browsers (including IE 7.x-8.x) ignore this
// when XMLHttpRequest is predefined
if (typeof XMLHttpRequest == "undefined") {
try {
thisExt.XMLHTTP = new ActiveXObject("Msxml2.XMLHTTP.6.0");
}
catch (e1) {
try { thisExt.XMLHTTP = new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
catch (e2) {
try { thisExt.XMLHTTP = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e3) {
try { thisExt.XMLHTTP = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e4) {
throw new Error("This browser does not support XMLHttpRequest.");
}
}
}
}
} else {
thisExt.XMLHTTP = new XMLHttpRequest();
}
//Methods
thisExt.XMLHTTP.onreadystatechange = function(){
if(thisExt.XMLHTTP.readyState==4){
window.status="";
thisExt.onready(thisExt);//Passes thisExt so that the callback will have assess to the entire object, not just the returned text.
}else{
window.status=thisExt.XMLHTTP.readyState;//Just for debugging
}
}
thisExt.addQuery=function(name,value){
if(thisExt.Query!=""){
thisExt.Query+="&"
}
thisExt.Query+=encodeURIComponent(name)+"="+encodeURIComponent(value)
}
//Not really necessary, you could just say AjaxObj.URL="bla bla"
thisExt.setURL=function(URL){
thisExt.URL=URL;
}
//Not really necessary, you could just say AjaxObj.Query="bla bla"
thisExt.setQuery=function(Query){
thisExt.Query=Query;
}
//Not really necessary, you could just say AjaxObj.Method="bla bla"
thisExt.setMethod=function(Method){
thisExt.Method=Method;
}
//Not really necessary, you could just say AjaxObj.Encoding="bla bla"
thisExt.setEncoding=function(Encoding){
thisExt.Encoding=Encoding;
}
//Not really necessary, you could just say AjaxObj.PostData="bla bla"
thisExt.setPostData=function(PostData){
thisExt.PostData=PostData;
}
thisExt.Execute=function(){
if(thisExt.URL==""){
alert("AJAX.URL cannot be null.")
return;
}
var URL2=thisExt.URL;
if(thisExt.Query!=""){
URL2=URL2+"?"+thisExt.Query;
}
if(thisExt.Method=="POST"){
//this.XMLHTTP.setRequestHeader("Content-Type",this.Encoding);
thisExt.XMLHTTP.open("POST", URL2, thisExt.Asynchronous);
thisExt.XMLHTTP.send(thisExt.PostData);
} else {
thisExt.XMLHTTP.open("GET", URL2, thisExt.Asynchronous);
thisExt.XMLHTTP.send(null);
}
}
//Events & callbacks
thisExt.onready=function(){}
}
이다음생달수있다습니성할여성하는을▁an▁creating다있▁this니습▁be수를 만들어야 합니다.XMLHttpRequest개체 및 비동기 매개 변수가 false로 설정된 상태에서 열린 함수를 호출합니다.
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "ajax_info.txt", false);
var response = xmlhttp.responseText;
언급URL : https://stackoverflow.com/questions/5354641/how-can-i-get-make-javascript-code-execution-to-wait-until-an-ajax-request-with
'programing' 카테고리의 다른 글
| MariaDB 예기치 않은 토큰이 반환될 것 같습니다. (0) | 2023.09.01 |
|---|---|
| 두 테이블 간 하위 쿼리를 기반으로 한 Oracle SQL 업데이트 (0) | 2023.08.27 |
| 페이지의 아무 곳에서나 Enter 키 캡처 누름 (0) | 2023.08.27 |
| 도커의 시간이 호스트의 시간과 동기화되는지 확인하는 방법은 무엇입니까? (0) | 2023.08.27 |
| Invoke-WebRequest SSL이 실패합니까? (0) | 2023.08.27 |