Jquery에서 비동기적으로 새로 고치는 방법

웹 개발에서는 부분 새로 고침, 실시간 업데이트 등과 같은 일부 특수 기능을 구현하기 위해 비동기식 새로 고침 기술이 자주 사용됩니다. 비동기식 새로 고침을 구현하는 핵심 기술은 Ajax 기술입니다. 가장 인기 있는 JavaScript 라이브러리 중 하나인 jQuery는 매우 강력하고 사용하기 쉬운 Ajax 기능을 캡슐화합니다. 이 기사에서는 jQuery를 사용하여 비동기 새로 고침을 구현하는 방법을 자세히 살펴보겠습니다.

1. jQuery 비동기 새로 고침 원칙

기존 동기 요청에서는 클라이언트가 서버에 요청을 보낸 다음 서버의 응답을 기다립니다. 비동기식 요청에서 클라이언트는 요청을 보낸 후 서버가 응답할 때까지 기다릴 필요가 없으며 계속해서 후속 코드를 실행합니다. 서버가 응답하면 응답 결과에 따라 해당 처리가 수행됩니다. 이를 통해 웹사이트를 부분적으로 새로 고칠 수 있어 불필요한 네트워크 트래픽과 페이지 다시 로드로 인한 리소스 낭비를 방지할 수 있습니다.

jQuery의 비동기 새로 고침은 Ajax 기술을 사용합니다.

1. 클라이언트는 비동기 요청을 서버에 보내고 XMLHttpRequest 개체를 사용하여 비동기 요청을 보냅니다.

2. 요청을 보내기 전에 클라이언트는 요청 유형, 요청 URL, 요청 매개변수 등을 포함하여 요청을 구성해야 합니다.

3. 클라이언트는 서버에 요청을 보내고 콜백 함수를 등록합니다. 서버는 요청을 처리한 후 응답 결과를 클라이언트에 반환합니다. 클라이언트는 응답 결과에 따라 해당 콜백 함수를 실행합니다.

4. 클라이언트는 웹 페이지의 일부를 업데이트하는 등 서버 응답을 기반으로 해당 작업을 수행합니다.

2. jQuery 비동기 새로 고침 구현

jQuery의 비동기 새로 고침에는 주로 $.ajax() 및 $.get() 메서드 두 가지가 있으며, 그 중 $.get()은 $.ajax()의 단순화된 버전입니다. 요청에 URL과 데이터만 전달되는 시나리오에 적합합니다. 다음은 이 두 가지 방법을 각각 사용하는 방법을 소개합니다.

1. $.ajax() 메서드를 사용하여 비동기 새로 고침 구현

$.ajax() 메서드는 jQuery에서 비동기 요청을 보내는 데 가장 일반적으로 사용되는 메서드 중 하나입니다. Promise를 사용하여 비동기 요청을 더 쉽게 관리할 수 있습니다. $.ajax() 메소드의 기본 사용법은 다음과 같습니다.

$.ajax({

type: 'POST',  //请求类型
url: 'http://www.example.com/api',  //请求的URL地址
data: {username: '张三', password: '123456'},  //请求的参数
success: function(data){  //回调函数，处理服务器响应结果
    // 服务器响应成功后执行的代码
},
error: function(xhr, type){  //回调函数，处理服务器响应错误
    // 服务器响应失败后执行的代码
}

});

위 코드는 먼저 $.ajax() 메소드를 사용하여 POST 요청을 보내고, 요청된 URL 주소는 http: //www.example.com/api이고, 요청 매개변수는 {사용자 이름: 'Zhang San', 비밀번호: '123456'}입니다. 서버가 성공적으로 응답하면 jQuery는 성공 콜백 함수를 실행하고 응답 데이터를 콜백 함수에 매개변수로 전달합니다. 서버가 오류로 응답하면 jQuery는 오류 콜백 함수를 실행하고 XMLHttpRequest 객체와 오류 유형을 매개 변수로 콜백 함수에 전달합니다.

2 $.get() 메서드를 사용하여 비동기 새로 고침 구현

$.get() 메서드는 $.ajax() 메서드의 단순화된 버전으로, URL과 데이터만 전달되는 시나리오에 적합합니다. 요청. $.get() 메소드의 기본 사용법은 다음과 같습니다:

$.get('http://www.example.com/api', {username: 'Zhang San', 비밀번호: '123456'}, function(data) {

// 处理服务器响应结果

})

위 코드는 먼저 $.get() 메서드를 사용하여 http://www.example.com/api 주소로 GET 요청을 보내고 매개변수 {username을 설정합니다. : 'Zhang San', 비밀번호: '123456'}이 서버로 전달됩니다. 서버가 성공적으로 응답하면 jQuery는 콜백 함수를 실행하고 응답 결과를 함수에 매개 변수로 전달합니다.

3. 비동기 새로 고침을 구현하는 jQuery의 예

아래에서는 jQuery를 사용하여 비동기 새로 고침을 구현하는 방법을 구체적으로 설명하는 예를 사용합니다. 이 예에서는 $.get() 메서드를 사용하여 서버에서 현재 시간을 가져와 웹 페이지의 지정된 DIV로 업데이트합니다. 구체적인 코드는 다음과 같습니다.

HTML 코드:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<meta charset="UTF-8">
<title>jQuery异步刷新实例</title>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>当前时间：</h1>
<div id="time"></div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="refresh.js"></script>

9594c165d41c8045070b550f93938b49

JavaScript 코드(refresh.js):

function RefreshTime() {

$.get('http://www.example.com/get_time', function(data) {
    $('#time').text(data.time);
});

}

setInterval(refreshTime, 1000);

위 코드는 먼저 RefreshTime() 함수를 정의합니다. $.get() 메소드를 사용하여 http://www.example.com/get_time에 GET 요청을 보내고 응답 결과의 시간 필드를 ID 시간이 있는 DIV로 업데이트합니다. 그런 다음 setInterval() 메서드를 사용하여 1초마다 RefreshTime() 함수를 실행합니다.

이렇게 하면 사용자가 웹페이지를 방문할 때 전체 페이지를 다시 로드하지 않고도 페이지의 시간이 항상 실시간으로 업데이트될 수 있습니다. 이러한 경험은 사용자가 더 원활하고 쉽게 받아들일 수 있습니다.

요약

이 문서에서는 jQuery를 사용하여 비동기 새로 고침 기술을 구현하는 방법을 자세히 설명합니다. 먼저 jQuery 비동기 새로 고침의 원리를 설명한 다음 두 가지 주요 비동기 새로 고침 방법인 $.ajax() 및 $.get() 방법을 소개합니다. 마지막으로 구체적인 예에서는 비동기식 새로 고침 기술을 사용하여 웹 페이지를 실시간으로 업데이트하는 방법을 보여줍니다. 이 기사가 jQuery 비동기 새로 고침 기술을 더 잘 익히고 웹 개발 효율성을 향상시키는 데 도움이 되기를 바랍니다.

위 내용은 Jquery에서 비동기적으로 새로 고치는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!