Core JavaScript

AJAX Get with Parmeters Example

AJAX is a method for retrieving data from a server without refreshing the web page. Below, we have a simple Get example program to demonstrate how AJAX works when passing a parameter. There are three files below which you can create with a text editor. These files are assumed to be in the same folder on the server.

IMPORTANT: These files must be accessed via a web server. That is, they must be on a server or served by a web server on a local machine. For example, if the files are local the program could be run by entering http://localhost:8080/XoaxGetWithParamAjax.html into the address bar of your browser, if the site is set up to run on port 8080. See our video on how to install and use IIS, if you do not know how to set up a web server.

XoaxGetWithParamAjax.html

<!DOCTYPE html>
<html>
<head>
  <title>XoaX.net's Javascript AJAX Get with a Parameter Example</title>
</head>
<body>
  <script type="text/javascript" src="XoaxGetWithParamAjax.js"></script>

  <div id="XoaxDiv"><p>Fill this with the result of GET with a parameter value on the
  XoaxGetWithParamAjax.php file.</p></div>

  <br />
  <form action="">
    Parameter Value: <input type="text" id="ParamValue">
  </form>
  <br />
  <button type="button" onclick="LoadXoaxAjaxFile(ParamValue.value)">Load
  XoaxGetWithParamAjax.php</button>
</body>
</html>

XoaxGetWithParamAjax.js

function LoadXoaxAjaxFile(sParamValue) {
  var qHttpReq;
  if (window.XMLHttpRequest) {
    qHttpReq=new XMLHttpRequest();
  }
  qHttpReq.onreadystatechange=function(sParamValue) {
    if (qHttpReq.readyState==4 && qHttpReq.status==200) {
      document.getElementById("XoaxDiv").innerHTML=qHttpReq.responseText;
    } else {
      document.getElementById("XoaxDiv").innerHTML="Error";
    }
  }
  qHttpReq.open("GET","XoaxGetWithParamAjax.php?p="+sParamValue, true);
  qHttpReq.send();
}

XoaxGetWithParamAjax.php

<?php

  $sParamValue = $_REQUEST["p"];
  echo "Your parameter value is: ".Sanitize($sParamValue);

  function Sanitize($sString) {
    $sString = strip_tags($sString);
    $sString = htmlentities($sString);
    $sString = stripslashes($sString);
    return $sString;
  }
?>
 
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.