Home/ Questions/Q 8971537
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T17:58:56+00:00

I’m working with Tizag tutorials here and here . I have modified the code

  • 0

I’m working with Tizag tutorials here and here. I have modified the code a tiny bit, as follows:

order.html:

<html>
<body>
<script type="text/javascript">
<!-- 
function createRequest() {
    try {
      request = new XMLHttpRequest();
      //alert("Request is XMLHttp");
    } catch (tryMS) {
      try {
        request = new ActiveXObject("Msxml2.XMLHTTP");
        //alert("Request is ActiveX1");
      } catch (otherMS) {
        try {
          request = new ActiveXObject("Microsoft.XMLHTTP");
          //alert("Request is ActiveX2");
        } catch (failed) {
          request = null;
        }
      }
    }
    return request;
  }
function ajax1(){
    ajaxRequest = createRequest();
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            //alert("Request.readyState is 4");
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var age = document.getElementById('age').value;
    var wpm = document.getElementById('wpm').value;
    var sex = document.getElementById('sex').value;
    var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
    ajaxRequest.open("GET", "ajaxEx1.php" + queryString, true);
    ajaxRequest.send(null); 
}
//-->
</script>

<form name='myForm'>
Max Age: <input type='text' id='age' /> <br />
Max WPM: <input type='text' id='wpm' />
<br />
Sex: <select id='sex'>
<option>m</option>
<option>f</option>
</select>
<input type='button' onclick='ajax1()' value='Query MySQL' />
</form>
<div id='ajaxDiv'>Your result will display here</div>
</body>
</html>

And the page that’s called, ajaxEx1.php:

<?php
$dbhost = "localhost";
$dbuser = "admin";
$dbpass = "abcd";
$dbname = "test01";
mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($dbname) or die(mysql_error());
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
$query = "SELECT * FROM ajax_example WHERE ae_sex = '$sex'";
if(is_numeric($age))
    $query .= " AND ae_age <= $age";
if(is_numeric($wpm))
    $query .= " AND ae_wpm <= $wpm";
    //Execute query
$qry_result = mysql_query($query) or die(mysql_error());
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Name</th>";
$display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>";
$display_string .= "<th>WPM</th>";
$display_string .= "</tr>";
while($row = mysql_fetch_array($qry_result)){
    $display_string .= "<tr>";
    $display_string .= "<td>$row[ae_name]</td>";
    $display_string .= "<td>$row[ae_age]</td>";
    $display_string .= "<td>$row[ae_sex]</td>";
    $display_string .= "<td>$row[ae_wpm]</td>";
    $display_string .= "</tr>";
}
echo "Query: " . $query . "<br />";
$display_string .= "</table>";
echo $display_string;
?>

This works fine and is pretty straightforward. However, I note that in this example the query is essentially requested by Javascript in what would be considered a View element in an MVC pattern. Would that still be good practice in an actual MVC site? Would the View send some parameters to a file that would either run the query itself or pass it to a DAO and receive the response?

If not, if the above was a piece of an MVC site, how would the Ajax portion would need to be reorganized?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In MVC, you normally post to a controller which construct the model that is passed to the view to display.

    You are using AJAX calls to update parts of your view dynamically without reloading the complete view. It is is completely fine to construct your query inside your JavaScript code. If you’re concerned about separating model and view code, you may want to look at KnockoutJS for client side (JavaScript) MVVM pattern implementation.

    • 0