p.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <style> a { background-color: #000; color: #fff; margin: 2px; cursor: pointer; } </style> <script> window.onload = function () { document.getElementById("btn1").addEventListener("click", function () { var page = 1; var state = { 'page_id': page, 'user_id': "" } var title = '' var url = 'page.html?page=' + page; history.pushState(state, title, url); // Javascript httpRequest = new XMLHttpRequest(); if (!httpRequest) { alert('XMLHTTP Fail'); return false; } httpRequest.onreadystatechange = function () { if (this.readyState === XMLHttpRequest.DONE) { if (this.status === 200) { document.getElementById("view").innerHTML = this.responseText; } else { alert('Error'); } } }; httpRequest.open('GET', url); httpRequest.send(); }); document.getElementById("btn2").addEventListener("click", function () { var page = 2; var state = { 'page_id': page, 'user_id': "" } var title = '' var url = 'page.html?page=' + page; history.pushState(state, title, url); // JQuery $.ajax({ type: "GET", url: url, success: function (res) { $("#view").html(res); } }); }); } </script></head><body> <a id="btn1">Page 1</a> <a id="btn2">Page 2</a> <div id="view"></div></body></html> |
page.html
1 | <span>Page 입니다</span> |
