Pages

2006-08-09

AJAX алхам алхамаар

Programer-ууд наашаа. Энэ удаа ердөө амархан. HTML-ын iFrame tag ашиглаад энэ жишээг хийж үзье. Дараах 2 файлыг ажиглаарай. Зарчим нь бол нэг хуудсан дээр hidden iframe байх бөгөөд ямар нэгэн [html – tag -ын] event дээр ажиллах javascript function нь дээрх iframe-ын дотор program бүхий хуудсаа [2 дах файлыг] дуудан top.frames["hiddenFrame"].location = "GetData.php?id=" + sId; ажиллах бөгөөд уг хуудас [GetData.php] ажиллаж дуусаад
divCustomerInfo -ын innertext дээр мөн javascript function ашиглан утга хэвлэж байгаа юм. Энэ бүхний үр дүнд хуудас page refresh хийлгүй javascript event дээр баазаас өгөгдөл шүүн харуулж чадах юм. Энэ жишээг ажиллуулж үзэхийн тулд 2 дах файл дээр байгаа query-ы дагуу MySQL дээр бааз үүсгээрэй. Энэ жишээ AJ буюу XML-гүй жишээ, мөн үнэхээр амархан бөгөөд AJAX-ын анхны алхамд чинь амжилт хүсье.

File 1. index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Hidden IFrame Example 1</title>

<script type="text/javascript">

function requestCustomerInfo() {

var sId = document.getElementById("txtCustomerId").value;

top.frames["hiddenFrame"].location = "GetData.php?id=" + sId;

}


function displayCustomerInfo(sText) {

var divCustomerInfo = document.getElementById("divCustomerInfo");

divCustomerInfo.innerHTML = sText;

}

</script>

</head>

<body>

<p>Enter customer ID number to retrieve information:</p>

<p>Customer ID: <input type="text" id="txtCustomerId" value="" /></p>

<p><input type="button" value="Get Customer Info" onClick="requestCustomerInfo()" /></p>

<div id="divCustomerInfo"></div>

<iframe src="about:blank" name="hiddenFrame" width="0" height="0" frameborder="0"></iframe>

<!- энэ хэсэг бол iframe юм. Энэ хүрээн дотор GetData.php file дуудагдаж буй юм.-->

</body>

</html>


File 2 GetData.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Get Data</title>

<?php

//customer ID

$sID = $_GET["id"];

//variable to hold customer info

$sInfo = "";

//database information MySQL

$sDBServer = "localhost";

$sDBName = "dbname";

$sDBUsername = "root";

$sDBPassword = "";

//create the SQL query string

$sQuery = "Select * from Customers where CustomerId=".$sID;

//make the database connection

$oLink = mysql_connect($sDBServer,$sDBUsername,$sDBPassword);

@mysql_select_db($sDBName) or $sInfo = "Unable to open database";

if($sInfo == '') {

if($oResult = mysql_query($sQuery) and mysql_num_rows($oResult) > 0) {

$aValues = mysql_fetch_array($oResult,MYSQL_ASSOC);

$sInfo = "<img src='../a/images/".$aValues['photo']."' /><br />".

$aValues['Name']."<br />".$aValues['Address']."<br />".

$aValues['City']."<br />".$aValues['State']."<br />".

$aValues['Zip']."<br /><br />Phone: ".$aValues['Phone']."<br />".

"<a href=\"mailto:".$aValues['E-mail']."\">".$aValues['E-mail']."</a>";

} else {

$sInfo = "Customer with ID $sID doesn't exist.";

}

}

mysql_close($oLink);

?>

<script type="text/javascript">

window.onload = function () {

var divInfoToReturn = document.getElementById("divInfoToReturn");

parent.displayCustomerInfo(divInfoToReturn.innerHTML);

};

</script>

</head>

<body>

<div id="divInfoToReturn"><?php echo $sInfo ?></div>

</body>


</html>


Professional Ajax
byNicholas C. Zakas, Jeremy McPeakandJoe Fawcett
Wrox Press 2006
ISBN:0471777781

Post a Comment