PDA

View Full Version : سوال: Ajax با بیش از 2 خروجی



tehro0n
سه شنبه 09 شهریور 1389, 14:16 عصر
من یکی از کاربردهای ای جکس رو یاد گرفتم ولی نه به صورت کامل. برای مثال ما کدهای زیر رو داریم که از طریق آن متغیری را ارسال به فایل دیگه می کنیم و بر روی آن اعمالی را انجام داده سپس خروجی داخل جدولی نمایش می یابد..!

حالا من می خوام این خروجی همین جوری در جدول نمایش داده نشه و داخل متغیری بریزمش و سپس چاپ کنم، یا این که فرض می گیریم خروجی ما بیش از 2 تا باشه که یا با
xml
یا با علاماتی تعیین شده این خروجی ها رو جدا می کنیم.
اگه میشه این روش رو با استفاده از همین کدی که دادم توضیح بدید.


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
function AjaxRequest() {
try{ var xmlhttp = new XMLHttpRequest(); }
catch(err1)
{
var ieXmlHttpVersions = new Array();
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.7.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.6.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.5.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.4.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.3.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "Microsoft.XMLHttp";

var i;
for (i=0; i < ieXmlHttpVersions.length; i++) {
try
{
var xmlhttp = new ActiveXObject(ieXmlHttpVersions[i]);
break;
}
catch (err2) { return false; }
}
}
return xmlhttp;
}
</script>

<script type="text/javascript">
Search = function load(id) {
var field = document.getElementById("ajaxField").value;
var response = document.getElementById("ajaxResponse");
var xmlHttp = AjaxRequest();
xmlHttp.open("GET" , "Ajax.php?id=" + id, true);
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState == 1)
response.innerHTML = "Loading...";

if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
response.innerHTML = xmlHttp.responseText;
}
xmlHttp.send(null);
}
</script>

</head>

<body>

<?php
$id = 50;
?>

<a id="ajaxField" href="#" onclick='Search(<?php echo $id ?>);'>Search</a>
<!-- ################################################## ################################ -->
<div id="ajaxResponse" style="width:600px; height:360px; margin:0px; padding:0px;">Name = <?php echo $name ?>, Family = <?php echo $family ?>, Tel = <?php echo $tel ?></div>
<!-- ################################################## ################################ -->
</body>

ajax.php فایل


<?php

$id = isset($_GET['id']) ? intval($_GET['id']) : null;

if(!$id) {
print 0;
} else {
require_once("_config.php");
$con = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS);
mysql_select_db(MYSQL_DB, $con);

if (!$con) {
printf("Connect failed: %s\n", mysql_error());
exit();
}

..
..
..

$name = 'asd';
$family = 'dsa';
$tel = 123;
print "$name|$family|$tel";
}
?>

امیـرحسین
سه شنبه 09 شهریور 1389, 21:19 عصر
این از سه روش متفاوت:

روش خودتون:
print "$name|$family|$tel";
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var response = responseText.split("|");
alert("Name: "+response[0]+" "+response[1]+". Tel: "+response[2]);
}
}


روش XML (که البته از کار کردن این نمونه مطمئن نیستم ولی روش همینه):
header('Content-type: text/xml');
echo <<<XML
<?xml version="1.0" ?>
<root>
<name>Amir Hossein</name>
<family>HP</family>
<tel>123</tel>
</root>
XML;
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var root = responseXML.documentElement;
var name = root.getElementsByTagNames('name')[0].firstChild.nodeValue;
var family = root.getElementsByTagNames('family')[0].firstChild.nodeValue;
var tel = root.getElementsByTagNames('tel')[0].firstChild.nodeValue;

alert("Name: "+name+" "+family+". Tel: "+tel);
}
}


روش دوست داشتنی JSON (http://boplo.ir/web-design/what-are-json-and-jsonp/):
echo '{"name":"Amir Hossein","family":"HP","tel":"123"}';
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var data = eval("(" +responseText+ ")");
alert("Name: "+data.name+" "+data.family+". Tel: "+data.tel);
}
}