네티즌칼럼

Total article 1116 : 1 page / total 45 page

[1116]

일반 (392)

블록 (81)

코딩 (27)

Subject :

[코딩] [강추] 이번엔 AJAX를 JQuery 사용해 간단한 예제 2개로 만들어 봤습니다.

(Homepage) \| Point : 66370 \| 2015-03-09 07:11:48 \| Read : 3,891 \| Vote : 50

jquery-1.7.1.min.js 라이브러리를 사용해 JQuery로 AJAX를 구현해 봤습니다. jquery1.html과 jquery2.html은 euc-kr 로 인코딩된 문서이고 서버측 문서 jquery_info.php은 UTF-8로 인코딩 된 문서입니다. 그래서 한글로 된 값을 전달할 때 escape, 다시 비동기로 출력된 한글은 unescape를 사용해 한글이 깨지지 않도록 해주고 있습니다. ^^;
<br><br>
[GET 방식 - jquery1.html]
<pre class="brush: js; first-line: 1" title="jquery1.html">
&lt;!DOCTYPE html>
&lt;html>
&lt;head>
&lt;SCRIPT type="text/javascript" src="https://www.blrun.net/bbs/syntaxhighlighter/scripts/jquery-1.7.1.min.js">&lt;/SCRIPT>
&lt;script type="text/javascript">
function loadXMLDoc(){
	$.ajax({
		url: "https://www.blrun.net/eight/study/jquery_info.php",
		type: "get",
		dataType: "html",
		data: {"str" : escape("오늘은 2015년 3월 7일입니다!")},
		success: function(returnData){
			$("#myDiv").html(unescape(returnData));
		}
	});
}
&lt;/script>
&lt;/head>
&lt;body>

&lt;div id="myDiv">&lt;h2>AJAX로 이 문장을 화면 깜빡임 없이 바꿔보자!&lt;/h2>&lt;/div>
&lt;button type="button" onclick="loadXMLDoc()">Change Content&lt;/button>

&lt;/body>
&lt;/html>
</pre>
<br><br>
[POST 방식 - jquery2.html]
<pre class="brush: js; first-line: 1" title="jquery2.html">
&lt;!DOCTYPE html>
&lt;html>
&lt;head>
&lt;SCRIPT type="text/javascript" src="https://www.blrun.net/bbs/syntaxhighlighter/scripts/jquery-1.7.1.min.js">&lt;/SCRIPT>
&lt;script type="text/javascript">
function loadXMLDoc(){
	$.ajax({
		url: "https://www.blrun.net/eight/study/jquery_info.php",
		type: "post",
		dataType: "html",
		data: {"str" : escape("오늘은 2015년 3월 7일입니다!")},
		success: function(returnData){
			$("#myDiv").html(unescape(returnData));
		}
	});
}
&lt;/script>
&lt;/head>
&lt;body>

&lt;div id="myDiv">&lt;h2>AJAX로 이 문장을 화면 깜빡임 없이 바꿔보자!&lt;/h2>&lt;/div>
&lt;button type="button" onclick="loadXMLDoc()">Change Content&lt;/button>

&lt;/body>
&lt;/html>
</pre>
<br><br>
[서버측 - jquery_info.php]
<pre class="brush: php; html_script: true; first-line: 1" title="jquery_info.php">
&lt;?
header("Content-Type: application/javascript; charset=utf-8");

echo "AJAX는 새로운 프로그래밍 언어가 아니다.&lt;br>&lt;br>";
echo "AJAX는 빠르고 동적인 웹페이지를 만들 수 있는 기술이다.&lt;br>&lt;br>";
echo $str."&lt;br>&lt;br>";
?>
</pre>
<br><br>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(){
	$.ajax({
		url: "https://www.blrun.net/eight/study/jquery_info.php",
		type: "get",
		dataType: "html",
		data: {"str" : escape("오늘은 2015년 3월 7일입니다!")},
		success: function(returnData){
			$("#myDiv").html(unescape(returnData));
		}
	});
}

function loadXMLDoc2(){
	$.ajax({
		url: "https://www.blrun.net/eight/study/jquery_info.php",
		type: "post",
		dataType: "html",
		data: {"str" : escape("오늘은 2015년 3월 7일입니다!")},
		success: function(returnData){
			$("#myDiv2").html(unescape(returnData));
		}
	});
}
</script>
</head>
<body>
[실제동작 - GET 방식]<br>
<div id="myDiv"><h2>AJAX로 이 문장을 화면 깜빡임 없이 바꿔보자!</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button><br><br>
[실제동작 - POST 방식]<br>
<div id="myDiv2"><h2>AJAX로 이 문장을 화면 깜빡임 없이 바꿔보자!</h2></div>
<button type="button" onclick="loadXMLDoc2()">Change Content</button>

</body>
</html>

* 관리자님에 의해서 게시물이 이동되었습니다 (2015-06-06 11:16)

3.14.130.24

http://run.blrun.net/
http://www.ntzn.net/
http://www.blrun.net/eight
http://삼성산뜨란채.kr

[HOME]

[bitly]