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


<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

AJAX XMLHttpRequest
За да създадеш AJAX приложение трабва да се запознаеш с XMLHttpRequest JS обекта.
XMLHttpRequest обекта е ключът към AJAX. Този обект е станал реалност през Юли 2000 г. но хората започнаха да говорят за AJAX и Web 2.0 чак през 2005 година.

Създаване на XMLHttpRequest обект.
Различните браузери използват различни начини за създаване на XMLHttpRequest обекта.
ИЕ използва ActiveXObject.
Другите браузери като Firefox и Opera използват XMLHttpRequest.
Ето код, който решава този проблем.


var XMLHttp=null

if (window.XMLHttpRequest)

  {

  XMLHttp=new XMLHttpRequest()

  }

else if (window.ActiveXObject)

  {

  XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

  }

XMLHttpRequest Методи
open() метод
създава заявка до сървъра

send() метод
изпраща заявка до сървъра

abort() метод
прекратява заявката до сървъра

XMLHttpRequest readyState
Състояние и Описание
0 - Няма заявка
1 - Заявката е създадена
2 - Заявката е изпратена
3 - Заявката е се обработва от сървъра
4 - Заявката е готова

Специално преведен за Webmake.org

Всичко за AJAX.

Информация

Полезни страници