AJAX -

federer_11 · 29 Април 2009

AJAX е тип програмиране станал популярен през 2005-а благодарение на Google Suggest. Той не е нов програмен език, а нов начин за използване на съществуващите стандарти (JavaScript, XML, HTML/XHTML, CSS). С помощта на AJAX можете да създавате по-добри, бързи и потребителски по-дружелюбни уеб-приложения. В основата си е базиран на JavaScript и асинхронни HTTP-заявки с помощта на които може да се комуникира директно със сървъра използвайки XMLHttpRequest-обекта. С този обект вашият скрипт може да обменя малки по обем данни със сървъра, без презареждане на цялата страницата. AJAX е браузърна технология независима от сървърния софтуер, а приложенията му са браузърно и платформено независими.

В традиционното JavaScript кодиране, ако желаете да извлечете информация от база данни или файл на сървъра, или да изпратите потребителска информация на сървъра, то ще трябва да направите HTML-форма и да обмените чрез GET или POST метод данни със сървъра. Потребителя ще трябва да щракне Submit-бутона, да изчака отговорът на сървъра, след което новата страница ще се зареди с резултата. Тъй като сървъра връща нова страница всеки път когато потребителя изпрати данни, традиционните уеб-приложения може да работят бавно и потребителски недружелюбно. Чрез HTTP-заявка, уеб страницата може да направи заявка към и да получи отговор от сървъра без презареждане на страницата. Потребителя остава на същата страница и той/тя няма да забележи че скриптовете заявяват страници или изпращат данни на сървъра.

AJAX техниката се използва като комбинация от:

* XHTML (или HTML) и CSS за форматиране и ошрифтяване на текста.
* DOM (Document Object Model) реализиран чрез програмиране от страна на клиента с помощта на езици като JavaScript и JScript за динамична визуализация и интерактивност на предоставената информация.
* XMLHttpRequest обекта за обмяна на данни асинхронно с уеб сървър. В някои случаи се използва IFrame обекта вместо XMLHttpRequest.
* XML в някои случаи е използвания формат за трансфер на данни между сървър и клиент. Все пак всеки формат е удачен, включително преформатиран HTML, чист текст, JSON и др.

Сам по себе си AJAX не е технология, а термин за употребата на група технологии. За първи път се споменава февруари 2005 г. от Джеси Джеймс Гарет в статията му „Ajax: A New Approach to Web Applications“.

AJAX Browser Support

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
// Mozilla Firefox, Opera 8.0, Safari и други браузъри
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
}
</script>

<form name="myForm">
Name: <input type="text" name="username" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

AJAX Анкета

HTML форма:

Код:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>

<div id="poll">
<h2>Do you like PHP and AJAX so far?</h2>

<form>
Yes: 
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br />No: 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">
</form>
</div>

</body>
</html>

Текстов файл (poll_result.txt), в който ще се записва информацията от гласуването:

Код:

0||0

Javascript файл: poll.js

Код:

var xmlHttp;

function getVote(int)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 } 
var url="poll_vote.php";
url=url+"?vote="+int;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("poll").
 innerHTML=xmlHttp.responseText;
 } 
} 

function GetXmlHttpObject()
{ 
var objXMLHttp=null;
if (window.XMLHttpRequest)
 {
 objXMLHttp=new XMLHttpRequest();
 }
else if (window.ActiveXObject)
 {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
return objXMLHttp;
}

И накрая PHP файлът poll_vote.php:

Код:

<?php
$vote = $_REQUEST['vote'];

//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);

//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];

if ($vote == 0)
 {
 $yes = $yes + 1;
 }
if ($vote == 1)
 {
 $no = $no + 1;
 }

//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>

<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif" 
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>

Пример за AJAX RSS Reader:

HTML форма:

Код:

<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>

<form> 
Select an RSS-Feed:
<select onchange="showRSS(this.value)">
<option value="Google">Google News</option>
<option value="MSNBC">MSNBC News</option>
</select>
</form>

<p><div id="rssOutput">
<b>RSS Feed will be listed here.</b></div></p>
</body>
</html>

JAVASCRIPT файлът ще се казва getrss.js:

Код:

var xmlHttp;

function showRSS(str)
 { 
 xmlHttp=GetXmlHttpObject();
 if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
 var url="getrss.php";
 url=url+"?q="+str;
 url=url+"&sid="+Math.random();
 xmlHttp.onreadystatechange=stateChanged;
 xmlHttp.open("GET",url,true);
 xmlHttp.send(null);
 }

function stateChanged() 
 { 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  { 
  document.getElementById("rssOutput")
  .innerHTML=xmlHttp.responseText;
  } 
 }

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

И накрая getrss.php (това е php файлът)

Код:

<?php
//get the q parameter from URL
$q=$_GET["q"];

//find out which feed was selected
if($q=="Google")
 {
 $xml=("http://news.google.com/news?ned=us&topic=h&output=rss");
 }
elseif($q=="MSNBC")
 {
 $xml=("http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml");
 }

$xmlDoc = new DOMDocument();
$xmlDoc->load($xml);

//get elements from "<channel>"
$channel=$xmlDoc->getElementsByTagName('channel')->item(0);
$channel_title = $channel->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$channel_link = $channel->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$channel_desc = $channel->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;

//output elements from "<channel>"
echo("<p><a href='" . $channel_link
 . "'>" . $channel_title . "</a>");
echo("<br />");
echo($channel_desc . "</p>");

//get and output "<item>" elements
$x=$xmlDoc->getElementsByTagName('item');
for ($i=0; $i<=2; $i++)
 {
 $item_title=$x->item($i)->getElementsByTagName('title')
 ->item(0)->childNodes->item(0)->nodeValue;
 $item_link=$x->item($i)->getElementsByTagName('link')
 ->item(0)->childNodes->item(0)->nodeValue;
 $item_desc=$x->item($i)->getElementsByTagName('description')
 ->item(0)->childNodes->item(0)->nodeValue;

 echo ("<p><a href='" . $item_link
 . "'>" . $item_title . "</a>");
 echo ("<br />");
 echo ($item_desc . "</p>");
 }
?>

А сега и пример за търсачка:

HTML Форма:

Код:

<html>
<head>
<script src="livesearch.js"></script> 
<style type="text/css"> 
#livesearch
  { 
  margin:0px;
  width:194px; 
  }
#txt1
  { 
  margin:0px;
  } 
</style>
</head>
<body>

<form>
<input type="text" id="txt1" size="30"
onkeyup="showResult(this.value)">

<div id="livesearch"></div>
</form>

</body>
</html>

livesearch.js е javascript файлът:

Код:

var xmlHttp;

function showResult(str)
{
if (str.length==0)
 { 
 document.getElementById("livesearch").
 innerHTML="";
 document.getElementById("livesearch").
 style.border="0px";
 return;
 }

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 } 

var url="livesearch.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged ;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("livesearch").
 innerHTML=xmlHttp.responseText;
 document.getElementById("livesearch").
 style.border="1px solid #A5ACB2";
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

PHP файлът livesearch.php:

Код:

<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");

$x=$xmlDoc->getElementsByTagName('link');

//get the q parameter from URL
$q=$_GET["q"];

//lookup all links from the xml file if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
 {
 $y=$x->item($i)->getElementsByTagName('title');
 $z=$x->item($i)->getElementsByTagName('url');
 if ($y->item(0)->nodeType==1)
  {
  //find a link matching the search text
  if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
   {
   if ($hint=="")
    {
    $hint="<a href='" . 
    $z->item(0)->childNodes->item(0)->nodeValue . 
    "' target='_blank'>" . 
    $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
    }
   else
    {
    $hint=$hint . "<br /><a href='" . 
    $z->item(0)->childNodes->item(0)->nodeValue . 
    "' target='_blank'>" . 
    $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
    }
   }
  }
 }
}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
 {
 $response="no suggestion";
 }
else
 {
 $response=$hint;
 }

//output the response
echo $response;
?>

XML файлът links.xml:

Код:

<pages>
−
<link>
<title>HTML DOM alt Property</title>
<url>http://www.w3schools.com/htmldom/prop_img_alt.asp</url>
</link>
−
<link>
<title>HTML DOM height Property</title>
−
<url>
http://www.w3schools.com/htmldom/prop_img_height.asp
</url>
</link>
−
<link>
<title>HTML a tag</title>
<url>http://www.w3schools.com/tags/tag_a.asp</url>
</link>
−
<link>
<title>HTML br tag</title>
<url>http://www.w3schools.com/tags/tag_br.asp</url>
</link>
−
<link>
<title>CSS background Property</title>
<url>http://www.w3schools.com/css/pr_background.asp</url>
</link>
−
<link>
<title>CSS border Property</title>
<url>http://www.w3schools.com/css/pr_border.asp</url>
</link>
−
<link>
<title>JavaScript Date() Method</title>
<url>http://www.w3schools.com/jsref/jsref_date.asp</url>
</link>
−
<link>
<title>JavaScript anchor() Method</title>
<url>http://www.w3schools.com/jsref/jsref_anchor.asp</url>
</link>
</pages>[quote][/quote]

dELux_nike · 29 Април 2009

1 архивче ще е полезно можеби и 1 демо

AJAX -

federer_11

Registered

dELux_nike

Registered