Implementing Ajax via POST Requests
Type in and save the code in Example 17-2 as urlpost.html, but donât load it into your browser yet.
<html><head><title>Ajax Example</title> </head><body><center /> <h1>Loading a web page into a DIV</h1> <div id='info'>This sentence will be replaced</div> <script> params = "url=oreilly.com" request = new ajaxRequest() request.open("POST", "urlpost.php", true) request.setRequestHeader("Content-type", "application/x-www-form-urlencoded") request.setRequestHeader("Content-length", params.length) request.setRequestHeader("Connection", "close") request.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { if (this.responseText != null) { document.getElementById('info').innerHTML = this.responseText } else alert("Ajax error: No data received") } else alert( "Ajax error: " + this.statusText) } } request.send(params) function ajaxRequest() { try { var request = new XMLHttpRequest() } catch(e1) { try { request = new ActiveXObject("Msxml2.XMLHTTP") } catch(e2) { try { request = new ActiveXObject("Microsoft.XMLHTTP") } catch(e3) { request = false } } } return request } </script></body></html>
Letâs go through this document line by line, and look at what it
does. The first three lines simply set up an HTML document and display a
heading. The next line creates a <div>
with the ID âinfo,â containing the text âThis sentence will be replacedâ by default. Later on, the text returned from the ...
Get Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.