네이티브 JS는 ajax 및 ajax 도메인 간 요청을 구현합니다.

이 기사는 주로 ajax 및 ajax 교차 도메인 요청을 구현하는 기본 JS의 예를 공유하며 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

1. 기본 JS로 ajax 구현

첫 번째 단계는 XMLHttpRequest 객체를 얻는 것입니다

두 번째 단계: 상태 수신 기능 설정

세 번째 단계: 연결 열기, true는 비동기 요청입니다

네 번째 부분: 요청 보내기, 데이터를 전달하지 않고 개체와 문자열을 보내 null을 보낼 수 있습니다

5단계: 청취 함수에서 요청이 성공했음을 나타내기 위해 ReadyState=4&&status=200을 판단합니다

6단계: 사용 responseText와 responseXML을 사용하여 응답 데이터를 받아들이고 Native 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 크로스 도메인 요청

[크로스 도메인 요청 처리] 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

의 ②③ 단계와 유사합니다. 관련 권장 사항:

AJAX 교차 도메인 액세스 - 두 가지 효과적인 솔루션 소개_PHP 튜토리얼

네이티브 JS를 사용하여 Ajax GET POST 요청을 구현하는 방법

구현 방법 AngularJS

의 ajax 요청

위 내용은 네이티브 JS는 ajax 및 ajax 도메인 간 요청을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!