ajax 공부하기 채택완료

</strong></p>

<div class="w3-code notranslate htmlHigh">ajax_test.html</div>

<div class="w3-code notranslate htmlHigh"><span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue"><</span>!DOCTYPE<span class="attributecolor" style="color:red"> html</span><span class="tagcolor" style="color:mediumblue">></span></span>

<span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue"><</span>html<span class="tagcolor" style="color:mediumblue">></span></span>

<span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue"><</span>body<span class="tagcolor" style="color:mediumblue">></span></span>



<span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue"><</span>div<span class="attributecolor" style="color:red"> id<span class="attributevaluecolor" style="color:mediumblue">="demo"</span></span><span class="tagcolor" style="color:mediumblue">></span></span>

  <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue"><</span>h2<span class="tagcolor" style="color:mediumblue">></span></span>Let AJAX change this text<span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue"><</span>/h2<span class="tagcolor" style="color:mediumblue">></span></span>

  <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue"><</span>button<span class="attributecolor" style="color:red"> type<span class="attributevaluecolor" style="color:mediumblue">="button"</span> onclick<span class="attributevaluecolor" style="color:mediumblue">="loadDoc()"</span></span><span class="tagcolor" style="color:mediumblue">></span></span>Change Content<span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue"><</span>/button<span class="tagcolor" style="color:mediumblue">></span></span>

<span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue"><</span>/div<span class="tagcolor" style="color:mediumblue">></span></span>

<script></div>

<div class="w3-code notranslate htmlHigh"><span class="jscolor" style="color:black"><span class="jskeywordcolor" style="color:mediumblue">function</span> loadDoc() {

  <span class="jskeywordcolor" style="color:mediumblue">var</span> xhttp = <span class="jskeywordcolor" style="color:mediumblue">new</span> XMLHttpRequest();

  xhttp.<span class="jspropertycolor" style="color:black">onreadystatechange</span> = <span class="jskeywordcolor" style="color:mediumblue">function</span>() {

    <span class="jskeywordcolor" style="color:mediumblue">if</span> (<span class="jskeywordcolor" style="color:mediumblue">this</span>.<span class="jspropertycolor" style="color:black">readyState</span> == <span class="jsnumbercolor" style="color:red">4</span> && <span class="jskeywordcolor" style="color:mediumblue">this</span>.<span class="jspropertycolor" style="color:black">status</span> == <span class="jsnumbercolor" style="color:red">200</span>) {

     document.<span class="jspropertycolor" style="color:black">getElementById</span>(<span class="jsstringcolor" style="color:brown">"demo"</span>).<span class="jspropertycolor" style="color:black">innerHTML</span> = <span class="jskeywordcolor" style="color:mediumblue">this</span>.<span class="jspropertycolor" style="color:black">responseText</span>;

    <span class="jsnumbercolor" style="color:red"> </span>}

  };

  xhttp.<span class="jspropertycolor" style="color:black">open</span>(<span class="jsstringcolor" style="color:brown">"GET"</span>, <span class="jsstringcolor" style="color:brown">"ajax_info.php"</span>, <span class="jskeywordcolor" style="color:mediumblue">true</span>);

  xhttp.<span class="jspropertycolor" style="color:black">send</span>();

}</span></div>

<div class="w3-code notranslate htmlHigh"></script>

<span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue"><</span>/body<span class="tagcolor" style="color:mediumblue">></span></span>

<span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue"><</span>/html<span class="tagcolor" style="color:mediumblue">></span></span></div>

<div class="w3-code notranslate htmlHigh"> </div>

<div class="w3-code notranslate htmlHigh"><span class="jscolor" style="color:black"><span class="jsstringcolor" style="color:brown">ajax_info.php</span></span></div>

<div class="w3-code notranslate htmlHigh"><span class="jscolor" style="color:black"><span class="jsstringcolor" style="color:brown"><?php</span></span></div>

<div class="w3-code notranslate htmlHigh">echo "message";</div>

<div class="w3-code notranslate htmlHigh"><span class="jscolor" style="color:black"><span class="jsstringcolor" style="color:brown">?></span></span></div>

<div class="w3-code notranslate htmlHigh"> </div>

<p><strong>