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

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 формата.
Формата отдолу има следния код.

Suggestions:

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

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

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 файла.


<script src="clienthint.js">


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

var xmlHttp

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 файла.
0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $iAJAX пример с база данни.
В този пример ще видите как използвайки AJAX можете да взимате информация от база данни.

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



<script src="selectcustomer.js">


AJAX JavaScript файла.
Това е кода в „selectcustomer.js“ файла.
var xmlHttp

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")

")

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

AJAX пример


<script src="selectcd.js">


AJAX JavaScript
var xmlHttp

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")

for each x in nodes
for each y in x.childnodes
response.write("" & y.nodename & ": ")
response.write(y.text)
response.write("
")
next
next

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