jquery 의 jsonp 를 사용 하여 도 메 인 간 요청 및 원리 에 대한 상세 한 설명 을 어떻게 합 니까?

14243 단어 jquery크로스 필드 요청jsonp
머리말
본 고 는 주로 jquery jsonp 가 크로스 도 메 인 요청 과 그 원리 에 관 한 내용 을 소개 하고 여러분 이 참고 하여 공부 할 수 있 도록 공유 하 는 것 입 니 다.다음은 더 이상 말 하지 않 겠 습 니 다.상세 한 소 개 를 살 펴 보 겠 습 니 다.
크로스 필드 의 보안 제한 은 모두 브 라 우 저 측 에 있 는 것 이 고 서버 측 에 크로스 필드 보안 제한 이 존재 하지 않 습 니 다.
브 라 우 저의 동원 정책 은 원본 에서 불 러 온 문서 나 스 크 립 트 와 다른 원본 에서 온 자원 의 상호작용 을 제한 합 니 다.
프로 토 콜,포트 와 호스트 가 두 페이지 에 대해 같 으 면 두 페이지 는 같은 소스 를 가지 고 있 습 니 다.그렇지 않 으 면 서로 다른 소스 를 가지 고 있 습 니 다.
js 에서 크로스 도 메 인 요청 을 하려 면 특수 처 리 를 해 야 합 니 다.또는,요청 을 자신의 서버 에 보 내 고,백 엔 드 코드 를 통 해 요청 을 한 다음,데 이 터 를 프론트 에 되 돌려 줄 수 있 습 니 다.
jquery 를 사용 한 jsonp 가 도 메 인 간 요청 과 원 리 를 어떻게 시작 하 는 지 설명 합 니 다.
먼저 준비 환경 을 보십시오.두 포트 가 다 르 기 때문에 크로스 요청 조건 을 구성 합 니 다.
데이터 가 져 오기:데 이 터 를 가 져 오 는 포트 는 9090 입 니 다.

요청 데이터:요청 데이터 의 포트 는 8080 입 니 다.

1、직접 ajax 요청 을 하면 어떻게 되 는 지 살 펴 보기
다음은 요청 단 코드 입 니 다:

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>    </title>
 <script src="js/jquery-1.7.2.js"></script>
 <script>
 $(document).ready(function () {
  
  $("#btn").click(function () {
  $.ajax({
   url: 'http://localhost:9090/student',
   type: 'GET',
   success: function (data) {
   $(text).val(data);
   }
  });

  });
  
 });
 </script>
</head>
<body>
 <input id="btn" type="button" value="      " />
 <textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>
요청 한 결 과 는 다음 그림 과 같 습 니 다.브 라 우 저의 원본 정책 이 차단 되 었 기 때문에 도 메 인 간 요청 을 볼 수 있 습 니 다.

2.다음 에 도 메 인 간 요청 을 어떻게 하 는 지 봅 니 다.크로스 도 메 인 요청 을 해결 하 는 방법 은 매우 많 습 니 다.여기 서 jquery 의 jsop 방식 과 그 원리 만 말씀 드 리 겠 습 니 다.
먼저,페이지 에 도 메 인 을 뛰 어 넘 는 ajax 요청 을 직접 하 는 것 은 안 된다 는 것 을 알 아야 합 니 다.그러나 페이지 에 서로 다른 도 메 인 에 있 는 js 스 크 립 트 를 도입 하 는 것 은 가능 합 니 다.마치 자신의 페이지 에<img src="">탭 을 사용 하여 특정한 도 메 인 에 있 는 그림 을 마음대로 표시 할 수 있 는 것 과 같 습 니 다.
예 를 들 어 저 는 8080 포트 의 페이지 에 9090 포트 의 그림 을 요청 합 니 다.src 크로스 도 메 인 을 통 해 직접 요청 하 는 것 을 볼 수 있 습 니 다.

3.그러면탭 을 추가 하여 도 메 인 간 요청 을 시작 합 니 다.요청 주소 뒤에callback=showData인 자 를 가지 고 있 는 것 을 주의 하 십시오.
쇼 데 이 터 는 리 셋 함수 이름 으로 백 엔 드 로 전송 되 며 패키지 데이터 에 사 용 됩 니 다.데이터 가 전단 으로 돌아 간 후showData(result)형식 입 니 다.script 스 크 립 트 이기 때문에 쇼 데이터 함 수 를 자동 으로 호출 합 니 다.result 는 쇼 데이터 의 인자 입 니 다.
이로써 우 리 는 크로스 필드 에서 데 이 터 를 요청 한 셈 이지 만,비교적 번 거 로 우 므 로,스스로 스 크 립 트 를 써 서 요청 을 한 다음 에 리 셋 함수 로 데 이 터 를 처리 해 야 하기 때문에 매우 편리 하지 않다.

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>跨域测试</title>
 <script src="js/jquery-1.7.2.js"></script>
 <script>
 //回调函数
 function showData (result) {
  var data = JSON.stringify(result); //json对象转成字符串
  $("#text").val(data);
 }

 $(document).ready(function () {

  $("#btn").click(function () {
  //向头部输入一个脚本，该脚本发起一个跨域请求
  $("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");
  });

 });
 </script>
</head>
<body>
 <input id="btn" type="button" value="跨域获取数据" />
 <textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>
</html>
서버:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 response.setCharacterEncoding("UTF-8");
 response.setContentType("text/html;charset=UTF-8");

 //数据
 List<Student> studentList = getStudentList();


 JSONArray jsonArray = JSONArray.fromObject(studentList);
 String result = jsonArray.toString();

 //前端传过来的回调函数名称
 String callback = request.getParameter("callback");
 //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
 result = callback + "(" + result + ")";

 response.getWriter().write(result);
}
결과:

4.jquery 의 jsonp 방식 의 크로스 도 메 인 요청 을 다시 봅 니 다.
서버 코드 가 변 하지 않 습 니 다.js 코드 는 다음 과 같 습 니 다.가장 간단 한 방법 은 하나의dataType:'jsonp' 만 설정 하면 도 메 인 간 요청 을 할 수 있 습 니 다.jsonp 는 서버 가 되 돌아 오 는 데이터 형식 을 jsonp 형식 으로 지정 합 니 다.요청 경 로 를 볼 수 있 고 자동 으로callback=xxx를 가 져 왔 습 니 다.xxx 는 jquery 가 무 작위 로 생 성 한 리 셋 함수 이름 입 니 다.
여기 서 success 는 위의 showData 와 마찬가지 로 success 함수 가 있 으 면 기본 값success()을 리 셋 함수 로 합 니 다.

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>跨域测试</title>
 <script src="js/jquery-1.7.2.js"></script>
 <script>

 $(document).ready(function () {

  $("#btn").click(function () {

  $.ajax({
   url: "http://localhost:9090/student",
   type: "GET",
   dataType: "jsonp", //指定服务器返回的数据类型
   success: function (data) {
   var result = JSON.stringify(data); //json对象转成字符串
   $("#text").val(result);
   }
  });

  });

 });
 </script>
</head>
<body>
 <input id="btn" type="button" value="跨域获取数据" />
 <textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>
</html>
효과:

특정한 반전 함 수 를 어떻게 지정 하 는 지 다시 봅 시다:30 줄 코드
리 셋 함 수 는<script>아래(기본 값 은 window 대상)에 쓰 거나 window 대상 에 쓰 거나 jquery 소스 코드 를 보면 jsonp 가 리 셋 함 수 를 호출 할 때 호출 되 는 것 을 볼 수 있 습 니 다window.callback.
그 다음 에 호출 결 과 를 보면 요청 할 때 가 져 온 매개 변 수 는 다음 과 같다.callback=showData；리 셋 함 수 를 호출 할 때 지정 한 showData 를 호출 한 다음 에 success 를 호출 했다.그래서 success 는 성공 한 후에 반드시 호출 될 함수 입 니 다.어떻게 쓰 느 냐 에 달 려 있 습 니 다.

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>跨域测试</title>
 <script src="js/jquery-1.7.2.js"></script>
 <script>

 function showData (data) {
  console.info("调用showData");

  var result = JSON.stringify(data);
  $("#text").val(result);
 }

 $(document).ready(function () {

//  window.showData = function (data) {
//  console.info("调用showData");
//
//  var result = JSON.stringify(data);
//  $("#text").val(result);
//  }

  $("#btn").click(function () {

  $.ajax({
   url: "http://localhost:9090/student",
   type: "GET",
   dataType: "jsonp", //指定服务器返回的数据类型
   jsonpCallback: "showData", //指定回调函数名称
   success: function (data) {
   console.info("调用success");
   }
  });
  });

 });
 </script>
</head>
<body>
 <input id="btn" type="button" value="跨域获取数据" />
 <textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>
</html>
효과 그림:


콜백 이라는 이름 을 어떻게 바 꾸 는 지 다시 봅 시다:23 번 째 줄 코드
콜백 이라는 이름 을 지정 하면 배경 도 따라 변경 해 야 합 니 다.

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>跨域测试</title>
 <script src="js/jquery-1.7.2.js"></script>
 <script>

 function showData (data) {
  console.info("调用showData");

  var result = JSON.stringify(data);
  $("#text").val(result);
 }

 $(document).ready(function () {

  $("#btn").click(function () {

  $.ajax({
   url: "http://localhost:9090/student",
   type: "GET",
   dataType: "jsonp", //指定服务器返回的数据类型
   jsonp: "theFunction", //指定参数名称
   jsonpCallback: "showData", //指定回调函数名称
   success: function (data) {
   console.info("调用success");
   }
  });
  });

 });
 </script>
</head>
<body>
 <input id="btn" type="button" value="跨域获取数据" />
 <textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>
</html>
배경 코드:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 response.setCharacterEncoding("UTF-8");
 response.setContentType("text/html;charset=UTF-8");

 //数据
 List<Student> studentList = getStudentList();


 JSONArray jsonArray = JSONArray.fromObject(studentList);
 String result = jsonArray.toString();

 //前端传过来的回调函数名称
 String callback = request.getParameter("theFunction");
 //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
 result = callback + "(" + result + ")";

 response.getWriter().write(result);
}
효과 그림:

마지막 으로 jsonp 가 POST 방식 을 지원 하 는 지 확인 합 니 다:ajax 요청 POST 방식
jsonp 방식 은 POST 방식 의 크로스 도 메 인 요청 을 지원 하지 않 습 니 다.POST 방식 으로 지정 하 더 라 도 자동 으로 GET 방식 으로 전 환 됩 니 다.백 엔 드 가 POST 방식 으로 설정 되면 요청 할 수 없습니다.
jsonp 의 실현 방식 은 바로<script>스 크 립 트 가 주 소 를 요청 하 는 방식 과 같 습 니 다.단지 ajax 의 jsonp 가 이 를 봉인 한 것 이기 때문에 jsonp 는 POST 방식 을 지원 하지 않 는 다 는 것 을 짐작 할 수 있 습 니 다.

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>跨域测试</title>
 <script src="js/jquery-1.7.2.js"></script>
 <script>

 $(document).ready(function () {

  $("#btn").click(function () {

  $.ajax({
   url: "http://localhost:9090/student",
   type: "POST", //post请求方式
   dataType: "jsonp",
   jsonp: "callback",
   success: function (data) {
   var result = JSON.stringify(data);
   $("#text").val(result);
   }
  });
  });

 });
 </script>
</head>
<body>
 <input id="btn" type="button" value="跨域获取数据" />
 <textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>
효과 그림:


조금 만 더 보충 하고 첫 번 째 로 돌아 갑 니 다.CORS 헤드 부족“Access-Control-Allow-Origin”.
다른 것 도 문제 가 없다 는 것 을 알 게 될 때 가 있 습 니 다.이 오 류 는 서버 에서 도 메 인 접근 을 거부 하 는 것 을 의미 합 니 다.이 오류 가 발생 하면 서버 에서 크로스 요청 을 허용 하도록 설정 해 야 합 니 다.response.setHeader("Access-Control-Allow-Origin", "*");도 메 인 이름 의 크로스 도 메 인 접근 을 허용 합 니 다.

도 메 인 을 넘 어 접근 할 수 있 도록 설정 합 니 다.여섯 번 째 줄 코드 나 여덟 번 째 줄 코드 중 하 나 를 설정 하면 됩 니 다.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 response.setCharacterEncoding("UTF-8");
 response.setContentType("text/html;charset=UTF-8");

 // * 表示允许任何域名跨域访问
 response.setHeader("Access-Control-Allow-Origin", "*");
 // 指定特定域名可以访问
 response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");

 //数据
 List<Student> studentList = getStudentList();

 JSONArray jsonArray = JSONArray.fromObject(studentList);
 String result = jsonArray.toString();

 //前端传过来的回调函数名称
 String callback = request.getParameter("callback");
 //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
 result = callback + "(" + result + ")";

 response.getWriter().write(result);
}
총결산
jQuery ajax 방식 은 jsonp 형식 으로 도 메 인 간 요청 을 합 니 다.그 원 리 는스 크 립 트 요청 과 같 기 때문에 jsonp 를 사용 할 때 도 GET 방식 으로 도 메 인 간 요청 을 할 수 있 습 니 다.크로스 도 메 인 요청 은 서버 의 협조 가 필요 합 니 다.callback 을 설정 해 야 크로스 도 메 인 요청 을 완성 할 수 있 습 니 다.
자,이상 이 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
위 챗 애플 릿 은 공공 js 의 방법 에 대한 인 스 턴 스 를 참조 합 니 다.
vue 구성 요소 Prop 전달 데이터 구현 예제

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage