XML 응용프로그램 (Applications)

이 장에서는 XML, HTTP, DOM 및 자바스크립트를 사용하는 일부 HTML 응용 프로그램을 보여줍니다. 사용된 XML 문서 이 장에서는 "cd_catalog.xml"이라는 XML 파일을 사용합니다. XML 데이터를 HTML 테이블로 표시 이 예제는 각 <CD> 요소를 반복하여(loops through), <ARTIST>와 <TITLE> 요소의 값을 HTML 테이블에 표시합니다: Example table, th, td { border: 1px solid black; border-collapse:collapse; } th, td { padding: 5px; } function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xmlhttp.open(“GET”, “cd_catalog.xml”, true); xmlhttp.send(); } function myFunction(xml) { var i; var xmlDoc = xml.responseXML; var table=”ArtistTitle”; var x = xmlDoc.getElementsByTagName(“CD”); for (i = 0; i 0) { i–; […]

AJAX 데이터베이스 예제

AJAX는 데이터베이스와 대화식으로 통신하는 데 사용할 수 있습니다. AJAX 데이터베이스 예제 다음 예제는 웹 페이지가 AJAX를 사용하여 데이터베이스에서 정보를 가져올 수있는 방법을 보여줍니다: Example Select a customer: Alfreds Futterkiste North/South Wolski Zajazd Customer info will be listed here… The XMLHttpRequest Object Select a customer: Alfreds Futterkiste North/South Wolski Zajazd Customer info will be listed here… function showCustomer(str) { var xhttp; if (str == “”) { document.getElementById(“txtHint”).innerHTML = “”; return; } xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById(“txtHint”).innerHTML = this.responseText; } }; xhttp.open(“GET”, “getcustomer.asp?q=”+str, true); xhttp.send(); } 예제 설명 – showCustomer() 함수 사용자가 위의 드롭 다운 목록에서 고객을 선택하면, “showCustomer()”라는 […]

AJAX ASP Example

AJAX는 더 많은 양방향 응용 프로그램을 만드는 데 사용됩니다. AJAX ASP 예제 다음 예제는 사용자가 입력 필드에 문자를 입력하는 동안 웹 페이지가 웹 서버와 통신하는 방법을 보여줍니다: Example 이 폼은 작동하지 않습니다. 아래 코드만 참조하십시오: First name: Suggestions: 예제 설명 위의 예에서 사용자가 입력 필드에 문자를 입력하면 “showHint()”라는 함수가 실행됩니다. 이 함수는 onkeyup 이벤트에 의해 트리거됩니다. 다음은 HTML 코드입니다: Example The XMLHttpRequest Object Start typing a name in the input field below: First name: Suggestions: function showHint(str) { var xhttp; if (str.length == 0) { document.getElementById(“txtHint”).innerHTML = “”; return; } xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById(“txtHint”).innerHTML = this.responseText; […]

AJAX PHP 예제

AJAX는 더 많은 양방향 응용 프로그램을 만드는 데 사용됩니다. AJAX PHP 예제 다음 예제에서는, 사용자가 입력 필드에 문자를 입력하는 동안, 웹 페이지가 웹 서버와 통신하는 방법을 보여줍니다: Example 아래의 입력 필드에 이름(영문)을 입력하십시오: First name: Suggestions: function showHint(str) { var xhttp; if (str.length == 0) { document.getElementById(“txtHint”).innerHTML = “”; return; } xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById(“txtHint”).innerHTML = this.responseText; } }; xhttp.open(“GET”, “https://lifea.co.kr/gethint.php?q=”+str, true); xhttp.send(); } 예제 설명 위의 예에서 사용자가 입력 필드에 문자를 입력하면, “showHint()”라는 함수가 실행됩니다. 이 함수는 onkeyup 이벤트에 의해 트리거됩니다. 다음은 HTML 코드입니다: Example The XMLHttpRequest Object 아래의 입력 필드에 이름(영문)을 입력하십시오: First name: […]

AJAX XML 예제

AJAX는 XML 파일과의 대화식 통신에 사용될 수 있습니다. AJAX XML 예제 다음 예제는 AJAX로, 웹 페이지가 XML 파일에서, 정보를 가져올 수 있는 방법을 보여줍니다: Example The XMLHttpRequest Object 테스트 중 table이 작동하지 않아, 텍스트로 추출했습니다. CD 목록 가져오기 function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open(“GET”, “https://lifea.co.kr/cd_catalog.xml”, true); xhttp.send(); } function myFunction(xml) { var i; var xmlDoc = xml.responseXML; var text=””; var x = xmlDoc.getElementsByTagName(“CD”); for (i = 0; i

AJAX – 서버 응답 (Server Response)

onreadystatechange 속성 readyState 속성은 XMLHttpRequest의 상태를 보유합니다. onreadystatechange 속성은 ,readyState가 변경될 때, 실행될 함수를 정의합니다. status 속성과 statusText 속성은 XMLHttpRequest 객체의 상태를 보유합니다. Property Description onreadystatechange readyState 속성이 변경될 때 호출할 함수를 정의합니다. readyState XMLHttpRequest의 상태를 보유합니다. 0: 요청이 초기화되지 않았습니다. 1: 서버 연결됨 2: 요청 접수 3: 요청 처리중 4: 요청 완료되고 응답이 준비됨 status 200: "OK"403: "Forbidden" 404: "Page not found"전체 목록을 보려면 Http Messages Reference를 참조하십시오 statusText 상태 문자열(예: “OK” 또는 “Not Found”) 반환 onreadystatechange 함수는 readyState가 변경될 때마다 호출됩니다. readyState가 4이고 상태가 200이면 응답이 준비됩니다: Example The XMLHttpRequest Object Change Content function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == […]

AJAX – 서버에 Request 보내기

XMLHttpRequest 객체는 서버와 데이터를 교환하기 위해 사용됩니다. 서버에 Request 보내기 서버에 request를 보내기 위해, XMLHttpRequest 객체의 open() and send() 메소드를 사용합니다: xhttp.open(“GET”, “ajax_info.txt”, true); xhttp.send(); Method Description open(method, url, async) Specifies the type of request method: request의 유형(type): GET or POST url: 서버 (파일) 위치 async: true (비동기, asynchronous) 또는 false (동기, synchronous) send() 서버에 request 보내기 (GET에 사용) send(string) 서버에 request 보내기 (POST에 사용) GET 또는 POST? GET은 POST보다 간단하고 빠르며, 대부분의 경우 사용할 수 있습니다. 그러나 다음 경우에는 항상 POST requests를 사용합니다: 캐시된 파일은 옵션이 아닙니다 (서버의 파일 또는 데이터베이스를 업데이트). 서버에 많은 양의 데이터를 전송합니다 (POST는 크기 제한이 없습니다). 사용자 입력내용 (알 수 없는 문자가 포함될 수 […]

AJAX – XMLHttpRequest 객체

AJAX의 핵심은 XMLHttpRequest 객체입니다. XMLHttpRequest 객체 최신의 모든 브라우저는 XMLHttpRequest 객체를 지원합니다. XMLHttpRequest 객체는 백그라운드에서 웹 서버와 데이터를 교환하기 위해 사용할 수 있습니다. 이것은, 전체 페이지를 다시 로드하지 않고도, 웹 페이지의 일부를 업데이트할 수 있다는 의미입니다. XMLHttpRequest 객체 생성하기 모든 최신 브라우저 (Chrome, Firefox, IE7 +, Edge, Safari, Opera)에는 내장(built-in ) XMLHttpRequest 객체가 있습니다. XMLHttpRequest 객체를 생성하는 구문: variable = new XMLHttpRequest(); Example The XMLHttpRequest Object AJAX로 이 텍스트를 변경해 보십시오. Change Content function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById(“demo”).innerHTML = this.responseText; } }; xhttp.open(“GET”, “https://lifea.co.kr/ajax_info.txt”, true); xhttp.send(); } The XMLHttpRequest Object Let AJAX change […]

AJAX 소개

AJAX는 다음과 같은 이유로 개발자의 꿈입니다: 웹 서버에서 데이터 읽기 – 페이지가 로드된 후 페이지를 다시 로드하지 않고(without reloading), 웹 페이지를 업데이트. 웹 서버에 데이터 보내기 – 백그라운드에서(in the background) The XMLHttpRequest Object Change Content function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById(“demo”).innerHTML = this.responseText; } }; xhttp.open(“GET”, “https://lifea.co.kr/ajax_info.txt”, true); xhttp.send(); } The XMLHttpRequest Object Change Content function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById(“demo”).innerHTML = this.responseText; } }; xhttp.open(“GET”, “ajax_info.txt”, true); xhttp.send(); } AJAX 예제 설명 HTML Page Let AJAX change […]