<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Cache-Control" content="no-cache"> <title>Example</title> <style> body { font-family: Arial, Helvetica, sans-serif; } pre { font-family: "Lucida Console", Monaco, monospace; } </style> <script defer src="example.js"></script> </head> <body> <noscript>Enable JavaScript to see web page content.</noscript> <h1>AJAX and JSON</h1> <input id="get" type="button" value="GET" /> <input id="post" type="button" value="POST" /> <input id="put" type="button" value="PUT" /> <input id="delete" type="button" value="DELETE" /> <h2>URL</h2> <pre id="url"></pre> <h2>Data</h2> <pre id="data"></pre> <h2>Response</h2> <pre id="response"></pre> </body> </html> // This program demonstrates JavaScript AJAX and JSON. // // References: // https://en.wikibooks.org/wiki/JavaScript // https://jsonplaceholder.typicode.com "use strict"; function User( name=null, username=null, email=null, address=null, phone=null, website=null, company=null) { this.name = name; this.username = username; this.email = email; this.address = address; this.phone = phone; this.website = website; this.company = company; } function Address(street=null, suite=null, city=null, zipcode=null, geolocation=null) { this.street = street; this.suite = suite; this.city = city; this.zipcode = zipcode; this.geo = geolocation; } function Geolocation(latitude=null, longitude=null) { this.lat = latitude; this.lng = longitude; } function Company(name=null, catchPhrase=null, bs=null) { this.name = name; this.catchPhrase = catchPhrase; this.bs = bs; } window.addEventListener("load", function () { document.getElementById("get").addEventListener("focus", getFocus); document.getElementById("post").addEventListener("focus", postFocus); document.getElementById("put").addEventListener("focus", putFocus); document.getElementById("delete").addEventListener("focus", deleteFocus); document.getElementById("get").addEventListener("click", getClick); document.getElementById("post").addEventListener("click", postClick); document.getElementById("put").addEventListener("click", putClick); document.getElementById("delete").addEventListener("click", deleteClick); document.getElementById("get").focus(); }); function createUser() { let user = new User( "John Smith", "jsmith", "jsmith@example.com", null, "123-555-1234"); user.address = new Address( "123 Any Street", "Suite 1", "Anytown", "12345"); user.address.geo = new Geolocation( -40.7831, 73.9712); user.company = new Company( "Dewey, Cheatem & Howe", "Your loss is our gain", "law office") return user; } function deleteClick() { let url = document.getElementById("url").innerText; let request = new XMLHttpRequest(); request.open("DELETE", url); request.onload = function() { document.getElementById("response").innerText = "status: " + request.status + "\n"; document.getElementById("response").innerText += "responseText:\n" + request.responseText; }; request.send(null); } function deleteFocus() { document.getElementById("url").innerText = "https://jsonplaceholder.typicode.com/users/11"; document.getElementById("data").innerText = ""; document.getElementById("response").innerText = ""; } function getClick() { let url = document.getElementById("url").innerText; let request = new XMLHttpRequest(); request.open("GET", url); request.onload = function() { document.getElementById("response").innerText = "status: " + request.status + "\n"; document.getElementById("response").innerText += "responseText:\n" + request.responseText; }; request.send(null); } function getFocus() { document.getElementById("url").innerText = "https://jsonplaceholder.typicode.com/users/1"; document.getElementById("data").innerText = ""; document.getElementById("response").innerText = ""; } function postClick() { let url = document.getElementById("url").innerText; let data = document.getElementById("data").innerText; let request = new XMLHttpRequest(); request.open("POST", url, true); request.setRequestHeader("Content-Type", "application/json"); request.onreadystatechange = function() { document.getElementById("response").innerText = "status: " + request.status + "\n"; document.getElementById("response").innerText += "responseText:\n" + request.responseText; }; request.send(data); } function postFocus() { document.getElementById("url").innerText = "https://jsonplaceholder.typicode.com/users"; let user = createUser(); document.getElementById("data").innerText = JSON.stringify(user, null, 2); document.getElementById("response").innerText = ""; } function putClick() { let url = document.getElementById("url").innerText; let data = document.getElementById("data").innerText; let request = new XMLHttpRequest(); request.open("PUT", url, true); request.setRequestHeader("Content-Type", "application/json"); request.onreadystatechange = function() { document.getElementById("response").innerText = "status: " + request.status + "\n"; document.getElementById("response").innerText += "responseText:\n" + request.responseText; }; request.send(data); } function putFocus() { document.getElementById("url").innerText = "https://jsonplaceholder.typicode.com/users/11"; let user = { id: 11, website: "https://example.com" }; document.getElementById("data").innerText = JSON.stringify(user, null, 2); document.getElementById("response").innerText = ""; } 
