집 >웹 프론트엔드 >JS 튜토리얼 >Native JS의 AJAX로 json을 읽는 전 과정

Native JS의 AJAX로 json을 읽는 전 과정

jacklove원래의: 2018-06-15 16:40:432351검색

먼저 xml이나 json과 같은 프런트엔드와 백엔드 파일 간의 상호작용에는 ajax(async javascript 및 xml)가 사용됩니다. 이는 비동기 로딩 기술입니다. 즉, 로딩 이벤트를 클릭하면 더 이상 전체 페이지를 새로 고칠 필요가 없고 부분 요청과 부분 응답을 보냅니다. AJAX는 완전한 프런트엔드가 아니며 서버를 사용해야 하기 때문에 실험을 수행할 때 html 파일과 xml 또는 json을 서버 배포 디렉터리에 배치해야 합니다. 여기서는 TOMCAT 7X를 사용합니다.

먼저 간단한 JSON 파일을 편집하고 다음과 같이 이름을 json.json으로 지정합니다.

[{  "key":"value"}  ]

function showJson(){
var test;
if(window.XMLHttpRequest){
    test = new XMLHttpRequest();
}else if(window.ActiveXObject){
    test = new window.ActiveXObject();
}else{
    alert("请升级至最新版本的浏览器");
}
if(test !=null){
    test.open("GET","json.json",true);
    test.send(null);
    test.onreadystatechange=function(){
        if(test.readyState==4&&test.status==200){
            var obj = JSON.parse(test.responseText);
            for (var name in obj){
                alert(obj[name].key);
            }
        }
    };
}
}
window.onload=function(){
  showJson();
};</span>

1 AJAX를 사용하려면 IE 하위 버전에서 ActiveXObject인 XMLHttpRequest()의 새 인스턴스를 만들어야 합니다. 브라우저.(). if 문을 사용하여 판단하십시오.

2.readyState의 상호작용 상태와 상태의 상호작용 상태를 판단하여 onreadystatechange 이벤트를 트리거합니다.

여기에서는 ReadyState의 네 가지 값을 소개합니다.

(1) 값은 0: 요청이 초기화되지 않았습니다. 이는 open()이 아직 시작되지 않았음을 의미합니다.

(2; ) 값이 1: 요청이 초기화되었지만 아직 전송되지 않았습니다. 이는 아직 send()가 없음을 의미합니다.

(3) 값이 2: 요청이 전송되었으며 처리 중입니다. 배경.

(4) 값은 3입니다. 요청이 아직 처리 중이지만 일부 데이터를 사용할 수 있습니다. 지금은 그 의미를 잘 이해할 수 없습니다.

(5) 값은 4: 백그라운드 서버가 응답을 완료했습니다. 즉, 이제 언제든지 요청한 데이터를 얻을 수 있습니다.

readyState==4인 경우에는 서버가 응답했다는 것만 알 수 있지만, 서버가 요청한 파일을 찾았는지 여부는 여전히 알 수 없습니다. 이때 상태를 인용해야 합니다.

상태의 일반적인 값은 다음과 같습니다.

(1) 200: 요청한 파일을 찾았습니다.

(2) 404: 요청한 파일을 찾을 수 없습니다.

(3) 500: 서버 오류입니다.

readySate==4와 status==200이 동시에 충족되면 원하는 값을 얻을 수 있습니다.

3. 서버에서 반환된 값은 responseText 개체에 저장됩니다. 이때 JSON.parse()를 사용하여 내부 데이터를 가져올 수 있습니다.

4 이제 JSON 파일에서 전체 데이터 블록을 꺼냈지만 값과 같은 특정 블록 값을 얻으려면 for 루프와 같은 순회를 사용해야 합니다. 여기서는 for 루프에 대해 다른 형식의 for(var name in obj)를 사용했습니다. 이는 개체의 값을 가져와 변수 이름에 저장한다는 의미입니다. JSON 파일의 구조는 많은 객체로 구성되어 있기 때문입니다.

5. "GET"을 사용하면 send()의 값은 null입니다. POST인 경우 다음과 같은 특정 매개변수를 전달해야 합니다. send(name);

마지막으로 AJAX를 처음 접하는 학생들에게 작성합니다. 이 코드를 실행하는 방법(AJAX 환경 구성)

(1) 먼저 서버를 다운로드해야 하는데, 저는 TOMCAT을 추천합니다.

(2) 그런 다음 html과 json이 포함된 파일을 Tomcat 루트 디렉터리의 webapps 폴더에 배포(붙여넣기)합니다.

(3) Tomcat 루트 디렉터리로 돌아가서 bin 폴더를 열고 start.bat를 찾습니다. 두 번 클릭하여 Tomcat 서버를 엽니다.

(4) 브라우저를 열고 http://localhost:8080/을 입력하여 Tomcat이 열려 있는지 확인합니다. 404가 나타나면 포트 8080이 점유되어 있을 수 있습니다. 이때 Tomcat의 루트 디렉터리로 돌아가서 엽니다. conf 폴더 server.xml 파일을 찾아 다음 코드를 찾습니다: Connector port="8080", 8080을 8081 또는 8082로 변경하고 브라우저에 http://localhost:8081/을 다시 입력하여 Tomcat이 열려 있는지 확인합니다. .

(5) 브라우저에 HTML 파일 경로를 입력합니다(예: http://localhost:8080/test/index.html).

이 글에서는 네이티브 JS의 AJAX를 사용하여 json을 읽는 전체 과정을 소개합니다. 더 많은 관련 내용은 php 중국어 홈페이지를 참고해주세요.

Native JS의 AJAX로 json을 읽는 전 과정

관련 기사