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

5 comments:

Эрин М.Тулгат said...

Bi uuruu yag programyin hun bish bolohoor nariin shiriin code ene teriig oilgohgui yum. Gehdee AJAX gej shine yum garch ireed anhaaral tataj baigaag duulj baina. Ingehed engiin humuust (programyin mergejliin bus) zoriulj AJAX-iin bolomj, ireeduin tuhai bichvel sonirholtoi bolov uu gej bodloo.

Unknown said...

Сайн уу.
Коммент үлдээсэнд баярлалаа.
Шинэ Нострадамус гэдэг нэг энтри бичиж байгаа. Мэргэжлээ зөгнөх байдлаар бичиж үзсэн нилээн гоё болгож байгаад удахгүй түгээхийг хичээнээ. Тэнд AJAX-ын боломжын талаар, компъютер гээч хэрхэн сөнөх талаар бичиж буй.
[За ингээд хүлээлт үүсгэчихлээ. Давуулахгүй бол шууд онигоо болох байх даа. к к ]

Эрхэмээ said...

Yag uhaad ehlesen chini AJAX gaigui bolchmoor l ed bn shuu.. Web 2.0 + AJAX hiigeed ehleheer website ih chamin bolj bgaama. Udahgui Application shig l web site-uud ih bolohneedee. AJAX web development-d shine erin ue-iig duudaj bndaa gej

Unknown said...

Ymarch bsan yum hiij bsan humuust bol AJAX- tiim aimaar yum bishee. Harin gunzgiireed XPath ene ter deeree ochood nileen chadwar shaardah yum bilee. Gobi ax neg dajgui entry bichsen bna lee. orood sonirhooroi...

Anonymous said...

Database bichdeg humuus web tehnology oilogoggui