Ajax로 명령을 내립니다

Gmail 및 Google지도와 같은보다 역동적이고 반응이 좋고 데스크톱과 같은 웹 응용 프로그램을 구축하고 싶습니까? 그러면이 기사는 당신을위한 것입니다! Ajax 기본 사항과 간단한 Ajax 응용 프로그램을 구축하는 과정을 통해 안내합니다.

해당 응용 프로그램은 일반적으로 쉘 액세스가 필요한 시스템 명령을 실행하기위한 브라우저 인터페이스 인 WebConsole입니다. 인기있는 두 개의 JavaScript 라이브러리 인 JQuery와 Yui. 이 기사에서는 2005 년에 처음 출판되어 최근에 업데이트 된이 기사에서 HTTP 요청을위한 간단하고 재사용 가능한 JavaScript 기능의 생성에 대해 설명하겠습니다. 그런 다음 간단한 응용 프로그램을 작성하는 데 해당 기능을 적용하겠습니다.

yui 및 jQuery 예제가 있지만 기사는 특정 Ajax 라이브러리에 대한 자습서가 아닙니다. 대신, HTTP 요청 작성에 대한 더 많은 실습 정보를 제공하여 해당 라이브러리를 평가하거나 직접 진행하기로 결정할 때 더 나은 위치에있게됩니다.

키 테이크 아웃

ajax는 브라우저 내에서 HTTP 요청을 처리하여 Gmail 및 Google지도와 유사한 동적이고 반응 형 웹 애플리케이션을 생성 할 수 있습니다. 튜토리얼에는 jquery 또는 yui와 같은 특정 라이브러리에 의존하지 않고 다양한 응용 프로그램에서 사용할 수있는 HTTP 요청을위한 재사용 가능한 JavaScript 기능이 소개됩니다. 간단한 예제는 http 요청을 만드는 기본 단계를 보여줍니다. xmlhttprequest 객체 생성, 콜백 함수를 할당하고 요청을 보냅니다. 이 기사는 WebConsole 애플리케이션을 소개하여 브라우저 인터페이스를 통해 서버 측 명령 실행을 가능하게하여 실제 ajax 사용을 보여줍니다. 보안 문제가 강조되며, 실행 가능한 사령부 제한의 중요성을 강조하고 승인되지 않은 서버 액세스를 방지하기 위해 입력을 소독합니다. 튜토리얼은 XML 및 JSON과 같은 다양한 데이터 형식을 처리하고 AJAX를 인기있는 JavaScript 라이브러리와 강화 된 기능을 통합하는 등 고급 주제를 다룹니다.

간단한 http 요청 예 먼저 JavaScript에서 HTTP 요청을 작성하고 응답을 처리하는 흐름을 수정하겠습니다. 이것은 기억을 새로 고치는 빠른 예일뿐입니다. 모든 매운 세부 사항에 대해서는 Sitepoint의 입문 기사 인“Ajax : 원격 스크립팅과의 사용 가능한 상호 작용”을 참조하십시오. 세 가지 기본 단계가 있습니다

xmlhttprequest 객체를 만듭니다 HTTP 응답을 처리하기 위해 콜백 함수를 할당합니다 요청을 (보내기)

간단한 HTML 문서 Test.html을 요청할 예제를 보자. "나는 테스트이다"텍스트 만 포함되어있다. 그런 다음 test.html 파일의 내용을 Alert () 알립니다 :

이 예제가 작동하는 방법은 다음과 같습니다

사용자는 "요청 만들기"버튼을 클릭합니다 이것은 동일한 디렉토리에있는 html 파일의 이름을 매개 변수로 makerequest () 함수로 호출합니다. 이 경우 test.html. 입니다 요청이 전송됩니다.
OnreadyStateChange 이벤트 화재 및 실행은 AlertContents ()로 전달됩니다. alertContents () 응답이 수신되었는지 확인하고 괜찮은 경우 Alert ()는 test.html 파일의 내용을 확인합니다.
직접 예제를 테스트하고 테스트 파일을보십시오.
문제 위의 예는 제대로 작동했지만 프라임 시간을 준비하기 전에 개선해야 할 사항이 있습니다. 개선은 모든 지루하고 반복적 인 객체 생성 및 요청/응답을 처리하는 재사용 가능한 요청 함수를 코딩하는 한편, 프리젠 테이션 부분을 다른 기능에 남겨 두는 것이며, 이는 요청에 관계없이 그 결과를 소스에 관계없이 처리합니다.
. 위의 예에서, 우리는 MakeRequest () 및 AlertContents () 함수가 모두 액세스 할 수있는 전역 변수 인 http_request가 필요했으며, 이는 재사용 성 측면에서 좋지 않으며 1 개의 충돌 위험을 위험에 빠뜨 렸습니다. 이상적으로는 Makerequest ()가 요청을 수행해야하며 AlertContents ()는 결과를 제시해야합니다. 어떤 기능도 다른 사람에 대해 알고 있거나 요구할 필요가 없습니다.
3. 재사용 가능한 요청 기능의 코드는 다음과 같습니다
이 함수는 세 가지 매개 변수를 수신합니다

4. get 응답이 수신 될 때 호출 할 수있는 기능 플래그 콜백 함수가 XML 문서 (true) 또는 일반 텍스트 (False, Default) 가 예상되는 경우 플래그
5. 이 기능은 요청 객체를 멋지게 래핑하고 분리하기 위해 두 개의 JavaScript 기능에 의존합니다. 첫 번째는 다음과 같이 새로운 기능 (익명 함수라고 함)을 정의하는 능력입니다.
http_request.onreadystatechange = function () {...}

다른 요령은 이름을 미리 알지 못하고 콜백 함수를 호출하는 능력입니다. 예를 들면 :

콜백 함수의 이름이 따옴표없이 어떻게 전달되는지에 유의하십시오.

http 요청 메소드와 쿼리 문자열을 함수의 매개 변수로 전달한 다음 Call에 Open () 및 send () 메서드를 사용하여 기능을 더 쉽게 재사용 할 수 있습니다. 이를 통해 원래 수행하려는 Gets 외에 게시물 요청을 할 수 있습니다. 함수의 또 다른 기능은 200 이외의 응답 코드를 처리하는 것입니다. 이는 더 구체적으로 원하고 반환 된 성공/오류 코드의 유형에 따라 적절한 조치를 취할 경우 편리 할 수 ​​있습니다. 간단한 예는 를 다시 방문했습니다 이제 test.html 파일의 내용이 alert () ed 인 이전 예제를 다시 만들어 봅시다. 이번에는 반짝이는 새로운 재사용 가능한 요청 기능을 사용함으로써 사용 된 두 기능의 수정 된 버전이 훨씬 간단합니다.

보시다시피 AlertContents ()는 단순히 표현적입니다. 상태, ReadyState 또는 HTTP 요청이 없습니다. 이러한 기능은 이제 한 명에 불과하기 때문에 실제로 우리는 실제로 그것들을 완전히 제거하고 대신 함수 호출을 변경할 수 있습니다. 따라서 전체 예는 다음과 같습니다.

네, 그렇게 쉽습니다! 예제 및 전체 소스 코드보기 (Old Friend View 소스를 통해 사용할 수 있음).

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>

우리 프로젝트 : WebConsole 애플리케이션

ajax 기본 사항을 알고, 재사용 가능한 요청을하는 방법으로 무장하고, 실제로 실제 생활에서 사용할 수있는 작은 것을 만들기 위해 더 깊이 들어 갑시다.

우리가 만든 응용 프로그램을 사용하면 Windows 또는 Linux 기반의 웹 서버에서 Shell 명령을 실행할 수 있습니다. 우리는 앱을 콘솔 창처럼 느끼게하기 위해 약간의 CSS 노력을 기울일 것입니다.

인터페이스 측면에서, 우리는 지금까지 실행 된 명령의 결과를 포함하는 스크롤 가능한

하나와 실행할 명령을 입력하는 하나의 스크롤 가능

가 있습니다. 그들은 검은 배경과 회색 택배 글꼴이 있습니다. 스크린 샷은 다음과 같습니다.

function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
  var http_request, response, i; <br>
 <br>
  var activex_ids = [ <br>
    'MSXML2.XMLHTTP.3.0', <br>
    'MSXML2.XMLHTTP', <br>
    'Microsoft.XMLHTTP' <br>
  ]; <br>
 <br>
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
    http_request = new XMLHttpRequest(); <br>
    if (http_request.overrideMimeType) { <br>
      http_request.overrideMimeType('text/xml'); <br>
    } <br>
  } else if (window.ActiveXObject) { // IE6 and older <br>
    for (i = 0; i < activex_ids.length; i++) { <br>
      try { <br>
        http_request = new ActiveXObject(activex_ids[i]); <br>
      } catch (e) {} <br>
    } <br>
  } <br>
 <br>
  if (!http_request) { <br>
    alert('Unfortunately your browser doesn't support this feature.'); <br>
    return false; <br>
  } <br>
 <br>
  http_request.onreadystatechange = function() { <br>
    if (http_request.readyState !== 4) { <br>
        // not ready yet <br>
        return; <br>
    } <br>
    if (http_request.status !== 200) { <br>
      // ready, but not OK <br>
      alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
      return; <br>
    } <br>
    if (return_xml) { <br>
      response = http_request.responseXML; <br>
    } else { <br>
      response = http_request.responseText; <br>
    } <br>
    // invoke the callback <br>
    callback_function(response); <br>
  }; <br>
 <br>
  http_request.open('GET', url, true); <br>
  http_request.send(null); <br>
}

html

다음은 응용 프로그램의 HTML 부분입니다

<:> 그게 IT : 실행중인 명령의 결과로 업데이트되고 명령을 입력 할 수있는 가 업데이트됩니다.

CSS

스타일 시트 WebConsole.css는 결과

및 명령의 스타일을 정의합니다. 우리는 오버플로 속성을 자동으로 설정하여 명령 실행 결과를 스크롤 할 수있는

를 만듭니다. 또한 태그 디스플레이 속성을 인라인으로 변경합니다 (블록은 기본값). 또한 모든 것이 "Consoley :"회색 모자마 글꼴을 검은 배경에 보이게하는 재사용 가능한 .console 클래스도 있습니다. 서버 측 코드

우리의 응용 프로그램은 get 매개 변수 '명령'을 통해 명령을 수신하는 서버 측 스크립트 (exec.php)에 요청을합니다. 이 스크립트는 명령이 허용 목록에 나타나는지 확인하고 (더 많은 명령을 허용하도록이 목록을 편집 할 수 있음) 명령을 실행하고 결과를 인쇄합니다. 명령은 기본 PHP 함수 shell_exec ()의 도움으로 실행됩니다. PHP는 여기서 사용되지만 선호하는 서버 측 언어를 사용 하여이 기능을 구현하는 것은 비교적 쉽습니다.

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>

경고! $ allend_commands 배열은 사용자가 콘솔을 통해 실행할 수있는 명령을 제한합니다. 배열에 원하는만큼 많은 명령을 추가 할 수 있지만 웹 서버에서 추가 명령이 실제로 실행됩니다. 형식 C :: ApaceCectl STOP 또는 RM Â RF 추가 권장은 권장되지 않습니다! . JavaScript
JavaScript 코드의 첫 번째 단계는 네임 스페이스를 정의하는 것입니다. 우리가 필요한 다른 모든 변수와 함수는이 객체의 속성으로 정의됩니다. 이를 통해 글로벌 네임 스페이스를 깨끗하게 유지하고 코드는 자체 포함 할 수 있습니다. 응용 프로그램에서 JavaScript 코드의 흐름은 다음과 같습니다.

webConsole.keyEvent () 함수는 입력 필드의 OnKeyUp 이벤트에 첨부되며 키를 누르고 릴리스 할 때마다 호출됩니다. webConsole.keyEvent () 코드 13이있는 키가 누르면 (Enter/Return 키입니다) Enter가 누르면 요청의 URL은 다음과 같이 구성됩니다. URL은 재사용 가능한 makehttprequest () 함수로 전달됩니다. 또한 콜백 함수의 이름 인 WebConsole.printresult는 makehttprequest ()의 매개 변수로 제공됩니다. 성공적인 서버 응답 후 WebConsole.printresult ()가 호출됩니다 webConsole.printresult ()는 결과

를 업데이트하고

를 스크롤하고 다음 명령을 입력 할 공간을 만들기 위해 명령 텍스트 상자를 지 웁니다. KeyEvent () 함수의 본문이 다음과 같습니다. 우리는 makehttprequest ()의 세 번째 매개 변수로 True를 전달하지 않았기 때문에 텍스트 응답 (XML 아님)이 printresult ()로 전달됩니다. 다음, 결과

를 업데이트 할 함수를 살펴 보겠습니다.

를 업데이트하는 빠른 방법이 있으며, 이는 요소의 내부 속성을 사용하는 것입니다.

그러나 웹 페이지를 동적으로 업데이트하기 위해 InnerHTML을 사용하는 것은 HTML 코드를 문자열로 취급하는 반면, 현대 웹 디자인 사고는 페이지를 노드의 XML 트리를 포함하는 문서로 취급하는 것을 선호하며 DOM 방법 및 속성을 통해 액세스 할 수 있습니다. DOM은

를 업데이트하기 위해 이제 우리가 취할 길입니다. 여기 기능이 있습니다. 아래는 작동 방식에 대한 몇 가지 메모입니다 이 기능 :

function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
  var http_request, response, i; <br>
 <br>
  var activex_ids = [ <br>
    'MSXML2.XMLHTTP.3.0', <br>
    'MSXML2.XMLHTTP', <br>
    'Microsoft.XMLHTTP' <br>
  ]; <br>
 <br>
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
    http_request = new XMLHttpRequest(); <br>
    if (http_request.overrideMimeType) { <br>
      http_request.overrideMimeType('text/xml'); <br>
    } <br>
  } else if (window.ActiveXObject) { // IE6 and older <br>
    for (i = 0; i < activex_ids.length; i++) { <br>
      try { <br>
        http_request = new ActiveXObject(activex_ids[i]); <br>
      } catch (e) {} <br>
    } <br>
  } <br>
 <br>
  if (!http_request) { <br>
    alert('Unfortunately your browser doesn't support this feature.'); <br>
    return false; <br>
  } <br>
 <br>
  http_request.onreadystatechange = function() { <br>
    if (http_request.readyState !== 4) { <br>
        // not ready yet <br>
        return; <br>
    } <br>
    if (http_request.status !== 200) { <br>
      // ready, but not OK <br>
      alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
      return; <br>
    } <br>
    if (return_xml) { <br>
      response = http_request.responseXML; <br>
    } else { <br>
      response = http_request.responseText; <br>
    } <br>
    // invoke the callback <br>
    callback_function(response); <br>
  }; <br>
 <br>
  http_request.open('GET', url, true); <br>
  http_request.send(null); <br>
}

• 새 텍스트 노드를 만들고 문서 트리 에 추가하여 에 입력 된 명령을 결과
  에 추가합니다. 명령 실행 결과를 표시합니다. 이는 결과를 라인으로 나누고 각 줄을 문서 트리에 추가하는 동시에 태그로 이러한 각 선을 감싸서 간격을 보존합니다. 결과는 여러 줄을 포함 할 수 있으므로 결과를 분할해야합니다 ( 'ls -la'(또는 Windows에서 'dir')가 실행 된 경우 결과를 상상해보십시오)
• . 새로운 커서와 같은 텍스트 노드 (:->) 를 추가합니다 스크롤 탑 및 스크롤 리이트 속성을 사용하여
  아래로 스크롤합니다 (비 W3C 표준이지만 현대식 브라우저에서 지원) 는 다음 명령을 입력 할 수 있도록 명령 을 지우 셨습니다.
• JavaScript의 마지막 작업은 이벤트를 처리하는 것입니다.
• 형태 제출물은 단순히 "음소거"되어 페이지 새로 고침이 없도록 webConsole.keyEvent () 메소드는 명령이 입력되는 입력의 keyup 이벤트에 첨부됩니다.
• 그리고 당신은 간다! 이것은 퍼즐의 마지막 조각이었습니다. 우리가 지금 가지고있는 것은 처음부터 구축 된 Ajax 응용 프로그램입니다.
약간의 추가 이전 예제의 소스 코드를보기에 충분히 궁금하다면, 지금까지 논의한 것 보다이 앱에 약간 더 많은 것이 있음을 알 수 있습니다. 작은 추가는 실제로 Ajax 관련이 아니지만 응용 프로그램이 명령 프롬프트처럼 느껴집니다. 문제의 기능에는 세션에 사용 된 명령의 기록에 액세스하기 위해 위와 아래 화살표 키를 사용하는 것이 포함됩니다. 'ls -la', 그런 다음 'ls'를 실행했다고 가정 해 봅시다. 상단 키를 누르면 명령이 마지막으로 사용 된 명령으로 선불됩니다. 즉, 'ls'입니다. 상향 화살표 키를 다시 누르면 명령 입력에 'ls -la'가 표시됩니다. 아래쪽 화살표 키를 누르십시오. 명령의 역사를 넘어서 다시 'LS'에 도달합니다. 직접 시도해보십시오.

이 기능의 구현은 어렵지 않습니다. 지금까지 실행 된 모든 명령을 저장할 배열 만 있으면됩니다.

WebConsole.commands_history = []; … 그리고 우리가 어디에 있는지 기억하는 배열 포인터 (정수) :
webConsole.keyEvent () 함수의 목록은 다음과 같습니다. 역사 기능을 다루는 선은 굵게 표시됩니다.
• 다음은 기능이 명령 기록을 제공하기 위해 어떻게 작동하는지에 대한 메모입니다.
우리가 Enter (키 코드 13)를 누르고 요청을 할 때, 실행 된 명령이 commands_history 배열에 추가되고 배열 포인터가 배열의 새 길이로 재설정됩니다. 위로 화살표 (키 코드 38)를 때릴 때“돌아가서”를 의미합니다. history_pointer를 줄이고 히스토리 목록의 이전 명령과 함께 명령 를 시사합니다. 아래쪽 화살표를 치는 것은 포인터를 하나씩 증가시키고 다음 명령을 볼 수 있습니다.
xml 작업 지금까지, 우리는 XML 문서를 요청하고 사용하는 방법에 대해 논의하지 않았습니다 - ajax! 우리는 XMLHTTP 객체의 responeetext 속성을 사용하고있었습니다. 문서를 요청하는 것은 우리가 이미 본 것과 다르지 않습니다. 우리는 ResponseText와 달리 재사용 가능한 요청 기능을 RESPESSXML을 반환하도록 지시하면됩니다. 우리는 세 번째 매개 변수를 true로 설정하여 그렇게합니다. 그런 다음 일반 텍스트 대신 유효한 XML을 반환하려면 exec.php 스크립트를 변경해야합니다. 다음은 새 스크립트 (exec_xml.php)의 소스 코드는 다음과 같습니다
• 이 방식으로, 'ls test.html'명령을 실행하면 새 서버 측 스크립트가 다음을 반환합니다.
우리가 더 많은 줄 ( 'ls -la')을 반환하는 명령을 실행하면 응답의 모든 줄은 태그로 래핑됩니다. 우리는 를 처리하고 결과
에 표시하기 위해 JavaScript dom 함수를 사용하여 위의 XML 문서를 탐색합니다. 다음은 새로운 WebConsole.printresult () 메소드의 본문입니다 XML 문서의 데이터로 결과

를 업데이트하려면 절차를 따릅니다.

소스 xml에서 노드에 액세스하십시오 <.> 그 가치를 얻으십시오.

새 노드를 만듭니다.

대상 트리에 추가하십시오

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>

코드에서 볼 수 있듯이 xmldoc.getElementsByTagName ( '명령')이 사용되며 모든 노드의 컬렉션 (배열 형 목록 개체)을 반환합니다. 우리의 경우에는 그러한 노드가 하나뿐입니다. 우리는 다음과 같이 그 값에 액세스합니다 :

우리는 노드 값을 가져 와서 다음과 같이

에 추가 할 새 텍스트 노드를 만듭니다.

function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
  var http_request, response, i; <br>
 <br>
  var activex_ids = [ <br>
    'MSXML2.XMLHTTP.3.0', <br>
    'MSXML2.XMLHTTP', <br>
    'Microsoft.XMLHTTP' <br>
  ]; <br>
 <br>
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
    http_request = new XMLHttpRequest(); <br>
    if (http_request.overrideMimeType) { <br>
      http_request.overrideMimeType('text/xml'); <br>
    } <br>
  } else if (window.ActiveXObject) { // IE6 and older <br>
    for (i = 0; i < activex_ids.length; i++) { <br>
      try { <br>
        http_request = new ActiveXObject(activex_ids[i]); <br>
      } catch (e) {} <br>
    } <br>
  } <br>
 <br>
  if (!http_request) { <br>
    alert('Unfortunately your browser doesn't support this feature.'); <br>
    return false; <br>
  } <br>
 <br>
  http_request.onreadystatechange = function() { <br>
    if (http_request.readyState !== 4) { <br>
        // not ready yet <br>
        return; <br>
    } <br>
    if (http_request.status !== 200) { <br>
      // ready, but not OK <br>
      alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
      return; <br>
    } <br>
    if (return_xml) { <br>
      response = http_request.responseXML; <br>
    } else { <br>
      response = http_request.responseText; <br>
    } <br>
    // invoke the callback <br>
    callback_function(response); <br>
  }; <br>
 <br>
  http_request.open('GET', url, true); <br>
  http_request.send(null); <br>
}

우리는 XML 문서의 태그와 동일하게 수행합니다. 먼저, 우리는 모든 s : 를 얻습니다

그런 다음 result_collection에서 각 요소를 통해 루프합니다. 다시, 우리는 각 결과 라인을

 태그로 랩핑합니다. 

보시다시피, XMLDocument로 작업하는 것은 일반 텍스트 응답으로 작업하는 것보다 그리 어렵지 않습니다. 웹 콘솔의 XML 버전을 직접 테스트 할 수 있습니다.

var callmeback = alert;<br>
callmeback('test'); // alerts 'test'

jQuery는 인기있는 JavaScript 라이브러리입니다. 재사용 가능한 makehttprequest () 함수 대신 ajax 기능에 사용해 보겠습니다. 먼저 여기에서 최신 버전의 라이브러리를 다운로드해야합니다 (최소화 버전을 제안합니다). 페이지에 포함시켜야합니다.

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>

우리가 다음과 같이 makehttprequest ()라고 부르는 부분이있었습니다.

jQuery의 ajax () 메소드를 사용하여 이제 할 수 있습니다 :  

var xhr = $ .ajax ({  URL : 'exec.php',  데이터 : { 'command': the_shell_command},  성공 : webConsole.printresult

function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
  var http_request, response, i; <br>
 <br>
  var activex_ids = [ <br>
    'MSXML2.XMLHTTP.3.0', <br>
    'MSXML2.XMLHTTP', <br>
    'Microsoft.XMLHTTP' <br>
  ]; <br>
 <br>
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
    http_request = new XMLHttpRequest(); <br>
    if (http_request.overrideMimeType) { <br>
      http_request.overrideMimeType('text/xml'); <br>
    } <br>
  } else if (window.ActiveXObject) { // IE6 and older <br>
    for (i = 0; i < activex_ids.length; i++) { <br>
      try { <br>
        http_request = new ActiveXObject(activex_ids[i]); <br>
      } catch (e) {} <br>
    } <br>
  } <br>
 <br>
  if (!http_request) { <br>
    alert('Unfortunately your browser doesn't support this feature.'); <br>
    return false; <br>
  } <br>
 <br>
  http_request.onreadystatechange = function() { <br>
    if (http_request.readyState !== 4) { <br>
        // not ready yet <br>
        return; <br>
    } <br>
    if (http_request.status !== 200) { <br>
      // ready, but not OK <br>
      alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
      return; <br>
    } <br>
    if (return_xml) { <br>
      response = http_request.responseXML; <br>
    } else { <br>
      response = http_request.responseText; <br>
    } <br>
    // invoke the callback <br>
    callback_function(response); <br>
  }; <br>
 <br>
  http_request.open('GET', url, true); <br>
  http_request.send(null); <br>
}

}); 우리가 여기에있는 것을 보자 :


$는 jQuery의 빠른 이름입니다. 대신 jQuery.ajax 도 대신 할 수 있습니다 우리는 ajax () 메소드를 호출하고 요청에 URL이 포함 된 객체를 전달하고, 데이터 객체 (jQuery에 의해 쿼리 문자열로 탈출하여 쿼리 문자열로 변환), 응답이 도착하면 호출 할 콜백 함수를 전달합니다.
.
jQuery를 사용하는 웹 콘솔의 작업 예가 여기에 있습니다.
문서를 살펴보면 jQuery를 사용하여 Ajax를위한 더 많은 방법이 있습니다. 예를 들어, 파일의 내용 (test.html)을 사용하여

(id mydiv)를 업데이트하는 종종 반복되는 작업은 다음과 같이 간단 할 수 있습니다.
여기 예를 참조하십시오.
Yui 사용 또 다른 인기있는 JavaScript 라이브러리는 Yui (Yahoo Interface Library)입니다. Yui의 Ajax 기능으로 웹 콘솔을 작동시키는 방법을 살펴 보겠습니다. 우리는 Yahoo가 이미 무료로 호스팅되며 현재 위치에서 사용할 수 있기 때문에 Yui 파일을 다운로드 할 필요가 없습니다. AJAX 기능은 Connection Manager 유틸리티에서 제공하며 다음과 같은 페이지에 포함됩니다.

이제 yui를 활용하기 위해 우리는 호출을 makehttprequest ()로 대체합니다.  

// yui 's ajax

yahoo.util.connect.asyncrequest (    'get',    'exec.php? command ='Escape (the_shell_command),    {<.>      성공 : 함수 (xhr) {        WebConsole.printresult (xhr.responsetext)      } <.>    } <.> ); asyncrequest () 메소드가 다음을 취할 수 있습니다

요청 메소드 (get, post, head, delete 등)
• url 성공 및 실패 시나리오를 처리하기위한 함수가 포함 된 객체
yui는 xmlhttprequest 객체를 핸들러 함수로 전달 하므로이 경우 responceetext의 내용을 가져 와서 printresult ()로 전달합니다. 당신은 문자열을 연결하고 탈출하여 URL이 어떻게 만들어 졌는지 알 수 있습니다. 이 경우 쿼리 문자열을 통과하려는 값은 단 하나뿐입니다. 그러나 더 많으면 꽤 불편 해집니다. Yui는 setform () 메소드를 제공하여 이러한 상황을 쉽게 처리 할 수 ​​있도록 도와줍니다. 양식을 설정하면 Yui는 양식에서 값을 가져 와서 쿼리 문자열을 탈출하고 스티칭하는 것을 관리합니다.  

yahoo.util.connect.setform (document.forms [0]);  
yahoo.util.connect.asyncrequest (    'get',    'exec.php',
   {<.>      성공 : 함수 (xhr) {        WebConsole.printresult (xhr.responsetext)      } <.>    } <.> ); yui를 사용한 웹 콘솔의 작동 예는 다음과 같습니다. JSON 사용
JSON (JavaScript 객체 표기법)은 인기있는 데이터 교환 형식입니다. 서버에서 브라우저로 데이터를 통신 할 때 일반 텍스트 또는 XML에 대한 또 다른 대안을 제공합니다. JSON은 매우 간단합니다. 본질적으로, 그것은 JavaScript 일뿐입니다.
javaScript에서는 배열과 다음과 같은 객체를 정의 할 수 있습니다.
당신은 동일하게 할 수 있지만 배열 및 객체 리터럴을 사용하여 :
이 문자 적 ​​표기법은 JSON이 데이터를 전달하는 데 사용하는 것입니다. JavaScript의 속성 주변의 인용문은 대부분의 시간이 필요하지 않지만 협약에 따라 JSON에서 필요합니다.
. 콘솔을 변경하여 JSON 형식을 사용하여 데이터를 전송하겠습니다. 흐름은 다음과 같습니다.

서버 측의 PHP는 결과와 관련된 어레이 어레이를 생성 한 다음 PHP5 전용 인 내장 함수 json_encode ()를 사용하여 JSON으로 변환하지만 응답을 수동으로 인코딩하는 것은 사소한 일입니다. JSON 문자열이 반환됩니다.

브라우저의 JavaScript는 JSON 문자열을 수신하여 기본 JavaScript 객체로 변환합니다. 그렇게하는 안전하지 않은 방법은 Eval () 함수를 사용하는 것입니다. 더 좋은 방법은 무료 JSON 라이브러리를 사용하는 것입니다.

예를 들어, 실행하는 명령이 ls 인 경우 서버의 JSON 응답은 다음과 같습니다 (읽기 성을 위해 서식 및 요약) :

.

보시다시피, JSON은 닫는 태그, XML 문서 태그 또는 루트 노드가 없으므로 XML보다 가볍습니다. JSON을 반환하도록 서버 측 스크립트를 변경하면 다음과 같은 결과가 나옵니다.

javaScript에서는 webConsole.printresult의 일부가 데이터를 받아 들일 것입니다. eval () 이후 데이터가 정상적인 JavaScript 객체가되고 data.result 및 data.command와 같은 속성에 액세스 할 수있는 방법을 알 수 있습니다. 이미 언급했듯이 Eval ()은 JSON 인코딩 된 문자열을 객체로 변환하는 보안보다 적은 방법입니다. 더 좋은 방법은 JSON 라이브러리를 사용하여 Eval () 호출을 다음과 같이 교체하는 데 도움이됩니다. 작동하는 JSON 예제가 여기에 있습니다.

보안 알림 이 응용 프로그램의 시연을 위해, 나는 내 웹 서버에서 사전 정의 된 무해한 명령 세트 만 실행할 수 있도록 허용합니다. 명령 목록을 확장하거나 명령을 허용하는 경우 응용 프로그램을 설치할 서버의 디렉토리를 보호하는 것을 잊지 마십시오. 이 응용 프로그램을 낯선 사람에게 액세스 할 수있는 것은 치명적인 결과를 초래할 수 있습니다. 매우 강력합니다. 사용자가 웹 서버의 모든 것을 삭제하지만 이에 국한되지 않는 명령을 실행할 수 있습니다! 결론 우리는 예제 Ajax 응용 프로그램의 끝에 왔습니다. 당신은 기본 사항을 알고, 행동을 보았으며, 자신을 실험하기에 충분한 지식으로 무장합니다. 이 기사의 코드를 수정하고 재생하여 워밍업 할 수 있습니다 (모두 다운로드 가능한 코드 아카이브에 포함되어 있습니다.
이것은 흥미 진진한시기입니다 : 원격 스크립팅 덕분에 웹의 얼굴이 큰 변화를 겪고 있습니다. 우리는 얼리 어답터의 단계 (Google, Amazon, Flickr, Yahoo)의 단계를 통과했으며 이제 Ajax를 사용한 원격 스크립팅이 반응적이고 사용자 친화적 인 웹 페이지를 만들 때 점점 일반화되고 있습니다. 요즘 방문객들은 이미 Gmail과 Flickr를 사용하여 이미 망쳐졌으며 정적 웹 1.0 스타일 페이지로 모욕 할 여유가 없습니다! . ajax 에 대한 질문이 자주 묻습니다 동기와 비동기 Ajax의 차이점은 무엇입니까?

동기 Ajax 요청은 응답이 수신 될 때까지 코드 실행을 차단합니다. 즉, 요청이 완료 될 때까지 사용자 인터페이스가 응답하지 않거나 "동결"할 수 있습니다. 반면, 비동기 AJAX 요청은 나머지 코드의 실행을 차단하지 않습니다. 요청이 처리되는 동안 사용자 인터페이스가 반응 형을 유지할 수 있습니다. 이것이 바로 웹 개발에서 동기식 요청보다 일반적으로 비동기 요청이 선호되는 이유입니다.

AJAX는 XML 및 JSON과 같은 데이터 형식을 어떻게 처리합니까?

ajax는 XML 및 JSON을 포함한 다양한 데이터 형식을 처리 할 수 ​​있습니다. XML은 처음에 Ajax의 가장 일반적인 형식이었습니다. 그러나 JSON은 가벼운 특성과 JavaScript에서 사용 용이성으로 인해 더 인기를 얻었습니다. Ajax는 이러한 데이터 형식을 구문 분석하고 전체 페이지를 다시로드 할 필요없이 웹 페이지를 업데이트 할 수 있습니다.

Ajax는 JavaScript 이외의 기술과 함께 작동 할 수 있습니까?

Ajax는 JavaScript와 크게 관련이 있지만 다른 기술과 함께 작동 할 수 있습니다. 예를 들어, 인기있는 JavaScript 라이브러리 인 JQuery와 함께 Ajax를 사용하여 AJAX 요청을 단순화 할 수 있습니다. AJAX는 PHP와 같은 서버 측 언어와 함께 사용하여 데이터베이스에서 데이터를 검색 할 수 있습니다. ajax를 사용하는 보안 영향은 무엇입니까?

다른 웹 기술과 마찬가지로 Ajax는 잠재적 인 보안 영향을 미칩니다. AJAX에는 클라이언트와 서버간에 데이터를 전송하고 수신하기 때문에 크로스 사이트 스크립팅 (XSS) 및 크로스 사이트 요청 위조 (CSRF)와 같은 공격에 취약 할 수 있습니다. 따라서 입력 데이터를 검증하고 소독하는 것과 같은 AJAX를 사용할 때 적절한 보안 조치를 구현하는 것이 중요합니다.

AJAX는 SEO에 어떤 영향을 미치는가?
AJAX는 검색 엔진이 AJAX 컨텐츠를 완전히 크롤링하고 색인 할 수 없기 때문에 SEO에 잠재적으로 영향을 줄 수 있습니다. 그러나 Google은 JavaScript 크롤링을 발전 시켰으며 Ajax 컨텐츠를 어느 정도 색인 할 수 있습니다. Ajax 컨텐츠가 SEO 친화적이지 않도록하려면 점진적 향상 및 우아한 저하와 같은 기술을 사용할 수 있습니다.

ajax는 html5 및 css3와 함께 사용할 수 있습니까?

예, Ajax는 HTML5 및 CSS3과 함께 사용하여 동적 웹 페이지를 만들 수 있습니다. 예를 들어, HTML5 히스토리 API는 AJAX와 함께 사용하여 전체 페이지 재 장전없이 탐색 가능한 페이지를 만들 수 있습니다. CSS3는 업데이트 된 컨텐츠를 스타일링하는 데 사용될 수 있습니다.
ajax의 일반적인 사용 사례는 무엇입니까?
Ajax는 전체 페이지를 새로 고치지 않고 실시간 데이터 업데이트가 필요한 웹 애플리케이션에서 일반적으로 사용됩니다. 여기에는 라이브 검색 결과, 양식 제출, 채팅 애플리케이션 및 대화식 맵과 같은 응용 프로그램이 포함됩니다. AJAX는 오류를 어떻게 처리합니까?
AJAX는 요청 중에 발생하는 오류를 처리 할 수있는 메소드를 제공합니다. 요청이 처리 될 때 오류가 발생하면 실행될 함수를 정의 할 수 있습니다. 이 기능은 오류에 대한 정보를 제공하고 사용자에게 알리거나 오류 로그인하는 등의 적절한 조치를 취할 수 있습니다.

Ajax 요청을 캐시 할 수 있습니까?

예, Ajax 요청은 성능을 향상시킬 수 있습니다. AJAX 요청을 캐싱함으로써 응답은 동일한 요청이 다시 작성되면 새 요청을하는 대신 저장 응답을 사용할 수 있도록 저장됩니다. 그러나 이것은 부실한 데이터로 이어질 수 있으므로 신중하게 사용해야합니다.

ajax를 디버그하려면 어떻게해야합니까?

브라우저 개발자 도구를 사용하여 ajax 디버깅을 수행 할 수 있습니다. 이 도구를 사용하면 AJAX 요청 및 응답을 검사하고 요청 상태를 확인한 후 발생하는 오류를 확인할 수 있습니다. JavaScript 코드의 Console.log 문을 사용하여 디버깅 목적으로 콘솔에 정보를 출력 할 수도 있습니다.