집 > 기사 > 백엔드 개발 > Ajax와 jsonp 사용법 요약

Ajax와 jsonp 사용법 요약

小云云원래의: 2017-12-25 09:44:152259검색

ajax 및 jsonp는 백그라운드와 통신하여 데이터와 정보를 얻을 수 있지만 페이지를 부분적으로 새로 고치기 위해 전체 페이지를 새로 고칠 필요는 없습니다. 이 글에서는 Ajax와 jsonp 사용법을 배울 수 있도록 Ajax와 jsonp 사용법을 요약하여 공유합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

1. ajax

•정의: 백그라운드와 비동기적으로 통신하기 위해 http 요청을 보내는 기술입니다.

•원리: xmlhttp 개체를 인스턴스화하고 이 개체를 사용하여 배경과 통신합니다.

Ajax의 동일 출처 정책:

•Ajax에서 요청한 페이지나 리소스는 동일한 도메인에 속한 리소스만 될 수 있으며, 다른 도메인의 리소스는 될 수 없습니다. 이는 Ajax를 설계할 때 보안 고려 사항을 기반으로 합니다.

-------------------------------------- --------------------------------

ajax 메서드:

1. $.ajax({}):

•공통 매개변수: •url: 요청 네트워크 주소
•type: 요청 방법, 기본값은 'GET', 일반적으로 사용되는 'POST'
•dataType: 반환된 데이터 형식을 설정하고 일반적으로 json을 사용하지만 html 및 jsonp도 사용합니다.
•data: 서버로 보낼 데이터 설정
•.done(): 요청 성공 후 콜백 함수 설정
•.fail(): 요청 실패 후 콜백 함수 설정
•async: 요청 성공 여부 설정 비동기, 기본값은 'true'입니다. 비동기를 의미합니다

•코드 사용법:

$(function () {
  $("input").click(function () {
    $.ajax({
      url: "./data.json",
      type: "get",
      dataType: "json",
    });
    .done(function(data) {//请求成功的回调函数
      $("input").val(dat.name);
    })
    .fail(function() {
      alert('服务器超时，请重试！');
    });
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
  </p>
</body>

설명: 데이터는 백그라운드에서 반환된 데이터를 나타냅니다. ajax 사용은 서버 환경에 따라 달라집니다.

2. $.get():

•$.get() 메소드는 GET 요청을 사용하여 서버에서 데이터를 로드하며, 새로 고치지 않고 데이터를 요청하는 ajax 메소드이기도 합니다.

•매개변수:
•url: 동일한 출처 정책을 따라야 하는 방문 URL
•data: 서버로 전송되는 데이터.
•function(data,status){}: 함수가 성공적으로 실행되도록 요청합니다.
•dataType: 요청 응답의 데이터 유형입니다.

//参考代码：
$(function () {
  $("input").click(function () {
    $.get(
      "./data.json",
      function (data,status) {
        console.log(data.name);
      },
      "json"
    );
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
  </p>
</body>

•$.get() 메소드의 매개변수는 $.ajax()와 다릅니다. URL은 필수 매개변수이고 나머지 3개는 선택사항입니다.
•데이터는 반환된 데이터이고, 상태는 일반적으로 ""성공", "오류", "시간 초과" 등을 포함하여 요청 상태를 나타냅니다.
•데이터 유형이 jsonp인 경우 도메인 전체에 걸쳐 데이터를 요청할 수도 있습니다.
• 요청 실패에 대한 콜백 기능 없음

3. $.post()

•$.get() 메소드는 POST 요청을 사용하여 서버에서 데이터를 로드합니다.
•사용된 메소드는 $.get( ) 메소드. 4. $.load():

•서버에서 데이터를 로드합니다. 데이터 유형을 지정할 필요가 없습니다. 반환된 데이터는 자동으로 요소에 배치됩니다.

•URL: 주소; data: 요청된 매개변수, 선택 사항
•function(response, status, xhr): 성공적인 요청에 대한 콜백 함수

$(function () {
  $("input").click(function () {
    $(".box").load(
      "./data.json",
      function (response,status) {
        console.log(data.name);
      }
    );
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
    <p class="box"></p>
  </p>
</body>

•반환된 데이터는 p에 배치됩니다.
•데이터는 도메인 간에 액세스할 수 없습니다. 반환된 데이터 및 상태는 요청 상태입니다.

4.getJSON()

•메소드는 JSON 데이터를 얻기 위해 AJAX HTTP GET 요청을 사용합니다. 요청 URL, 필수 매개변수
•data: 서버로 전송되는 데이터
•function(data, status, xhr): 성공적인 요청을 위한 콜백 함수

$(function () {
  $("input").click(function () {
    $.getJSON(
      "./data.json",
      function(data,status) {
        console.log(data.name);
      },
    );
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
  </p>
</body>

•이 메소드는 json 데이터를 직접 얻습니다.

•콜백 함수는 익명 함수가 아니라 명명된 함수입니다.

5.getScript()

•AJAX HTTP GET 요청을 사용하여 js 코드를 얻고 실행합니다.

•url: 요청 URL, 필수 매개변수 ;

•function(data,status): 성공적인 요청을 위한 콜백 함수

$(function () {
  $("input").click(function () {
    $.getScript(
      "./data.js",
      function(data,status) {
        console.log(data);
      },
    );
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
  </p>
</body>

•반환 결과 데이터는 js 코드입니다.

•이 메서드는 js 코드를 동적으로 로드하는 데 사용할 수 있습니다. 2. jsonp

•정의: 도메인 간에 http 요청을 보낼 수 있고 ajax에 내장되어 사용할 수 있는 데이터 통신 형식

•원칙: 스크립트 태그 기능을 사용하여 도메인 간에 리소스를 연결합니다.

사용법 1: 함수 매개변수 pass

<script type="text/javascript">
  function aa(data){
    console.log(data.name);
  }
</script>
<script type="text/javascript" src="....../data.js"></script>

지침: data.js 파일을 외부에서 정의하세요. 이 파일의 경로는 현재 페이지와 동일한 도메인에 있을 수 없습니다.

data.js의 내용:

aa({
  
  "data":{
    "name":"xiaohong",
    "age":"18"
  }
})

• 양식에 데이터를 전달하세요.

•기본적으로 데이터가 동일한 도메인 이름으로 저장되지 않도록 데이터를 분할할 수 있습니다.

사용법 2: ajax 사용

$.ajax({
  url:'...../data.js',//可以不是本地域名 
  type:'get',
  dataType:'jsonp', //jsonp格式访问
  jsonpCallback:'aa' //获取数据的函数
})
.done(function(data){
  console.log(data.name);
})
.fail(function() {
  alert('服务器超时，请重试！');
});

•data.js의 내용은 위와 동일합니다. 메소드는 본질적으로 도메인 간에 리소스를 연결할 수 있는 스크립트 태그이지만 jquery는 동일한 메소드를 캡슐화하고 동일하게 보입니다.

•위 코드의 실행 프로세스는 다음과 같습니다. ajax는 jsonp 기술을 통해 도메인 간에 data.js 파일에 액세스하고 aa() 메서드를 찾아 해당 매개 변수를 .done의 data 매개 변수에 전달하여 .done 메서드를 실행합니다. 방법.

•현재 이 방법에는 여전히 한계가 있습니다. 즉, data.js 파일의 이름과 정의된 메서드 aa를 알아야 합니다. 도메인 이름만 알면 다른 방법이 필요합니다.

Usage Three

var $input = $("input");
$input.keyup(function () {
  $.ajax({
    url:'https://sug.so.360.cn/suggest?',//请求360搜索的联想数据
    type:'get',
    dataType:'jsonp', //jsonp格式访问
    data: {word: $input.val()},
  })
  .done(function(data){
    console.log(data);
  })
  .fail(function() {
    alert('服务器超时，请重试！');
  });
})
....
<body>
  <input type="text">
</body>

• 키워드를 입력할 때마다 서버에서 다시 보내주는 데이터 패킷을 브라우저를 이용해 확인하고, js 파일에 있는 헤더의 주소와 관련 제출 데이터를 찾아보고, 그 키가 키워드라는 단어인 것을 확인하므로, 서버에 데이터 데이터를 보낼 수 있습니다.

•서버에서 반환된 데이터는 콜백 익명 함수의 매개변수 데이터로 자동 전달됩니다.

Ajax와 jsonp 사용법 요약

관련 기사