TYPE html> Test AJAX/PHP

Save Movie Info

// Step 1: Create object var xhttp = new XMLHttpRequest(); // Create the xhttp object // Step 2: Setup an onreadystatechange function for the XMLHttpRequest object // This is actually run after send is done and the server spits out info. xhttp.onreadystatechange = function() { // Confirm we have a successful connection. Then, receive the response info. // For PHP it is echo that sends it. // Loops seem to cause this to wait which means an array can be traversed // and the output could be written as a table, etc. if (this.readyState == 4 && this.status == 200) { // do something with the returned data } }; // Step 3: Open connection // More or less, open a connection: @Params POST or GET, path to XML page or php script, set async t/f xhttp.open("GET", "process.php", true); // Step 4: Send the data and let server process it. // After done processing it, onreadystatechange is triggered. xhttp.send(); // Start the process and send GET data // For POST do and add these changes // xhttp.open("POST", "process.php", true); // Used in POST to setup data types like JSON, XML, etc... MUST BE DONE AFTER OPEN // xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Example data structure for Sending POST with above RequestHeader. See that this mimics GET // xhttp.send("fname=Henry&lname=Ford"); // xhttp.sebnd(formData); // Can use a string variable with formatted data structure instead

Search Movie Info

function getData(query) { if (query == "") { document.getElementById("dynDataField").innerHTML = "

"; return; } else { var xhttp = new XMLHttpRequest(); // Create the xhttp object var formData = "dbQuery=" + query; // Our query being setup for processing // This is actually run after open and send are done xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { updatePage(this); // Send the returned data to further process } }; xhttp.open("POST", "process.php", true); // Open the connection xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send(formData); // Start the process } } function updatePage(returnData) { // Get the echoed data and insert to div of dynDataField document.getElementById("dynDataField").innerHTML = returnData.responseText; } OK, so we have two functions here. One is for getting the data and the other inserts the results into our div. Get data checks to see if the input field is empty and if so leaves things as they are. If there is data in the field, it is then inserted into a variable ?formData? and tied in with ?dbQuery=?. This is what PHP will look at and use to insert into a database query. We then setup a statechange listener to wait for the server to finish processing the search and we send the result to the other function. After this setup part, we do the standard open process but use POST instead of GET. Then, we tell the server what kind of data this is. Recall, GET defines it for us but is limited and less secure while POST has more data formats and better security but we have to define it using the setrequestheader. We then send the data in its formatted string to the server for processing. This w3schools link has some more info about each part. In this instance, the PHP script transfers a string back to the requester. Note, we can transfer JSON, XML, and other data. But, a string or ?responseText? is good for now.

Error! Illegal Access Method!"; } ?> try { $serverPDO = new SQLite3('resources/server.db'); $query = "SELECT * FROM Movies WHERE title LIKE '%" . $QUERY . "%' OR " . "date LIKE '%" . $QUERY . "%' OR " . "link LIKE '%" . $QUERY . "%'"; $result = $serverPDO->query($query); while ($row = $result->fetchArray()) { echo "
" . "" . "
" . "Title: " . $row["title"] . "
Date: " . $row["date"] . "
"; } if ($result->fetchArray() == 0) { echo "
Nothing Found...
"; } else { echo "
Search Completed...
"; } } catch (Exception $e) { echo "

Error!


" . $e; } if ($TITLE != "" && $DATE != "" && $INFOLINK != "") { try { $serverPDO = new SQLite3('resources/server.db'); $command = "INSERT INTO Movies VALUES('" . $TITLE . "','" . $DATE . "','" . $INFOLINK . "')"; $serverPDO->exec($command); echo "

Inserted to db...


" . "Title: " . $TITLE . "
Date: " . $DATE . "
Link: " . $INFOLINK; } catch (Exception $e) { echo "

Error! Database Insert Failed...


" . $e; } } else { echo "

Error!


" . "

A field is empty...

" . $e; }