13장 ajax wiki 관련 자료입니다.
15 views
Skip to first unread message
베시시
Nov 9, 2011, 8:40:54 PM11/9/11
to IBKSYSTEM
13장을 맏게 된 vesisi 입니다.
http://vesisi.com/0.php 에 보시면 (홈피자랑)
13장에 대한 내용이 있습니다.
익스플러에서만 됩니다.
그리고.. 한글도 안되고
json 도 php로 작동이 안되.. get방식으로 건건이 던졌습니다.
아울러 .. 아래는 소스 입니다.
스터디 시간에 소스를 출력해섯 각자 준비 해서 오시면 되겠습니다.
감사합니다.
============0.php============
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiiv="content-Type" content="text/html" charset="uft-8">
</HEAD>
<BODY>
한글
<TABLE border =1>
<?php
echo "<TR><TD>";
require_once('1.html');
echo "</TD></TR>";
echo "<TR><TD>";
require_once('2.html');
echo "</TD></TR>";
?>
</TABLE>
</BODY>
</HTML>
============1.html============
1.HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiiv="content-Type" content="text/html" charset="uft-8">
</HEAD>
<BODY>
<form name="FRM" method='POST' action="#">
<input type="hidden" name="NAME" value="vesisi"/>
<input type="hidden" name="MODE" value=""/>
<TABLE>
<TR>
<TD>
<textarea name="CONTENTS" style="width:330px;height:
50px;overflow:visible;">
</textarea>
<input type="BUTTON" value="등록" onclick="istgo(1)"/>
<input type="BUTTON" value="DEL" onclick="istgo(2)"/>
</TD>
</TR>
</TABLE>
</form>
<script language="javascript">
<!--
function istgo(dos){
if (dos ==1) {
document.FRM.MODE.value = 'INSERT';
}else if (dos ==2){
document.FRM.MODE.value = 'DELETE';
}
var dos1 = document.FRM.NAME.value;
var dos2 = document.FRM.CONTENTS.value;
var dos3 = document.FRM.MODE.value;
istgogo(dos1,dos2,dos3);
}
-->
</script>
</BODY>
</HTML>
============2.html============
2.HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiiv="content-Type" content="text/html" charset="uft-8">
<script type="text/javascript" src="json2.js"></script>
<script language="javascript">
<!--
function istgogo(dos1,dos2,dos3){
var dos = get_contents(dos1,dos2,dos3);
//alert(dos);
doJSON( dos );
}
function get_contents(dos1,dos2,dos3) {
return new data_contents(dos1,dos2,dos3);
}
function data_contents(name, contents ,mode) {
this.name = name;
this.contents = contents;
this.mode = mode;
}
-->
</script>
<script type="text/javascript">
var xmlHttp = null;
function createXMLHttpRequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doJSON(dos) {
var AsJSON = JSON.stringify(dos);
//var url = "3.php";
var pname = document.getElementById("NAME").value;
var pmode = document.getElementById("MODE").value;
var pcontents = document.getElementById("CONTENTS").value;
var url = "3.php?name="+pname+"&mode="+pmode+"&contents="+pcontents;
createXMLHttpRequest();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-
urlencoded");
xmlHttp.send(AsJSON);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
//parseResults();
ocument.getElementById("serverResponse").innerHTML =
xmlHttp.responseText;
/*
childNodes : 현재 요소의 자식을 배열로 표현한다.
firstChild : 현재 요소의 첫번째 자식이다.
lastChild : 현재 요소의 마지막 자식이다.
nextSibling : 현재 요소와 바로 다음의 요소를 의미한다.
nodeValue : 해당 요소의 값을 읽고 쓸 수 있는 속성을 정의한다.(=data)
parentNode : 해당 요소의 부모노드이다.
previousSibling : 현재 요소와 바로 이전의 요소를 의미한다.
다음은 XML 다큐먼트를 다루는 유용한 DOM 요소의 메소드를 살펴보자.
getElementById(id) : 다큐먼트에서 특정한 id 속성값을 가지고 있는 요소를 반환한다.
getElementsByTagName(name) : 특정한 태그 이름을 가지고 있는 자식 요소로 구성된 배열을 리턴한다.
hasChildNodes() : 해당 요소가 자식 요소를 포함하고 있는지를 나타내는 Boolean 값을 리턴한다.
getAttribute(name) : 특정한 name 에 해당하는 요소의 속성값을 리턴한다.
*/
}
}
}
function parseResults() {
var responseDiv = document.getElementById("serverResponse");
if(responseDiv.hasChildNodes()) {
responseDiv.removeChild(responseDiv.childNodes[0]);
}
var responseText = document.createTextNode(xmlHttp.responseText);
responseDiv.appendChild(responseText);
}
</script>
</HEAD>
<BODY>
<div id="serverResponse"></div>
</BODY>
</HTML>
============3.php============
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiiv="content-Type" content="text/html" charset="uft-8">
</HEAD>
<BODY>
<?php
//require_once("JSON.php");
//$json = new Services_JSON();
//$data_contents = Array();
//$output = $json->encode($data_contents ,true);
//$output = $json->decode($data_contents,true);
//echo "<BR>output>>>>>>>>>".$output;
//echo "<BR>>>>>>>>>>>>>>>>";
//echo "<BR><BR> ";
$pname = $_GET[name]; // 파라미터받아오기
$pmode = $_GET[mode]; // 파라미터받아오기
$pcontents = $_GET[contents]; // 파라미터받아오기
echo "<BR>".$pname;
echo "<BR>".$pcontents;
echo "<BR>".$pmode;
$dbname = "디비네임";
$connect = mysql_connect("DB서버주소","접속아이디","접속비번"); // DB 연결
mysql_select_db($dbname, $connect); // DB 선택
if ($pmode=="INSERT"){
$sql = "INSERT INTO `vesisi`.`bukzi` ( `SEQ` , `NAME` , `MODE` ,
`CONTENTS`) VALUES ";
$sql.= " (NULL , '$pname', '$pmode', '$pcontents') ";
}else if ($pmode=="DELETE"){
//$sql = "DELETE FROM `test1`";
$sql = "DELETE FROM `vesisi`.`bukzi` ";
}
$result = mysql_query($sql, $connect);
// 결론은 SELECT
echo "<TABLE border=1> ";
$sql = "SELECT SEQ ,NAME ,MODE ,CONTENTS FROM `vesisi`.`bukzi`
WHERE 1 LIMIT 0 , 30 ";
//mysql_query("SET NAMES UFT8");
$result = mysql_query($sql, $connect);
$result_array = array();
$count = 1;
if($result >0 ){
while ($row=mysql_fetch_array($result)){
$result_array[] = $row ;
$avg=round($row[avg], 1);
echo " <TR>";
echo "<TD>$count </TD><TD> $row[NAME] </TD><TD> $row[MODE] </
TD><TD> $row[CONTENTS] </TD>";
echo " </TR>";
$count++;
}
}
echo " </TABLE> ";
//echo "<BR><BR><BR><BR><BR><BR> ";
//echo json_encode($result_array);
//echo "END";
?>
</BODY>
</HTML>
유용한 정보 : http://blog.naver.com/jinoxst/140021574045
http://vesisi.com/0.php 에 보시면 (홈피자랑)
13장에 대한 내용이 있습니다.
익스플러에서만 됩니다.
그리고.. 한글도 안되고
json 도 php로 작동이 안되.. get방식으로 건건이 던졌습니다.
아울러 .. 아래는 소스 입니다.
스터디 시간에 소스를 출력해섯 각자 준비 해서 오시면 되겠습니다.
감사합니다.
============0.php============
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiiv="content-Type" content="text/html" charset="uft-8">
</HEAD>
<BODY>
한글
<TABLE border =1>
<?php
echo "<TR><TD>";
require_once('1.html');
echo "</TD></TR>";
echo "<TR><TD>";
require_once('2.html');
echo "</TD></TR>";
?>
</TABLE>
</BODY>
</HTML>
============1.html============
1.HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiiv="content-Type" content="text/html" charset="uft-8">
</HEAD>
<BODY>
<form name="FRM" method='POST' action="#">
<input type="hidden" name="NAME" value="vesisi"/>
<input type="hidden" name="MODE" value=""/>
<TABLE>
<TR>
<TD>
<textarea name="CONTENTS" style="width:330px;height:
50px;overflow:visible;">
</textarea>
<input type="BUTTON" value="등록" onclick="istgo(1)"/>
<input type="BUTTON" value="DEL" onclick="istgo(2)"/>
</TD>
</TR>
</TABLE>
</form>
<script language="javascript">
<!--
function istgo(dos){
if (dos ==1) {
document.FRM.MODE.value = 'INSERT';
}else if (dos ==2){
document.FRM.MODE.value = 'DELETE';
}
var dos1 = document.FRM.NAME.value;
var dos2 = document.FRM.CONTENTS.value;
var dos3 = document.FRM.MODE.value;
istgogo(dos1,dos2,dos3);
}
-->
</script>
</BODY>
</HTML>
============2.html============
2.HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiiv="content-Type" content="text/html" charset="uft-8">
<script type="text/javascript" src="json2.js"></script>
<script language="javascript">
<!--
function istgogo(dos1,dos2,dos3){
var dos = get_contents(dos1,dos2,dos3);
//alert(dos);
doJSON( dos );
}
function get_contents(dos1,dos2,dos3) {
return new data_contents(dos1,dos2,dos3);
}
function data_contents(name, contents ,mode) {
this.name = name;
this.contents = contents;
this.mode = mode;
}
-->
</script>
<script type="text/javascript">
var xmlHttp = null;
function createXMLHttpRequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doJSON(dos) {
var AsJSON = JSON.stringify(dos);
//var url = "3.php";
var pname = document.getElementById("NAME").value;
var pmode = document.getElementById("MODE").value;
var pcontents = document.getElementById("CONTENTS").value;
var url = "3.php?name="+pname+"&mode="+pmode+"&contents="+pcontents;
createXMLHttpRequest();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-
urlencoded");
xmlHttp.send(AsJSON);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
//parseResults();
ocument.getElementById("serverResponse").innerHTML =
xmlHttp.responseText;
/*
childNodes : 현재 요소의 자식을 배열로 표현한다.
firstChild : 현재 요소의 첫번째 자식이다.
lastChild : 현재 요소의 마지막 자식이다.
nextSibling : 현재 요소와 바로 다음의 요소를 의미한다.
nodeValue : 해당 요소의 값을 읽고 쓸 수 있는 속성을 정의한다.(=data)
parentNode : 해당 요소의 부모노드이다.
previousSibling : 현재 요소와 바로 이전의 요소를 의미한다.
다음은 XML 다큐먼트를 다루는 유용한 DOM 요소의 메소드를 살펴보자.
getElementById(id) : 다큐먼트에서 특정한 id 속성값을 가지고 있는 요소를 반환한다.
getElementsByTagName(name) : 특정한 태그 이름을 가지고 있는 자식 요소로 구성된 배열을 리턴한다.
hasChildNodes() : 해당 요소가 자식 요소를 포함하고 있는지를 나타내는 Boolean 값을 리턴한다.
getAttribute(name) : 특정한 name 에 해당하는 요소의 속성값을 리턴한다.
*/
}
}
}
function parseResults() {
var responseDiv = document.getElementById("serverResponse");
if(responseDiv.hasChildNodes()) {
responseDiv.removeChild(responseDiv.childNodes[0]);
}
var responseText = document.createTextNode(xmlHttp.responseText);
responseDiv.appendChild(responseText);
}
</script>
</HEAD>
<BODY>
<div id="serverResponse"></div>
</BODY>
</HTML>
============3.php============
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiiv="content-Type" content="text/html" charset="uft-8">
</HEAD>
<BODY>
<?php
//require_once("JSON.php");
//$json = new Services_JSON();
//$data_contents = Array();
//$output = $json->encode($data_contents ,true);
//$output = $json->decode($data_contents,true);
//echo "<BR>output>>>>>>>>>".$output;
//echo "<BR>>>>>>>>>>>>>>>>";
//echo "<BR><BR> ";
$pname = $_GET[name]; // 파라미터받아오기
$pmode = $_GET[mode]; // 파라미터받아오기
$pcontents = $_GET[contents]; // 파라미터받아오기
echo "<BR>".$pname;
echo "<BR>".$pcontents;
echo "<BR>".$pmode;
$dbname = "디비네임";
$connect = mysql_connect("DB서버주소","접속아이디","접속비번"); // DB 연결
mysql_select_db($dbname, $connect); // DB 선택
if ($pmode=="INSERT"){
$sql = "INSERT INTO `vesisi`.`bukzi` ( `SEQ` , `NAME` , `MODE` ,
`CONTENTS`) VALUES ";
$sql.= " (NULL , '$pname', '$pmode', '$pcontents') ";
}else if ($pmode=="DELETE"){
//$sql = "DELETE FROM `test1`";
$sql = "DELETE FROM `vesisi`.`bukzi` ";
}
$result = mysql_query($sql, $connect);
// 결론은 SELECT
echo "<TABLE border=1> ";
$sql = "SELECT SEQ ,NAME ,MODE ,CONTENTS FROM `vesisi`.`bukzi`
WHERE 1 LIMIT 0 , 30 ";
//mysql_query("SET NAMES UFT8");
$result = mysql_query($sql, $connect);
$result_array = array();
$count = 1;
if($result >0 ){
while ($row=mysql_fetch_array($result)){
$result_array[] = $row ;
$avg=round($row[avg], 1);
echo " <TR>";
echo "<TD>$count </TD><TD> $row[NAME] </TD><TD> $row[MODE] </
TD><TD> $row[CONTENTS] </TD>";
echo " </TR>";
$count++;
}
}
echo " </TABLE> ";
//echo "<BR><BR><BR><BR><BR><BR> ";
//echo json_encode($result_array);
//echo "END";
?>
</BODY>
</HTML>
유용한 정보 : http://blog.naver.com/jinoxst/140021574045
Reply all
Reply to author
Forward
0 new messages