AJAX-퀵 가이드

AJAX는 A동기 JavaScript 및 XML. AJAX는 XML, HTML, CSS 및 Java Script를 사용하여 더 빠르고 더 빠르고 더 나은 대화 형 웹 응용 프로그램을 만들기위한 새로운 기술입니다.

Ajax는 컨텐츠에 XHTML을, 프리젠 테이션에 CSS를 사용하고 동적 컨텐츠 표시를 위해 JavaScript를 사용합니다.
기존의 웹 애플리케이션은 동기 요청을 사용하여 서버와 정보를 전송합니다. 양식을 작성하고 제출을 누르고 서버의 새 정보가있는 새 페이지로 이동한다는 의미입니다.
AJAX를 사용하면 제출을 누르면 JavaScript가 서버에 요청하고 결과를 해석하며 현재 화면을 업데이트합니다. 가장 순수한 의미에서 사용자는 어떤 것도 서버로 전송되었다는 사실을 결코 알 수 없습니다.
일반 텍스트를 포함한 모든 형식을 사용할 수 있지만 XML은 일반적으로 서버 데이터를 수신하는 형식으로 사용됩니다.
AJAX는 웹 서버 소프트웨어와 독립적 인 웹 브라우저 기술입니다.
클라이언트 프로그램이 백그라운드에서 서버로부터 정보를 요청하는 동안 사용자는 계속해서 애플리케이션을 사용할 수 있습니다.
직관적이고 자연스러운 사용자 상호 작용. 클릭이 필요하지 않으며, 마우스 움직임만으로도 충분한 이벤트 트리거입니다.
페이지 기반이 아닌 데이터 기반.

풍부한 인터넷 응용 기술

AJAX는 지금까지 가장 실행 가능한 RIA (Rich Internet Application) 기술입니다. 엄청난 산업 추진력을 얻고 있으며 여러 도구 키트와 프레임 워크가 등장하고 있습니다. 그러나 동시에 AJAX는 브라우저 비 호환성이 있으며 유지 보수 및 디버그가 어려운 JavaScript에 의해 지원됩니다.

AJAX는 개방형 표준을 기반으로합니다.

AJAX는 다음과 같은 개방형 표준을 기반으로합니다.

HTML 및 CSS (Cascading Style Sheets)를 사용한 브라우저 기반 프리젠 테이션.
데이터는 XML 형식으로 저장되고 서버에서 가져옵니다.
브라우저에서 XMLHttpRequest 객체를 사용하여이면 데이터를 가져옵니다.
모든 일이 일어나도록하는 자바 스크립트.

AJAX는 독립적으로 작동 할 수 없습니다. 다른 기술과 함께 사용하여 대화 형 웹 페이지를 만듭니다.

자바 스크립트

느슨하게 입력 된 스크립팅 언어.
페이지에서 이벤트가 발생하면 JavaScript 함수가 호출됩니다.
전체 AJAX 작업을위한 접착제.

DOM

구조화 된 문서에 액세스하고 조작하기위한 API입니다.
XML 및 HTML 문서의 구조를 나타냅니다.

CSS

콘텐츠에서 프레젠테이션 스타일을 명확하게 구분할 수 있으며 JavaScript에 의해 프로그래밍 방식으로 변경 될 수 있습니다.

XMLHttpRequest

서버와 비동기 상호 작용을 수행하는 JavaScript 객체입니다.

다음은 AJAX를 사용하는 유명한 웹 애플리케이션 목록입니다.

구글지도

사용자는 버튼을 클릭하는 대신 마우스를 사용하여 전체지도를 드래그 할 수 있습니다.

https://maps.google.com/

Google 제안

입력하면 Google에서 제안을 제공합니다. 결과를 탐색하려면 화살표 키를 사용하십시오.

https://www.google.com/webhp?complete=1&hl=en

Gmail

Gmail은 이메일이보다 직관적이고 효율적이며 유용 할 수 있다는 생각을 바탕으로 구축 된 웹 메일입니다.

https://gmail.com/

Yahoo Maps (신규)

이제 목적지에 도달하는 것이 훨씬 더 쉽고 재미 있습니다!

https://maps.yahoo.com/

AJAX와 기존 CGI 프로그램의 차이점

이 두 가지 예를 하나씩 시도하면 차이를 느낄 것입니다. AJAX 예제를 시도하는 동안에는 불연속성이없고 매우 빠르게 응답을 받지만 표준 GCI 예제를 시도하면 응답을 기다려야하고 페이지도 새로 고쳐집니다.

AJAX 예

표준 예

NOTE− AJAX 데이터베이스 에서 더 복잡한 예제를 제공했습니다 .

사용 가능한 모든 브라우저가 AJAX를 지원할 수 없습니다. 다음은 AJAX를 지원하는 주요 브라우저 목록입니다.

Mozilla Firefox 1.0 이상.
Netscape 버전 7.1 이상.
Apple Safari 1.2 이상.
Microsoft Internet Explorer 5 이상.
Konqueror.
Opera 7.6 이상.

다음 애플리케이션을 작성할 때 AJAX를 지원하지 않는 브라우저를 고려하십시오.

NOTE − 브라우저가 AJAX를 지원하지 않는다는 것은 단순히 브라우저가 Javascript 객체 (XMLHttpRequest 객체) 생성을 지원하지 않는다는 의미입니다.

브라우저 별 코드 작성

소스 코드를 브라우저와 호환되도록 만드는 가장 간단한 방법은 JavaScript에서 try ... catch 블록을 사용하는 것입니다.

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!

            try {
               // Opera 8.0+, Firefox, Safari 
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {

               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {

                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
         }
         //-->
      </script>
      
      <form name = 'myForm'>
         Name: <input type = 'text' name = 'username' /> <br />
         Time: <input type = 'text' name = 'time' />
      </form>
      
   </body>
</html>

위의 JavaScript 코드에서 XMLHttpRequest 객체를 만들기 위해 세 번 시도합니다. 첫 번째 시도-

ajaxRequest = 새로운 XMLHttpRequest ();

Opera 8.0+, Firefox 및 Safari 브라우저 용입니다. 실패하면 Internet Explorer 브라우저에 대한 올바른 개체를 만들기 위해 두 번 더 시도합니다.

ajaxRequest = new ActiveXObject ( "Msxml2.XMLHTTP");
ajaxRequest = new ActiveXObject ( "Microsoft.XMLHTTP");

작동하지 않으면 XMLHttpRequest를 지원하지 않는 매우 오래된 브라우저를 사용할 수 있습니다. 이는 AJAX를 지원하지 않음을 의미합니다.

하지만 우리의 변수 ajaxRequest는 이제 브라우저가 사용 하는 XMLHttpRequest 표준 으로 설정되고 서버로 데이터를 보낼 수 있습니다. 단계적 AJAX 워크 플로는 다음 장에서 설명합니다.

이 장에서는 AJAX 작업의 정확한 단계에 대한 명확한 그림을 제공합니다.

AJAX 작업 단계

클라이언트 이벤트가 발생합니다.
XMLHttpRequest 객체가 생성됩니다.
XMLHttpRequest 객체가 구성됩니다.
XMLHttpRequest 객체는 웹 서버에 비동기 요청을합니다.
웹 서버는 XML 문서가 포함 된 결과를 반환합니다.
XMLHttpRequest 객체는 callback () 함수를 호출하고 결과를 처리합니다.
HTML DOM이 업데이트됩니다.

이 단계를 하나씩 수행해 보겠습니다.

클라이언트 이벤트 발생

이벤트의 결과로 JavaScript 함수가 호출됩니다.
예 : validateUserId () JavaScript 함수는 ID가 "userid"로 설정된 입력 양식 필드의 onkeyup 이벤트에 이벤트 핸들러로 매핑됩니다.
<입력 유형 = "텍스트"크기 = "20"id = "userid"이름 = "id"onkeyup = "validateUserId ();">.

XMLHttpRequest 객체가 생성됨

var ajaxRequest;  // The variable that makes Ajax possible!
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer Browsers
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
}

XMLHttpRequest 개체가 구성됨

이 단계에서는 클라이언트 이벤트에 의해 트리거되는 함수를 작성하고 콜백 함수 processRequest ()가 등록됩니다.

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

웹 서버에 비동기 요청 만들기

소스 코드는 위의 코드에서 사용할 수 있습니다. 굵은 서체로 작성된 코드는 웹 서버에 요청을합니다. 이것은 모두 XMLHttpRequest 객체 ajaxRequest를 사용하여 수행됩니다 .

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid"); var url = "validate?id = " + escape(target.value); ajaxRequest.open("GET", url, true); ajaxRequest.send(null);
}

사용자 ID 상자에 Zara를 입력하고 위의 요청에서 URL이 "validate? id = Zara"로 설정되어 있다고 가정합니다.

웹 서버가 XML 문서를 포함하는 결과를 반환합니다.

모든 언어로 서버 측 스크립트를 구현할 수 있지만 논리는 다음과 같아야합니다.

클라이언트로부터 요청을받습니다.
클라이언트의 입력을 구문 분석하십시오.
필요한 처리를하십시오.
클라이언트에 출력을 보냅니다.

서블릿을 작성할 것이라고 가정하면 여기에 코드가 있습니다.

public void doGet(HttpServletRequest request,
   HttpServletResponse response) throws IOException, ServletException {
   String targetId = request.getParameter("id");
   
   if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}

콜백 함수 processRequest ()가 호출됩니다.

는 XMLHttpRequest 객체는로 상태 변화가있을 때 processRequest라는 () 함수를 호출하도록 구성 readyState가 의 XMLHttpRequest의 개체. 이제이 함수는 서버에서 결과를 수신하고 필요한 처리를 수행합니다. 다음 예제와 같이 웹 서버에서 반환 된 값에 따라 변수 메시지를 true 또는 false로 설정합니다.

function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

HTML DOM이 업데이트되었습니다.

이것이 마지막 단계이며이 단계에서는 HTML 페이지가 업데이트됩니다. 다음과 같은 방식으로 발생합니다.

JavaScript는 DOM API를 사용하여 페이지의 모든 요소에 대한 참조를 가져옵니다.
요소에 대한 참조를 얻는 데 권장되는 방법은 호출하는 것입니다.

document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document

이제 JavaScript를 사용하여 요소의 속성을 수정할 수 있습니다. 요소의 스타일 속성을 수정합니다. 또는 하위 요소를 추가, 제거 또는 수정합니다. 여기에 예가 있습니다-

<script type = "text/javascript">
   <!--
   function setMessageUsingDOM(message) {
      var userMessageElement = document.getElementById("userIdMessage");
      var messageText;
      
      if (message == "false") {
         userMessageElement.style.color = "red";
         messageText = "Invalid User Id";
      } else {
         userMessageElement.style.color = "green";
         messageText = "Valid User Id";
      }
      
      var messageBody = document.createTextNode(messageText);
      
      // if the messageBody element has been created simple 
      // replace it otherwise append the new element
      if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->
</script>

<body>
   <div id = "userIdMessage"><div>
</body>

위에서 언급 한 7 단계를 이해했다면 AJAX는 거의 다 끝났습니다. 다음 장에서는 XMLHttpRequest 객체를 더 자세히 살펴 보겠습니다.

XMLHttpRequest 객체는 AJAX의 핵심입니다. 2000 년 7 월 Internet Explorer 5.5가 출시 된 이후로 사용 가능했지만 2005 년 AJAX 및 Web 2.0이 대중화 될 때까지 완전히 발견되지 않았습니다.

XMLHttpRequest (XHR)는 JavaScript, JScript, VBScript 및 기타 웹 브라우저 스크립팅 언어에서 HTTP를 사용하여 웹 서버와 XML 데이터를 전송하고 조작하는 데 사용할 수있는 API로, 웹 페이지의 클라이언트 측과 서버 측.

XMLHttpRequest 호출에서 반환 된 데이터는 종종 백엔드 데이터베이스에서 제공됩니다. XML 외에도 XMLHttpRequest를 사용하여 JSON 또는 일반 텍스트와 같은 다른 형식의 데이터를 가져올 수 있습니다.

XMLHttpRequest 객체를 만드는 방법에 대한 몇 가지 예를 이미 보았습니다.

다음은 익숙해 져야하는 몇 가지 메서드와 속성입니다.

XMLHttpRequest 메서드

abort()

현재 요청을 취소합니다.
getAllResponseHeaders()

전체 HTTP 헤더 집합을 문자열로 반환합니다.
getResponseHeader( headerName )

지정된 HTTP 헤더의 값을 반환합니다.
open( method, URL )
open( method, URL, async )
open( method, URL, async, userName )
open( method, URL, async, userName, password )

요청의 메서드, URL 및 기타 선택적 속성을 지정합니다.

메소드 매개 변수는 "GET", "POST"또는 "HEAD"값을 가질 수 있습니다. "PUT"및 "DELETE"(주로 REST 애플리케이션에서 사용됨)와 같은 다른 HTTP 메소드가 가능할 수 있습니다.

"async"매개 변수는 요청을 비동기 적으로 처리해야하는지 여부를 지정합니다. "true"는 스크립트 처리가 응답을 기다리지 않고 send () 메소드 이후에 수행됨을 의미하고 "false"는 스크립트 처리를 계속하기 전에 스크립트가 응답을 기다림을 의미합니다.
send( content )

요청을 보냅니다.
setRequestHeader( label, value )

보낼 HTTP 헤더에 레이블 / 값 쌍을 추가합니다.

XMLHttpRequest 속성

onreadystatechange

모든 상태 변경시 발생하는 이벤트에 대한 이벤트 처리기입니다.
readyState

readyState 속성은 XMLHttpRequest 객체의 현재 상태를 정의합니다.

다음 표는 readyState 속성에 대해 가능한 값 목록을 제공합니다-

상태	기술
0	요청이 초기화되지 않았습니다.
1	요청이 설정되었습니다.
2	요청이 전송되었습니다.
삼	요청이 처리 중입니다.
4	요청이 완료되었습니다.

readyState = 0 XMLHttpRequest 객체를 만든 후 open () 메서드를 호출하기 전입니다.

readyState = 1 open () 메서드를 호출 한 후 send ()를 호출하기 전에.

readyState = 2 send ()를 호출 한 후.

readyState = 3 브라우저가 서버와 통신을 설정 한 후 서버가 응답을 완료하기 전입니다.

readyState = 4 요청이 완료되고 응답 데이터가 서버에서 완전히 수신 된 후.

responseText

응답을 문자열로 반환합니다.
responseXML

응답을 XML로 반환합니다. 이 속성은 W3C DOM 노드 트리 메서드 및 속성을 사용하여 검사하고 구문 분석 할 수있는 XML 문서 개체를 반환합니다.
status

상태를 숫자로 반환합니다 (예 : "찾을 수 없음"의 경우 404, "확인"의 경우 200).
statusText

상태를 문자열로 반환합니다 (예 : "Not Found"또는 "OK").

AJAX를 사용하여 데이터베이스에서 정보에 액세스하는 것이 얼마나 쉬운 지 명확하게 설명하기 위해 MySQL 쿼리를 즉시 작성하고 결과를 "ajax.html"에 표시 할 것입니다. 그러나 진행하기 전에 기초 작업을합시다. 다음 명령을 사용하여 테이블을 만듭니다.

NOTE − 다음 MySQL 작업을 수행 할 수있는 충분한 권한이 있다고 가정합니다.

CREATE TABLE 'ajax_example' (
   'name' varchar(50) NOT NULL,
   'age' int(11) NOT NULL,
   'sex' varchar(1) NOT NULL,
   'wpm' int(11) NOT NULL,
   PRIMARY KEY  ('name')
)

이제 다음 SQL 문을 사용하여 다음 데이터를이 테이블에 덤프합니다.

INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);

클라이언트 측 HTML 파일

이제 ajax.html 인 클라이언트 측 HTML 파일을 가져 오면 다음 코드가 있습니다.

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!
            
            try {        
               // Opera 8.0+, Firefox, Safari
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {
               
               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {
                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
            
            // Create a function that will receive data
            // sent from the server and will update
            // div section in the same page.
            ajaxRequest.onreadystatechange = function() {
            
               if(ajaxRequest.readyState == 4) {
                  var ajaxDisplay = document.getElementById('ajaxDiv');
                  ajaxDisplay.innerHTML = ajaxRequest.responseText;
               }
            }
            
            // Now get the value from user and pass it to
            // server script.
            var age = document.getElementById('age').value;
            var wpm = document.getElementById('wpm').value;
            var sex = document.getElementById('sex').value;
            var queryString = "?age = " + age ;
            
            queryString +=  "&wpm = " + wpm + "&sex = " + sex;
            ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
            ajaxRequest.send(null); 
         }
         //-->
      </script>

      <form name = 'myForm'>
         Max Age: <input type = 'text' id = 'age' /> <br />
         Max WPM: <input type = 'text' id = 'wpm' /> <br />
         Sex: 
         
         <select id = 'sex'>
            <option value = "m">m</option>
            <option value = "f">f</option>
         </select>
         
         <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
      </form>
      
      <div id = 'ajaxDiv'>Your result will display here</div>
   </body>
</html>

NOTE − Query에서 변수를 전달하는 방법은 HTTP 표준을 따르며 formA를 갖습니다.

URL?variable1 = value1;&variable2 = value2;

위의 코드는 아래와 같은 화면을 제공합니다.

입력 한 후이 섹션에 결과가 표시됩니다.

NOTE − 이것은 더미 화면입니다.

서버 측 PHP 파일

클라이언트 측 스크립트가 준비되었습니다. 이제 서버 측 스크립트를 작성해야합니다.이 스크립트는 데이터베이스에서 나이, wpm, 성별을 가져와 클라이언트로 다시 보냅니다. 다음 코드를 "ajax-example.php"파일에 넣으십시오.

<?php
$dbhost = "localhost"; $dbuser = "dbusername";
$dbpass = "dbpassword"; $dbname = "dbname";
	
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($dbname) or die(mysql_error());
	
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
	
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
	
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";

if(is_numeric($age)) $query .= " AND age <= $age"; if(is_numeric($wpm))
   $query .= " AND wpm <= $wpm";
	
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());

//Build Result String
$display_string = "<table>"; $display_string .= "<tr>";
$display_string .= "<th>Name</th>"; $display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>"; $display_string .= "<th>WPM</th>";
$display_string .= "</tr>"; // Insert a new row in the table for each person returned while($row = mysql_fetch_array($qry_result)) { $display_string .= "<tr>";
   $display_string .= "<td>$row[name]</td>";
   $display_string .= "<td>$row[age]</td>";
   $display_string .= "<td>$row[sex]</td>";
   $display_string .= "<td>$row[wpm]</td>";
   $display_string .= "</tr>"; } echo "Query: " . $query . "<br />";
$display_string .= "</table>"; echo $display_string;
?>

이제 Max Age 또는 다른 상자에 유효한 값 (예 : 120) 을 입력 한 다음 Query MySQL 버튼을 클릭합니다.

입력 한 후이 섹션에 결과가 표시됩니다.

이 레슨을 성공적으로 완료했다면 MySQL, PHP, HTML 및 Javascript를 함께 사용하여 AJAX 애플리케이션을 작성하는 방법을 알고 있습니다.

AJAX 보안 : 서버 측

AJAX 기반 웹 응용 프로그램은 일반 웹 응용 프로그램과 동일한 서버 측 보안 체계를 사용합니다.
web.xml 파일 (선언적) 또는 프로그램 (프로그래밍 방식)에서 인증, 권한 부여 및 데이터 보호 요구 사항을 지정합니다.
AJAX 기반 웹 애플리케이션은 일반 웹 애플리케이션과 동일한 보안 위협에 노출됩니다.

AJAX 보안 : 클라이언트 측

JavaScript 코드는 사용자 / 해커에게 표시됩니다. 해커는 JavaScript 코드를 사용하여 서버 측 약점을 추론 할 수 있습니다.
JavaScript 코드는 서버에서 다운로드되어 클라이언트에서 실행 ( "eval")되며 의도하지 않은 코드로 인해 클라이언트를 손상시킬 수 있습니다.
다운로드 된 JavaScript 코드는 샌드 박스 보안 모델의 제약을받으며 서명 된 JavaScript에 대해 완화 될 수 있습니다.

AJAX는 매우 빠르게 성장하고 있으며 이것이 많은 문제를 포함하고있는 이유입니다. 우리는 시간이 지남에 따라 해결되고 AJAX가 웹 애플리케이션에 이상 적이기를 바랍니다. AJAX가 현재 겪고있는 몇 가지 문제를 나열하고 있습니다.

Complexity is increased