html 페이지는 백엔드 논리를 통해 js 파일을 직접 동적으로 가져오지 않습니다
2594 단어 jsjsonXMLhttpREquestscript
처음에 나는 프론트 데스크톱에서 xmlhttprequest를 통해 백엔드 서버에서 비동기 요청을 보내고 백엔드에서 요청에 따라 대응하는 json 파일을 읽은 다음에 파일 흐름으로 해석하고 페이지에 쓰기를 생각했다. 이렇게 실현하는 것은 어렵지 않다. 그러나 처음에 말하기를 이것은 너무 무겁다. 서버의 로컬 json 데이터를 작은 것으로 얻는 것이다.백그라운드 논리에 전송이 필요 없어요. 모두 백그라운드에 갖다 놓으세요!
이것은 내가 백그라운드라는 강력한 지원을 잃었다는 것을 의미한다. js만으로 json 파일 데이터를 얻는 것은 두서가 하나도 없다. 왜냐하면 js는 파일 조작의 대상과 함수가 없기 때문이다(IE 아래에 있는 것 같지만 통용되지 않는다...). 골치 아프고 나중에 해결 방안이 생각났다.
우리의 json 데이터는 하나하나의 js 파일에 저장되어 있기 때문에, 나는script 요소를 동적으로 불러오고,document을 사용할 것을 생각했다.createElement("script");방법은script 요소를 만들고head 요소에 추가합니다. 그리고 우리의 json 데이터는 모두 규범화된 것입니다. 대응하는 유일한 약속된 변수 이름이 있습니다. 이렇게 하면 불러오는 데 성공하면 동적 연결 변수 이름을 통해 안에 저장된 json 데이터를 얻을 수 있습니다. 마지막으로 json 데이터를 성공적으로 읽을 수 있습니다. 이 사이에 많은 문제가 발생했습니다.그런데 치명적인 문제가 있어서 이런 방법을 포기하게 됐어요!
이 문제는 IE8에는 없고 크롬에서는 답답합니다. 스크립트의 불러오는 것은 append 문장이 실행되면 js 파일의 스크립트를 바로 사용할 수 있기 때문입니다. 그는 불러오는 과정이 있고 비동기적이기 때문에 불러오는 것이 완료되지 않으면 다음 코드가 실행되기 시작합니다.
var js=document.createElement("script");
js.type="text/javascript";
js.src="/js.js";
var head=document.getElementByTagName("head")[0];
head.append(js);
// jsonData js json
alert(jsonData);
이렇게 실행하면alert라는 문장이 틀렸다. 변수명이 정의되지 않았다고 하지만 크롬 심사 요소의 기능을 사용해서 보았을 때 내script 요소가 확실히 들어갔다는 것을 발견했다. 그리고 잠시 후에 내가 alert(json Data)에 갔을 때object를 표시할 수 있다. 이런 문제는 매우 크다.언제 로드가 완료되는지 내가 어떻게 알겠는가. 나중에도 해결책이 있다.var js=document.createElement("script");
js.type="text/javascript";
js.src="/js.js";
var head=document.getElementByTagName("head")[0];
head.append(js);
// , :
js.onload=function()
{
// jsonData js json
alert(jsonData);
}
이렇게 하면 alert에서 당신의 json Data가object라고 말하지만, 이것은 여전히 문제가 있습니다. 왜냐하면 내가 불러올 js 파일이 한 개가 아니라, 일부 사용자가 조회를 요구하는 데이터는 존재하지 않습니다. 즉, 어떤 src 경로는 존재하지 않습니다. 그리고 모든 js 파일이 다 확보될 때까지 기다려야 합니다.안에 있는 모든 json 데이터를 읽고 표시하거나 js 파일을 불러올 때마다 json 데이터를 한 번 읽으면 끝날 때까지 이 데이터를 표시합니다. 그러나 제한이 있기 때문에 데이터는 하나하나 표시할 수 없고 함께 표시할 수 밖에 없습니다. 그래서 이 js 파일들이 언제 불러오는지 알아야 합니다.또는 어떤 js 파일이 마지막 불러오기가 끝났는지 알려주세요. 분명히 여기는 매우 큰 어려움이 있습니다. 적어도 저는 이 문제를 해결할 좋은 방법을 생각하지 못했기 때문에 이런 방안을 포기할 수밖에 없습니다.
마지막으로 서버로 돌아왔습니다. 그러나 서버 자체를 제외하고는 백엔드가 이루어지지 않았습니다. 서버는 순전히 하나의 용기일 뿐입니다. 방안은 xmlhttprequest를 사용하여 url 주소를 통해 js 파일을 동기화하는 것입니다!하하, 이것은 그로 하여금 비동기적이지 않고 동시적으로 얻을 수 있게 할 수 있다고 생각했다. 그러면 나는 쉽게 제어할 수 있을 것이다. 나머지 문제는 바로 앞쪽에서 파일 경로와 파일 이름을 연결하는 것이다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.