//ajax.htm


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
</head>

<body>

<h2>Ajax Example</h2>
<input id="input1" type="text" value="ajax1"></input>
<button id="do_ajax" onclick="doajax();">Do Ajax</button>
<p id="status">Ready</p>
<p id="result">Result</p>

<script>
function doajax(){
    var xhr = new XMLHttpRequest();

    //콜백함수
    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {           
            document.getElementById("status").innerHTML = "Succeeded!";
            document.getElementById("result").innerHTML = this.responseText;
            console.log("성공 ", this.responseText);
            obj = JSON.parse(this.responseText);
            console.log(obj.name , obj.time);
           
        }else{
            console.log("상태 = ", this.readyState , this.status);
        }
    };
       
    var str = document.getElementById("input1").value;
    var json_data = JSON.stringify({ "id1": str });

    //GET
    /*xhr.open("GET", "server.php?q=" + json_data, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send();*/

    //POST
    xhr.open("POST", "server.php", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send("q=" + json_data);

};
/*
"Content-Type"
    "application/json"
    "text/plain;charset=UTF-8"
    'application/x-www-form-urlencoded; charset=ISO-8859-1'
    "application/x-www-form-urlencoded; charset=UTF-8."
    'text/plain; charset=ISO-8859-1'
*/

/*
readyState    
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

status    
200: "OK"
404: Page not found
*/
</script>

</body>
</html>



//================================

//server.php

<?php
//header("Content-Type: application/json; charset=UTF-8");
error_reporting(0);

$rt = $_REQUEST['q'];
$gt = $_GET['q'];
$pt = $_POST['q'];

//echo "서버 응답: "."REQ=[".$rt."] , "."GET=[".$gt."] , "."POST=[".$pt."] "."id2=[".$id2."]";

$jq = json_decode($pt);
$id1 = $jq->id1;
$id2 = $id1."-2";
echo json_encode(array("name"=>$id2, "time"=>"2pm"));

?>



반응형

'Code > JavaScript' 카테고리의 다른 글

[jQuery] 체크박스 사용법(셀렉터)  (0) 2018.12.20
[jQuery] Ajax  (0) 2018.12.14
[JavaScript] jQuery 나라별 언어 국제화 방법  (0) 2018.11.27
[W3School] jQuery 정리  (0) 2018.11.07
[W3Schools] JavaScript 정리  (0) 2018.11.07
Posted by codens