projects / blog.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: bc1733b)
Upgrade AJAX example to work with content served as application/xhtml+xml.
authorW. Trevor King <wking@drexel.edu>
Thu, 14 Oct 2010 01:42:14 +0000 (21:42 -0400)
committerW. Trevor King <wking@drexel.edu>
Thu, 14 Oct 2010 01:42:14 +0000 (21:42 -0400)
posts/AJAX/example.html patch | blob | history
posts/AJAX/lookup.php patch | blob | history

diff --git a/posts/AJAX/example.html b/posts/AJAX/example.html
index d69980b7cf34592aa1dcef63b37a7bc1e269ce27..3dab3313418c1055550657979d50343bc9156f2b 100644 (file)
--- a/posts/AJAX/example.html
+++ b/posts/AJAX/example.html
@@ -3,12 +3,20 @@
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<script language="javascript" type="text/javascript">
+    <title>AJAX example</title>
+<script type="text/javascript">
+var httpObject = getHTTPObject();
+
 function getWord() {
   return document.getElementById('word').value;
 }
 function setDef(text) {
-  document.getElementById('def').innerHTML = text;
+  /* HTML way */
+  /* document.getElementById('def').innerHTML = text; */
+  /* XHTML way */
+  var text_node = document.createTextNode(text);
+  var p = document.getElementById('def');
+  p.replaceChild(text_node, p.childNodes[0]);
 }
 function getHTTPObject() {
   if (window.ActiveXObject)
@@ -21,18 +29,19 @@ function getHTTPObject() {
   }
 }
 function doAJAX() {
-  httpObject = getHTTPObject();
   if (httpObject != null) {
     httpObject.open("GET", "lookup.php?word=" + getWord(), true);
-    httpObject.send(null); // request is on it's way...
-    setDef("Sent request for" + getWord());
-    // here's the asynchronous read:
+    httpObject.send(null); /* request is on it's way... */
+    setDef("Sent request for " + getWord());
+    /* here's the asynchronous read: */
     httpObject.onreadystatechange = function() { respondAJAX(); }
   }
 }
 function respondAJAX(){
   if(httpObject.readyState == 4) {
-    setDef(httpObject.responseText);
+    var $xml = httpObject.responseXML;
+    var $text = $xml.getElementsByTagName('result')[0].childNodes[0].nodeValue;
+    setDef($text);
   }
 }
 </script>
@@ -40,10 +49,10 @@ function respondAJAX(){
 <body>
   <form action="never_call_this_invalid_page.html" method="get">
     <p>
-      Word: <input type="text" name="word" id="word" onBlur="doAJAX();"/><br />
-      <input type="submit" value="Submit" />
+      Word: <input type="text" name="word" id="word" onblur="doAJAX();"/><br />
+      Click somewhere else to lookup word.
     </p>
-    <div name="def" id="def"></div>
+    <p id="def"> </p>
   </form>
 </body>
 </html>
diff --git a/posts/AJAX/lookup.php b/posts/AJAX/lookup.php
index e8c04728240ec9b966a238e5b47a0590b0face0f..9f6e13de76d673bf516e4b70e28dc6ce3837022b 100644 (file)
--- a/posts/AJAX/lookup.php
+++ b/posts/AJAX/lookup.php
@@ -10,14 +10,16 @@ $f = simplexml_load_file('data.xml');
 foreach ($f as $entry) {
   if ($entry->word == $word) {
     $ret .= '<result>'.$entry->definition.'</result>';
-    // this doesn't even have to be XML, but for official "AJAX"
+    // this doesn't even have to be XML, but we're doing official "AJAX"
     break;
   }
 }
 if (strlen($ret) == 0) {
   $ret .= '<result>'.$word.' not found</result>';
 }
-echo '<?xml version="1.0" encoding="UTF-8" ?>';
+
+header("Content-Type: text/xml; charset=UTF-8");
+echo '<'.'?xml version="1.0" encoding="UTF-8" ?'.">\n";
 echo $ret;
 
 ?>
"unfolding disasters" ikiwiki blog.