JavaScript 데이터 푸시는 주로 WebApps의 온라인 푸시 서비스에 전념합니다. AJAX 요청을 보내기 위해 서버와 같이 매번 서버에서 서버에서 로컬 영역으로 데이터를 적극적으로 푸시 할 필요가 없습니다.
데이터 푸시 진화의 역사 :
1. HTTP 프로토콜은 설문 조사, 링크 유지 또는 프론트 엔드를 통해 지속적으로 백엔드에 요청을 보내는 것이 간단합니다.
2. H5 업데이트 후 WebSocket은 데이터를 양방향 및 단방향 방향으로 푸시하는 편의성을 크게 향상시킵니다.
3. SSE (Server-Send Event) : 서버가 데이터를 푸시하는 새로운 방법
혜성 : HTTP 긴 연결을 기반으로 서버 푸시 기술
이 레슨은 혜성을 소개합니다. 웹 애플리케이션 아키텍처 인 HTTP 긴 연결을 기반으로 한 서버 푸시 기술. 서버는 클라이언트가 명시적인 요청을하지 않고 비동기 방식으로 클라이언트 프로그램에 데이터를 적극적으로 푸시합니다. 혜성 아키텍처는 이벤트 중심의 웹 애플리케이션과 주식 거래 시장 분석, 대화방 및 웹 버전 온라인 게임과 같은 강력한 대화식 및 실시간 기능이 필요한 응용 프로그램에 매우 적합합니다.
1. 먼저 AJAX 요청 JSON 데이터의 가장 간단한 예를 살펴 보겠습니다.
index.html
<meta charset = "utf-8"> <script type = "text/javaScript"src = "http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script type = "text/javascript"> $ .ajax ({url : url : " 함수 (data) {console.log (data)}); </script>data.php
<? php 헤더 ( 'content-type : application/json; charset = utf-8'); $ res = array ( 'success'=> 'ok', 'text'=> '나는 테스트의 텍스트입니다'); echo json_encode ($ res);?>
이러한 방식으로 프론트 엔드는 백엔드 데이터를 얻고 출력 할 수 있습니다. 백엔드를 지속적으로 프론트 엔드로 푸시하는 백엔드를 시뮬레이션합시다.
한 가지 방법은 프론트 엔드 루프에서 Ajax 요청을 지속적으로 보내는 것입니다.
2. 프론트 엔드 jQuery의 Ajax는 지속적으로 요청을 보냅니다.
index.html
<meta charset = "utf-8"> <script type = "text/javaScript"src = "http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script type = "text/javaScript"> function () {urt. "JSON", 성공 : console.log (data);} conn (); </스크립트>data.php
<? php 헤더 ( 'content-type : application/json; charset = utf-8'); 헤더 ( "캐시-제어 : max-age = 0"); // 캐시를 설정하지 않음 수면 (1); $ res = array ( 'success'=> 'ok', 'text'=> '나는 테스트의 텍스트입니다'; echo json_encode ($ res);?>
그러나 이러한 연결 폴링은 네트워크 요청 폐기물을 매우 분명하게 만듭니다. 우리는 또한 백엔드 서버 가이 일을 순환하게 할 수 있습니다. 다음 예제를 참조하십시오.
3. 기본 Ajax, 서버는 가끔씩 한 번씩 한 번 푸시합니다 (백엔드 루프, OB_FLUSH () 및 FLUSH ()를 사용하여 데이터를 뱉어냅니다)
data.php
<? php // 헤더 ( 'content-type : application/json; charset = utf-8'); 헤더 ( "캐시-제어 : max-age = 0"); // 캐시를 설정하지 않음 $ i = 0; while ($ i <9) {$ i ++; // $ res = array ( 'success'=> 'ok', 'text'=> '나는 테스트의 텍스트입니다'); // echo json_encode ($ res); 수면 (1); $ radom = rand (1,999); Echo $ Radom; echo '<br/>'; ob_flush (); // 출력 캐시는 flush ()와 함께 사용해야합니다. // 브라우저로의 캐시}?>Frontend JS (상태가 변경 될 때 Ajax 및 출력 구현) 참조 : //www.vevb.com/article/82085.htm 참조
var getxmlhttprequest = function () {if (wind } else if (wind }}; var xhr = getxmlhttprequest (); xhr.onreadyStateChange = function () {console.log (xhr.readystate); if (xhr.readystate === 3 && xhr.status === 200) {// 성공적인 획득 후 작업을 실행합니다. // 데이터는 xhr.responsetext console.log (xhr.responsetext)에 있습니다. }}; xhr.open ( "get", "data.php", true); xhr.send ( "");위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.