네티즌칼럼

Total article 1133 : 1 page / total 46 page

[1133]

일반 (405)

블록 (84)

코딩 (27)

Subject :

[코딩] [강추] xmlhttp를 사용해 폼 인자 여러개 전달해 비동기 처리 후 받기...

(Homepage) \| Point : 71558 \| 2015-03-09 09:42:03 \| Read : 2,814 \| Vote : 153

JQuery(제이쿼리)를 사용하지 않고 XMLHttpRequest 를 사용해 구현했습니다.<br><br>

[POST 방식 - json1.html]
<pre class="brush: js; first-line: 1" title="json1.html">
&lt;!DOCTYPE html>
&lt;html>
&lt;head>
&lt;script>
function loadXMLDoc()
{
	var xmlhttp;
	var params="str1="+escape("오늘은 2015년 3월 7일입니다!")+"&str2="+escape("시간은 오후 7시 59분입니다!");

if(window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}else{ // code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.open("POST","https://www.blrun.net/eight/study/json_info.php",true);
	//Request에 따라서 적절한 헤더 정보를 보내준다
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlhttp.send(params);

xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			myFunction(xmlhttp.responseText);
		}
	}
}

function myFunction(response) {
	var arr = JSON.parse(response);
	var i;
	var out = "&lt;table>";

for(i = 0; i &lt; arr.length; i++) {
		out += "&lt;tr>&lt;td>" +
		unescape(arr[i].str1) +
		"&lt;/td>&lt;td>" +
		unescape(arr[i].str2) +
		"&lt;/td>&lt;tr>";
	}
	out += "&lt;/table>"
	document.getElementById("myDiv").innerHTML = out;
}
&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;/form>

&lt;/body>
&lt;/html>

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

$arr1=array("AJAX는 새로운 프로그래밍 언어가 아니다.","AJAX는 빠르고 동적인 웹페이지를 만들 수 있는 기술이다.");
$arr2=array($str1,$str2);

$jsontable=array($arr1,$arr2);

$outp = "[";
for($i=0;$i&lt;count($jsontable);$i++) {
    if($outp != "[") {$outp .= ",";}
    $outp .= '{"str1":"'.$jsontable[$i][0].'",';
    $outp .= '"str2":"'.$jsontable[$i][1].'"}'; 
}
$outp .="]";

echo $outp;
?>
</pre>
<br><br>
[실제 동작 - POST 방식]<br>
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
	var xmlhttp;
	var params="str1="+escape("오늘은 2015년 3월 7일입니다!")+"&str2="+escape("시간은 오후 7시 59분입니다!");

xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			myFunction(xmlhttp.responseText);
		}
	}
}

function myFunction(response) {
	var arr = JSON.parse(response);
	var i;
	var out = "<table>";

for(i = 0; i < arr.length; i++) {
		out += "<tr><td>" +
		unescape(arr[i].str1) +
		"</td><td>" +
		unescape(arr[i].str2) +
		"</td><tr>";
	}
	out += "</table>"
	document.getElementById("myDiv").innerHTML = out;
}
</script>
</head>
<body>

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

</body>
</html>

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

216.73.216.107

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

[HOME]

[bitly]