Ajax Въведение, принцип, примери.

angelovarna трудност:

видян: 32894

AJAX се базира на JavaScript + HTTP заявки.

AJAX = Asynchronous JavaScript And XML

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. За сега те са само три - Opera, IE и Mozilla Firefox.
В тази статия ще се обхванат само тези три браузера. Сега ще разгледаме функцията 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
}

Страници: 1 2 »

Сподели |

Коментари (1)

yasenboychev на 03.06 2010 в 17:02ч.

Браво! Супер е!

Ajax Въведение, принцип, примери.

Коментари (1)

Регистрирайте се, за да добавите коментар