Geek asks and answers

Ajax search not working and XML already running?

I am new to Ajax, I tried the tutorial but it did not work. The code is for searching.

This is script search.htm

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX + MySQL I</title>
<script type="text/javascript" src="search.js"></script>
</head>

<body onload='process()'>

<h1>Student Search</h1>

<form name="form1">
Masukkan Nama Mahasiswa: <input type="text" id="namaMhs" />
</form>

<p><strong>Hasil Pencarian :</strong></p>

<div id="hasil" />

</body>
</html>

and JS script search.js

var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject()
{
    var xmlHttp;
    if(window.ActiveXObject)
    {
       try
       {
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
       }
       catch (e)
       {
          xmlHttp = false;
       }
    }
else
{
    try
    {
       xmlHttp = new XMLHttpRequest();
    }
    catch (e)
    {
         xmlHttp = false;
    }
}

if (!xmlHttp) alert("Obyek XMLHttpRequest tidak dapat dibuat");
else
return xmlHttp;
}

function process()
{
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
    {
       nama = 
          encodeURIComponent(document.getElementById("namaMhs").value);
       xmlHttp.open("GET", "search.php?namaMhs=" + nama, true);
       xmlHttp.onreadystatechange = handleServerResponse;
       xmlHttp.send(null);
    }
    else
    setTimeout('process()', 1000);
}

function handleServerResponse()
{
    if (xmlHttp.readyState == 4)
    {
       if (xmlHttp.status == 200)
       {
          var xmlResponse = xmlHttp.responseXML;
              xmlRoot = xmlResponse.documentElement;

              nimArray = xmlRoot.getElementsByTagName("nim");
              namaMhsArray = xmlRoot.getElementsByTagName("namamhs");
          alamatArray = xmlRoot.getElementsByTagName("alamat");

          if (nimArray.length == 0)
          {
             html = "Data tidak ditemukan";
          }
          else
          {

  // membentuk tabel untuk menampilkan hasil pencarian

          html = "<table border='1'><tr><th>NIM</th><th>Nama 
                      Mhs</th><th>Alamat</th></tr>";

          for (var i=0; i<nimArray.length; i++)
          {
               html += "<tr><td>" + nimArray.item(i).firstChild.data +
                            "</td><td>" +
                          namaMhsArray.item(i).firstChild.data + 
                            "</td><td>" + 
                      alamatArray.item(i).firstChild.data + 
                            "</td></tr>";
          }
          html = html + "</table>";
          }

          document.getElementById("hasil").innerHTML = html;
              setTimeout('process()', 1000);
       }
       else
       {
          alert("Ada masalah dalam mengakses server: " +
          xmlHttp.statusText);
       }
    }
}

and the last script in php search.php

<?php
header('Content-Type: text/xml');
echo '<hasil>';
$namaMhs = $_GET['namaMhs'];
mysql_connect("localhost","root","*******");
mysql_select_db("mahasiswa");
$query = "SELECT * FROM mhs WHERE namamhs LIKE '%$namaMhs%'";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
   echo "<mhs>";
   echo "<nim>".$data['NIM']."</nim>";
   echo "<namamhs>".$data['NAMAMHS']."</namamhs>";
   echo "<alamat>".$data['ALAMAT']."</alamat>";
   echo "</mhs>";
}
echo '</hasil>';
?>

Please help me fix this script. The XML on search.php is already running, but my search is not. Any help is appreciated.

+3
source share
1 answer

You send the script to load before the text field has a value:

<body onload='process()'>

<h1>Student Search</h1>

<form name="form1">
Masukkan Nama Mahasiswa: <input type="text" id="namaMhs" />
</form>

You should either add a value to the text field as such:

<input type="text" value="testname" id="namaMhs" />

Or as a better option, add a submit button and do not run the function at boot time, but rather send:

<body>
       <h1>Student Search</h1>

        <form name="form1">
        Masukkan Nama Mahasiswa: <input type="text" id="namaMhs" />
    <input type="button" value="Search" onclick="process();" />
        </form>

, , .

+1

More articles:


All Articles