원생 JS ajax 와 ajax 의 크로스 도 메 인 요청 인 스 턴 스 구현

1.원생 JS 구현 ajax
첫 번 째 XMLHttpRequest 대상 획득
두 번 째 단계:상태 감청 함수 설정
세 번 째 단계:open 연결,true 는 비동기 요청 입 니 다.
네 번 째 부분:send 요청 은 대상 과 문자열 을 보 낼 수 있 습 니 다.데 이 터 를 전달 하지 않 고 null 을 보 낼 수 있 습 니 다.
STEP 5:감청 함수 에서 ready State=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 의 크로스 필드 요청
[도 메 인 간 요청 처리]JS 에 같은 소스 정책 이 존재 하기 때 문 입 니 다.서로 다른 프로 토 콜 이름,포트 번호,호스트 이름 아래 파일 을 요청 할 때 같은 소스 정책 에 어 긋 나 성공 을 요청 할 수 없습니다!크로스 필드 처리 가 필요 합 니 다!
1.배경 PHP 설정:
프론트 데스크 톱 은 설정 이 필요 없 이 배경 에서 요청 한 PHP 파일 에 header 를 기록 합 니 다.

header("Access-Control-Allow-Origin:*");//            PHP  ，*         

2,src 속성+JSONP 를 사용 하여 크로스 필드 구현
① src 속성 을 가 진 태그 자체 크로스 도 메 인 기능!그래서 script 태그 의 src 속성 으로 배경 데 이 터 를 요청 할 수 있 습 니 다.

<scriptsrc="http://127.0.0.1/json.php"type="text/javascript"charset="utf-8"></script>

② src 가 데 이 터 를 불 러 오 는 데 성공 한 후,스 크 립 트 탭 에 내용 을 직접 불 러 옵 니 다.
따라서 배경 에서 JSON 문자열 을 직접 되 돌려 주면 script 태그 에서 해석 할 수 없습니다.
따라서 배경 은 프론트 데스크 에 함수 이름 으로 돌아 가 JSON 문자열 을 매개 변수 로 전송 해 야 합 니 다.
배경 PHP 파일 에서 다음 을 되 돌려 줍 니 다:

echo"callBack({$str})";

③ 프론트 데스크 톱 에서 되 돌아 오 는 반환 함 수 를 받 으 면 script 탭 에서 직접 호출 합 니 다.따라서 이러한 반전 함 수 를 설명 하여 성공 적 인 반전 을 요청 해 야 합 니 다.

function callBack(data){
  alert("    ");
  console.log(data);
 }

3.JQuery 의 ajax 실현 JSONP
① ajax 요청 시 dataType 을"json"으로 설정 합 니 다.
② 백 세트 를 되 돌 릴 때 도 리 턴 함수 가 필요 합 니 다.단,ajax 는 요청 을 보 낼 때 기본적으로 get 요청 을 사용 하여 함수 명 으로 백 엔 드 에 보 냅 니 다.백 엔 드 는$를 사용 할 수 있 습 니 다.GET['callback']리 셋 함수 이름 꺼 내기:

echo"{$_GET['callback']}({$str})";

③ 백 스테이지 가 돌아 온 후에 도 ajax 는 성공 적 인 리 셋 함수 로 success 를 사용 할 수 있 습 니 다.

success:function(data){}

물론 백 스테이지 에서 도 리 셋 함수 이름 을 마음대로 되 돌 릴 수 있다.

echo"callBack({$str})";

프론트 데스크 톱 에서 요청 이 성공 하면 이 함 수 를 자동 으로 호출 합 니 다.② ③ 걸음
이상 의 원생 JS 가 ajax 와 ajax 의 크로스 도 메 인 요청 인 스 턴 스 를 실현 하 는 것 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시 기 를 바 랍 니 다.여러분 들 이 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.