JS에서 ajax 및 ajax 도메인 간 요청을 구현하는 방법
- 亚连원래의
- 2018-06-23 14:31:101234검색
아래 편집자는 ajax 및 ajax 교차 도메인 요청을 구현하는 기본 JS의 예를 여러분과 공유할 것입니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 에디터를 따라가며 함께 살펴볼까요
1. 네이티브 JS로 ajax 구현
첫 번째 단계는 XMLHttpRequest 객체를 가져오는 것입니다
두 번째 단계: 상태 수신 기능 설정
세 번째 단계: 연결 열기, true는 비동기식 요청입니다
4부: 요청 보내기, 개체와 문자열을 보낼 수 있습니다. null을 보내기 위해 데이터를 전달할 필요가 없습니다
5단계: 청취 함수에서 ReadyState=4&&status=200을 판단하세요 요청이 성공했음을 표시하기
여섯 번째 단계: responseText 및 responseXML을 사용하여 응답 데이터를 수락하고 네이티브 JS를 사용하여 디스플레이용 DOM을 작동
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){
console.log(ajax.readyState);
console.log(ajax.status);
if(ajax.readyState==4 && ajax.status==200){
console.log(ajax.responseText);
console.log(ajax.responseXML);//返回不是XML，显示null
console.log(JSON.parse(ajax.responseText));
console.log(eval("("+ajax.responseText+")"));
}
}
ajax.open("GET","h51701.json",true);
ajax.send(null);2. Ajax 도메인 간 요청
[Cross -도메인 요청 처리] JS의 동일 출처 정책 때문입니다. 다른 프로토콜 이름, 다른 포트 번호, 다른 호스트 이름으로 파일을 요청하면 동일한 원본 정책을 위반하게 되며 요청이 성공할 수 없습니다! 도메인 간 처리가 필요합니다!
1. 백그라운드 PHP 설정:
백그라운드에서 요청된 PHP 파일에 헤더를 작성해야 합니다.
header("Access-Control-Allow-Origin:*");//表示允许哪些域名请求这个PHP文件，*表示所有域名都允许2. src 속성 + JSONP를 사용하여 도메인 간 구현
① src 속성이 있는 태그에는 도메인 간 기능이 제공됩니다! 따라서 스크립트 태그의 src 속성을 사용하여 배경 데이터를 요청할 수 있습니다
<scriptsrc="http://127.0.0.1/json.php"type="text/javascript"charset="utf-8"></script>
② src는 데이터를 성공적으로 로드한 후 로드된 내용을 스크립트 태그에 직접 넣기 때문에
따라서 배경에서 직접 반환하는 JSON 문자열은 스크립트 태그에 있어야 합니다. Parsing
따라서 백엔드는 반환 함수 이름을 프런트엔드에 반환하고 JSON 문자열을 매개 변수로 전달해야 합니다.
백엔드 PHP 파일에서 반환:
echo"callBack({$str})";3 프런트엔드가 반환된 반환을 받으면 함수는 라벨에서 호출되는 스크립트에서 직접 사용됩니다. 따라서 이러한 콜백 함수를 요청 성공을 위한 콜백으로 선언해 주어야 합니다.
function callBack(data){
alert("请求成功");
console.log(data);
}3. JQuery의 ajax 구현 JSONP
① ajax 요청 시 dataType을 "json"으로 설정하세요.
② 백엔드가 반환되면 콜백 함수를 반환해야 합니다. 그러나 ajax가 요청을 보낼 때 기본적으로 get 요청을 사용하여 반환 함수 이름을 백그라운드로 보냅니다. 백그라운드는 $_GET['callback']을 사용하여 콜백 함수 이름을 가져올 수 있습니다. 백그라운드가 반환되더라도 ajax는 계속해서 성공을 성공적인 콜백 함수로 사용할 수 있습니다.
echo"{$_GET['callback']}({$str})";물론 백그라운드는 원하는 대로 콜백 함수 이름을 반환할 수도 있습니다.
success:function(data){}요청이 성공하면 프런트에서 자동으로 이 기능을 호출합니다. 2번 항목의 ② ③ 단계와 유사합니다
위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
Javascript에서 비동기 이미지 업로드를 구현하는 방법jquery에서 숨겨진 요소 기능을 구현하는 방법jQuery에서 확인 양식 비밀번호 일관성을 구현하는 방법JS 관련 방법 배열 기능을 사용하는 방법 WeChat 애플릿에서 선택기 구성 요소를 사용하는 방법 정보위 내용은 JS에서 ajax 및 ajax 도메인 간 요청을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!