티스토리 뷰
jQuery Google CDN
<script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.78/Build/Cesium/Cesium.js"></script>Hosted Libraries | Google Developers
Hosted Libraries | Google Developers
A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries.
developers.google.com
jQuery 공식 문서
jQuery API Documentation
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t
api.jquery.com
Ajax (Asynchronous JavaScript and XML) : $.ajax(settings)
jQuery를 이용한 ajax통신의 가장 기본적인 API
주요속성
-
data : 서버에 전송할 데이터, key/value 형식의 객체
-
dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html)
-
type : 서버로 전송하는 데이터의 타입 (POST, GET)
-
url : 데이터를 전송할 URL
-
success : ajax통신에 성공했을 때 호출될 이벤트 핸들러
웹페이지
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="result"></div>
<input type="text" id="msg" />
<input type="button" value="get result" id="getResult" />
<script>
$('#getResult').click( function() {
$('#result').html('');
$.ajax({
url:'http://opentutorials.org/example/jquery/example.jquery.ajax.php',
dataType:'json',
type:'POST',
data:{'msg':$('#msg').val()},
success:function(result){
if(result['result']==true){
$('#result').html(result['msg']);
}
}
});
})
</script>
</body>
</html>
서버 쪽 로직
<?
echo json_encode(array('result'=>true, 'msg'=>$_REQUEST['msg']));
?>
JavaScript DOM을 이용할 경우
demo1.html
<p>time : <span id="time"></span></p>
<input type="button" id="execute" value="execute" />
<script>
document.querySelector('input').addEventListener('click', function(event){
var xhr = new XMLHttpRequest();
xhr.open('GET', './time.php');
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
document.querySelector('#time').innerHTML = xhr.responseText;
}
}
xhr.send();
});
</script>
time.php
<?php
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone("asia/seoul"));
echo $d1->format('H:i:s');
?>
ref.
ajax - 생활코딩 (opentutorials.org)
ajax - 생활코딩
ajax란? Asynchronous JavaScript and XML 의 약자 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. 이 때 XML을 이용한다. 꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다. 비
opentutorials.org
Ajax - 생활코딩 (opentutorials.org)
Ajax - 생활코딩
Ajax 웹브라우저는 대단히 정적인 시스템이었다. 내용이 바뀌면 페이지 새로고침을 해서 내용을 새롭게 변경해야 했다. 이것은 웹이 전자 문서를 염두에 두고 고안된 시스템이기 때문에 당연하
opentutorials.org