AJAX. Принцип на работа и примери.

jordan_jambazov · 16 Март 2007

AJAX не е нов програмен език. Това е нов начин да използваш вече съществуващите стандарти.
С AJAX можеш да създаваш по-добри, по-бързи и по-приятелски настроени уеб страници.
AJAX се базира на JavaScript + HTTP заявки.

AJAX = Asynchronous JavaScript And XML
AJAX е съкращение на AJAX = Asynchronous JavaScript And XML
AJAX не е нов програмен език. Това е технология за създаване на по-добри, по-бързи и по-динамични уеб страници.
AJAX използва JavScript за да предава информация между сървъра и уеб браузера. AJAX технологията позволява да се разменя информация между сървъра и браузера без да се презарежда страницата.

AJAX е браузерна технология.
AJAX е технология, която работи с браузера ви. Тя използва синхронизиран пренос на информация (HTTP заявки) между браузера и уеб сървъра, позволявайки на уеб страницата ви да получава малки битове информация от сървъра.

AJAX е базиран на отворени стандарти.
AJAX е базиран на следните отворени стандарти:

* JavaScript
* XML
* HTML
* CSS

Стандартите които се използват от AJAX са добре познати и поддържани от всички основни уеб браузери.

AJAX прави уеб страниците по-добри.
Уеб приложенията имат много преимущества пред Desktop приложенията и те имат по-голяма аудитория. Те са по-лесни за поддръжка и програмиране.
Но въпреки това те не винаги са толкова "богати" и приятелски настроени, като Desktop приложенията.
С AJAX уеб приложенията могат да се направят по-богати (по-малки, по-бързи, по-лесни за употреба).

Можеш веднага да започнеш да използваш AJAX.
Няма нищо за учене...
AJAX е базиран на отворени стандарти, които са използвани от повечето програмисти много години.
Повечето уеб приложения могат да бъдат пренаписани на AJAX, вместо стандартния HTML.

AJAX използва XML и HTTP заявки.
Традиционните уеб приложения за да се свържат с сървъра трябва да използват HTML форма.
Само че там свързването става след презареждането на страницата. Поради тази причина обикновенните уеб страници са по-бавни и по-неприятни.
С AJAX страниците могат да комуникират с сървъра без презареждане на страницата. Това става с HTTP заявки и модифициране само на част от страницата с JavaScript, когато сървъра отговори.

Пример, който обяснява HTML формата.
Формата отдолу има следния код.

Код:

<form> 
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>

<p>Suggestions: <span id="txtHint"></span></p>

Както виждате, това е само една проста форма, с поле, което се казва "txt1".
Всеки път когато потребителя натиска някое копче от клавиатурата, ще се задейства функцията наречена "showHint()".

Обяснен пример. ShowHint() функцията.
ShowHint() функцията е много проста JS функция, поставена в <HEAD> секцията.
Функцията садържа следния код:

Код:

function showHint(str)
{
if (str.length==0)
{ 
document.getElementById("txtHint").innerHTML=""
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
} 
var url="gethint.asp"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

Функцията се включва всеки път, когато се въведе нов знак в полето.
Ако има някакъв текст в полето (str.length > 0) функцията действа по следния начин:

* Проверява адреса (името на файла) който се изпраща до сървъра
* Добавя параметър (q) до url-то с съдържанието на формата.
* Добавя произволно число за да избегне сървъра използването на недостъпен файл.
* Създава XMLHTTP обект, и казва на обекта да наречена stateChanged когато промяната е направена.
* Отваря XMLHTTP обекта с зададения url.
* Изпраща HTTP заявка до сървъра.

Обяснен пример. StateChanged() функцията.
Функцията садържа следния код:

Код:

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

Тази функция се включва всеки път, когато състоянето на XMLHTTP обекта се променя.
Когато състоянето се променя на 4 (или на "готов"), обекта txtHint се запълва с получената информация.

От кои браузери се поддържа AJAX
АJAX може да върви само на браузери, които напълно поддържат XML. За сега те са само два - Mozilla Firefox и IE.
В тази статия ще се обхванат само тези два браузера. Сега ще разгледаме функцията GetXmlHttpObject().
Целта на тази функция е да реши проблема с различните XMLHTTP обекти под различните браузери.
Ето го и кода на функцията:

Код:

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

AJAX пример - AJAX код.
Този код се отнася към миналите примери. Можеш да го копираш и да го пробваш.

AJAX HTML страницата.
Това е проста HTML страница. Тя садържа форма и линк към JS файла.

Код:

<html>
<head>
<script src="clienthint.js"></script> 
</head>

<body>

<form> 
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>

<p>Suggestions: <span id="txtHint"></span></p> 

</body>
</html>

The AJAX JavaScript
Това е JS-а в файла "clienthint.js".

Код:

var xmlHttp

function showHint(str)
{
if (str.length==0)
{ 
document.getElementById("txtHint").innerHTML=""
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
} 
var url="gethint.asp"
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("txtHint").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
}

AJAX Server страницата.
Сървър страницата извикана през JS в миналите примери е прост ASP файл, който се казва "gethint.asp".
По-надолу има ASP и PHP пример.

AJAX ASP пример.
gethint.asp

Код:

<%
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"

'get the q parameter from URL
q=ucase(request.querystring("q"))

'lookup all hints from array if length of q>0
if len(q)>0 then
  hint=""
  for i=1 to 30
    if q=ucase(mid(a(i),1,len(q))) then
      if hint="" then
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
  next
end if

'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then 
  response.write("no suggestion")
else
  response.write(hint)
end if
%>

AJAX PHP пример.
PHP
За да можете да използвате PHP не забравяйте да промените JS файла.

Код:

<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

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

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
  $hint="";
  for($i=0; $i<count($a); $i++)
  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}

// 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;
?>

AJAX пример с база данни.
В този пример ще видите как използвайки AJAX можете да взимате информация от база данни.

Обяснен AJAX пример.
Кода отдолу садържа форма и линк към JS файл.

Код:

<html>
<head>
<script src="selectcustomer.js"></script>
</head>

<body>

<form> 
Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste
<option value="NORTS ">North/South
<option value="WOLZA">Wolski Zajazd 
</select>
</form>

<p>
<div id="txtHint"><b>Customer info will be listed here.</b></div>
</p>

</body>
</html>

AJAX JavaScript файла.
Това е кода в "selectcustomer.js" файла.

Код:

var xmlHttp

function showCustomer(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
} 
var url="getcustomer.asp"
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("txtHint").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
}

AJAX Сървър страницата.
Примера отдолу е на ASP, но може лесно да бъде пренаписан на PHP.

Код:

sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & request.querystring("q")

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn

response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop

response.write("</table>")

AJAX XML пример.
В примера ще покажам как AJAX може да взима информация от XML файл.

AJAX пример

Код:

<html>
<head>
<script src="selectcd.js"></script>
</head>

<body>

<form> 
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option> 
</select>
</form>

<p>
<div id="txtHint"><b>CD info will be listed here.</b></div>
</p>

</body>
</html>

AJAX JavaScript

Код:

var xmlHttp

function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
} 
var url="getcd.asp"
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("txtHint").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
}

AJAX Сървър страницата.
ASP

Код:

q=request.querystring("q")

set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load(Server.MapPath("cd_catalog.xml"))

set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']")

for each x in nodes
for each y in x.childnodes
response.write("<b>" & y.nodename & ":</b> ")
response.write(y.text)
response.write("<br />")
next
next

Надявам се урокът която съм превел да ви бъде полезен.
Превод: Webmake.ORG

renegat96 · 16 Март 2007

тва наистина е много полезно по добре го напиши като урок щото във форума ще се затрие!

adrian · 16 Март 2007

Дам...наистина много полезно. По-добре е и според мен да е като урок

PhrozenCrew · 16 Март 2007

AJAX е почти съвършен. Отдавна се възхищавам на простотата му и винаги съм чел с интерес всичко свързано с него.
Главата ми падна когато се появи виртуалната Операционна Система YouOS. Просто да не повярваш, но е факт:
http://www.youos.com
Google.com сега се опитват да направят разработки на тази основа под Linux, те предричат, че след време хората няма да си копуват собствени хард дискове а цялата информация ще е в мрежата. Аз бих казал, че ние сме свидетелите на разждането на нова епоха в виртуалните технологии. А щом и гугъл мислят така, вероятно са прави.
Иначе урока ми харесва.
Жив и здрав!

mute · 16 Март 2007

PhrozenCrew каза:
Главата ми падна когато се появи виртуалната Операционна Система YouOS. Просто да не повярваш, но е факт:
http://www.youos.com

:shock: и моята глава падна това е ... няма думи.
а иначе статията и превода са добри

kitchenbg · 16 Март 2007

бих казал че доста заинтригуващо .............

HunteR · 16 Март 2007

Сега съм в това http://youos.com и там има някакав браузер и от там пиша сега

Някакво си WhereWolf

Soul_Stealler · 16 Март 2007

jordan_jambazov, мерси за хубавия превод :?:

mute · 17 Март 2007

а някои да е намерил други интересни статии и промери за аякс ?

hellbg · 21 Март 2007

ТОВА Е НАИ-ДОБРИЯ САЙТ ЗА Ajax
http://www.ajaxian.com/

morkov4o · 22 Март 2007

оле мн полезно инфо ! Супер !!!

Soul_Stealler · 22 Март 2007

Това също е един сайт със доста интересни примери:
http://ajax.asp.net/ajaxtoolkit/

AJAX. Принцип на работа и примери.

jordan_jambazov

Registered

renegat96

Registered

adrian

Registered

PhrozenCrew

Registered

mute

Registered

kitchenbg

Registered

HunteR

Super Moderator

Soul_Stealler

Registered

mute

Registered

hellbg

Registered

morkov4o

Registered

Soul_Stealler

Registered