Ajax 및 jsonp에 대한 실용적인 튜토리얼 공유

1.ajax

Asynchronous JavaScript and XML(Ajax)은 차세대 웹 사이트(일반적으로 Web 2.0 사이트로 알려짐)를 주도하는 핵심 기술입니다. Ajax를 사용하면 웹 애플리케이션의 표시 및 동작을 방해하지 않고 백그라운드에서 데이터 검색이 가능합니다. 클라이언트측 JavaScript가 HTTP를 통해 원격 서버에 연결할 수 있게 해주는 API인 XMLHttpRequest 함수를 사용하여 데이터를 가져옵니다. Ajax는 여러 위치의 콘텐츠를 단일 웹 애플리케이션으로 통합하는 많은 매시업의 원동력이기도 합니다.

그러나 브라우저 제한으로 인해 이 방법은 도메인 간 통신을 허용하지 않습니다. 다른 도메인에서 데이터를 요청하려고 하면 보안 오류가 발생합니다. 데이터가 있는 원격 서버를 제어할 수 있고 모든 요청이 동일한 도메인으로 이동하는 경우 이러한 보안 오류를 피할 수 있습니다. 하지만 웹 애플리케이션이 자체 서버에만 유지된다면 무슨 소용이 있을까요? 여러 타사 서버에서 데이터를 수집해야 하는 경우 어떻게 해야 합니까?

2. 작동 원리

A. Ajax는 웹 사이트를 통해 데이터를 로드하는 js입니다. 이 프로세스는 일반적으로 사용자에게 보이지 않습니다.

　B. 기존 웹 페이지(ajax는 해당되지 않음)의 경우 콘텐츠를 업데이트해야 하는 경우 전체 웹 페이지를 다시 로드해야 합니다.

3. 동기화 및 비동기성에 대하여

동기화는 계속하기 전에 반환 결과를 기다려야 하지만, 비동기식은 기다릴 필요가 없습니다.

　 동기화는 직선의 대기열이고, 비동기식은 대기열에 있지 않으며, 각각 자체 방식으로 진행됩니다.

　　예:

　　장바구니 추가 문제. 동기식 방법을 사용하면 장바구니에 항목을 추가할 때마다 다른 작업을 수행하기 전에 페이지가 다시 로드될 때까지 기다려야 합니다.

　 비동기 방식을 사용하면 기다리지 않고 듣기만 하고 다른 작업을 수행하면 됩니다. 상대적으로 말하면 비동기 로딩이 더 큰 장점을 갖고 있는데, 이 점에서 ajax의 장점을 엿볼 수 있습니다.

4. ajax 객체 생성(및 호환 가능)

　(1) XMLHttpRequest 객체 생성　

1 if(window.XMLHttpRequest){2     var xhr=new XMLHttpRequest();3 }else{4     var xhr=new ActiveXObject("Microsoft.XMLHTTP");5 };

　(2) 서버로 링크 열기

open(method,url,asyn)

　 매개변수:

　 메소드: 문자열, 요청 유형 get 또는 post

url: 문자열, 서버에 있는 파일의 위치

　asyn: 부울, true(비동기) 또는 false(동기)

　　 동기화는 계속하기 전에 반환 결과를 기다려야 하며 비동기는 기다릴 필요가 없습니다.

　 (3) 서버로 보내기

　xhr.send()가 서버로 요청을 보냅니다(get request)

　xhr. send(string)는 게시물 요청에만 사용됩니다

　(4) 서버의 요청 상태 감지

　 onreadystatechange 이벤트(해당 준비 상태)

　 ReadyState 및 상태 속성은 XMLHttpRequest의 상태를 저장합니다.

ReadyState가 변경되면 onreadystatechange 이벤트가 발생합니다

　readyState가 0에서 4로 변경됩니다.

　　0: 요청이 초기화되지 않았습니다

　　1: 서버 연결이 설정되었습니다

　　2 : 요청이 접수되었습니다

　　3. 요청이 처리 중입니다

　　4. 요청이 완료되었습니다

　상태가 200: "OK"

　　　=404: 페이지를 찾을 수 없습니다

s가 4이고 상태가 200이면 응답이 준비되었음을 나타냅니다.

5. XMLHttpRequest 객체의 중요성

서버에서 응답을 받아야 하는 경우 XMLHttpRequest 객체를 사용하세요.

　　 responseText 또는 responseXML 속성

　 응답 문자로 응답을 받습니다 문자열 형식 데이터

　 　　 responseText는 XML 형식으로 응답 데이터를 가져옵니다.

　　 서버의 응답이 XML이 아닌 경우 responseText 속성을 사용하여 문자열 형식으로 응답을 반환할 수 있습니다. 다음과 같이 사용하세요: Div.innerHTML = xhr.responseText;

6. Ajax 요청 방법 get과 post의 차이점:

　 GET: 더 일반적으로 사용되며 더 나은 성능을 제공합니다. 일반 텍스트에서는 게시물만큼 안전하지 않습니다. 데이터 전송 크기가 제한되어 있으며 데이터는 URL을 통해 전달되지만 URL에는 특정 길이 제한이 있습니다. ,

POST: 상대적으로 거의 사용되지 않습니다. 성능은 get보다 약간 안전합니다.

7. 교차 도메인 정보

　 교차 도메인은 단순히 하나의 도메인 이름에서 다른 도메인 이름에 액세스하는 것으로 이해될 수 있습니다. 보안상의 이유로 브라우저는 이를 허용하지 않습니다. 　　참고: img, script, iframe 및 기타 요소의 src 속성은 직접 리소스를 요청할 수 있습니다. 도메인 전반에 걸쳐.

8. Ajax 크로스 도메인

1. 서버가 다른 웹사이트로 이동하여 콘텐츠를 가져오고 페이지를 반환하도록 할 수 있습니다.

2. 페이지의 Ajax에 URL을 제공합니다. ajax는 이 URL을 서버에 전달합니다. 서버는 주소에 액세스합니다.

9.jsonp 교차 도메인

jsonp는 분명히 리소스를 요청하기 위해 스크립트 태그의 교차 도메인 기능을 사용하며, 이는 교차 도메인 획득입니다. script 태그를 지정하고 json url을 스크립트의 src 속성에 할당합니다. 이 스크립트를 dom에 삽입하고 브라우저가 이를 가져오도록 합니다. callback({"name":"jack"}), callback은 페이지에 존재하는 콜백 메서드입니다. , 매개 변수는 원하는 json 콜백 방법을 가져오는 것입니다. 서버의 월간 정책을 준수하기 위해 콜백 또는 cb가 일반적으로 사용됩니다.

위 내용은 Ajax 및 jsonp에 대한 실용적인 튜토리얼 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!