AJAX — как это работает и примеры

AJAX — не новый язык программирования. Это новый способ использования уже существующих стандартов.
С помощью AJAX вы можете создавать более качественные, быстрые и удобные веб-страницы.
AJAX основан на запросах JavaScript + HTTP.

AJAX = асинхронный JavaScript и XML
AJAX — это сокращение от AJAX = Асинхронный Джаваскрипт Абез даты ИксМЛ
AJAX — не новый язык программирования. Это технология для создания более качественных, быстрых и динамичных веб-страниц.
AJAX использует JavScript для передачи информации между сервером и веб-браузером. Технология AJAX позволяет обмениваться информацией между сервером и браузером без перезагрузки страницы.

AJAX — это технология браузера.
AJAX — это технология, которая работает с вашим браузером. Он использует синхронизированную передачу информации (HTTP-запросы) между браузером и веб-сервером, что позволяет вашей веб-странице получать небольшие биты информации с сервера.

AJAX основан на открытых стандартах.
AJAX основан на следующих открытых стандартах:

* JavaScript
* XML
* HTML
* CSS

Стандарты, используемые AJAX, хорошо известны и поддерживаются всеми основными веб-браузерами.

AJAX делает веб-страницы лучше.
Веб-приложения имеют много преимуществ перед настольными приложениями и имеют более широкую аудиторию. Их легче обслуживать и программировать.
Однако они не всегда такие «богатые» и удобные, как настольные приложения.
С помощью AJAX веб-приложения можно сделать богаче (меньше, быстрее, проще в использовании).

Вы можете начать использовать AJAX прямо сейчас.
Учиться нечему…
AJAX основан на открытых стандартах, которые уже много лет используются большинством программистов.
Большинство веб-приложений можно переписать на AJAX вместо стандартного HTML.

AJAX использует запросы XML и HTTP.
Традиционные веб-приложения должны использовать форму HTML для связи с сервером.
Но там подключение происходит после перезагрузки страницы. Из-за этого обычные веб-страницы работают медленнее и раздражают больше.
С помощью AJAX страницы могут взаимодействовать с сервером без перезагрузки страницы. Это делается с помощью HTTP-запросов и изменения только части страницы с помощью JavaScript, когда сервер отвечает.

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

Предложения:

Как видите, это простая форма с полем «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?
AJAX может работать только в браузерах, которые полностью поддерживают 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.



Предложения:

АЯКС-JavaScript
Это JS в файле «clienthint.js».

var xmlHttp

функция showHint(str)
{
если (str.length==0)
{
document.getElementById(«txtHint»).innerHTML=»»
возвращаться
}
xmlHttp=GetXmlHttpObject()
если (xmlHttp==null)
{
оповещение («Браузер не поддерживает HTTP-запрос»)
возвращаться
}
var url=»getint.asp»
url=url+»?q=»+str
url=url+»&sid=»+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open («ПОЛУЧИТЬ», URL-адрес, правда)
xmlHttp.send (нулевой)
}

функция stateChanged()
{
если (xmlHttp.readyState==4 || xmlHttp.readyState==»complete»)
{
document.getElementById(«txtHint»).innerHTML=xmlHttp.responseText
}
}

функция GetXmlHttpObject()
{
переменная objXMLHttp = ноль
если (окно.XMLHttpRequest)
{
objXMLHttp=новый XMLHttpRequest()
}
иначе если (window.ActiveXObject)
{
objXMLHttp=новый ActiveXObject(«Microsoft.XMLHTTP»)
}
вернуть objXMLHttp
}

Страница сервера AJAX.
Страница сервера, вызываемая через JS в предыдущих примерах, представляет собой простой файл ASP с именем «getint.asp».
Ниже приведен пример ASP и PHP.

Пример AJAX ASP.
gethint.asp
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

‘Вывести «нет предложения», если подсказка не найдена
‘или вывести правильные значения
если подсказка=»» то
response.write(«нет предложения»)
еще
ответ.написать(подсказка)
конец, если
%>

Пример AJAX PHP.
PHP
Чтобы иметь возможность использовать PHP, не забудьте изменить файл JS.
0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $iПример AJAX с базой данных.
В этом примере вы увидите, как с помощью AJAX можно извлекать информацию из базы данных.

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

Выберите клиента:
Альфред ФуттеркистеСевер ЮгВольский Заязд

Здесь будет указана информация о клиенте.

AJAX-файл JavaScript.
Это код в файле «selectcustomer.js».
var xmlHttp

функция showCustomer(str)
{
xmlHttp=GetXmlHttpObject()
если (xmlHttp==null)
{
оповещение («Браузер не поддерживает HTTP-запрос»)
возвращаться
}
var url=»getcustomer.asp»
url=url+»?q=»+str
url=url+»&sid=»+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open («ПОЛУЧИТЬ», URL-адрес, правда)
xmlHttp.send (нулевой)
}

функция stateChanged()
{
если (xmlHttp.readyState==4 || xmlHttp.readyState==»complete»)
{
document.getElementById(«txtHint»).innerHTML=xmlHttp.responseText
}
}

функция GetXmlHttpObject()
{
переменная objXMLHttp = ноль
если (окно.XMLHttpRequest)
{
objXMLHttp=новый XMLHttpRequest()
}
иначе если (window.ActiveXObject)
{
objXMLHttp=новый ActiveXObject(«Microsoft.XMLHTTP»)
}
вернуть 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.Mapppath(«/db/northwind.mdb»))
установить rs = Server.CreateObject(«ADODB.recordset»)
rs.Open sql, подключение

ответ.написать(«

«)

делать до rs.EOF
для каждого x в rs.Fields
ответ.написать(»

«)
ответ.написать(«

«)
следующий
rs.MoveNext
петля

ответ.написать(«

» & x.имя & «

» & x.значение & «

«)

Пример AJAX XML.
В примере мы покажем, как AJAX может извлекать информацию из XML-файла.

AJAX-пример



Выберите компакт-диск:
Боб ДиланБонни ТайлерДолли Партон

Информация о компакт-диске будет указана здесь.

АЯКС JavaScript
var xmlHttp

функция showCD(str)
{
xmlHttp=GetXmlHttpObject()
если (xmlHttp==null)
{
оповещение («Браузер не поддерживает HTTP-запрос»)
возвращаться
}
URL-адрес переменной =»getcd.asp»
url=url+»?q=»+str
url=url+»&sid=»+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open («ПОЛУЧИТЬ», URL-адрес, правда)
xmlHttp.send (нулевой)
}

функция stateChanged()
{
если (xmlHttp.readyState==4 || xmlHttp.readyState==»complete»)
{
document.getElementById(«txtHint»).innerHTML=xmlHttp.responseText
}
}

функция GetXmlHttpObject()
{
переменная objXMLHttp = ноль
если (окно.XMLHttpRequest)
{
objXMLHttp=новый XMLHttpRequest()
}
иначе если (window.ActiveXObject)
{
objXMLHttp=новый ActiveXObject(«Microsoft.XMLHTTP»)
}
вернуть objXMLHttp
}

Страница сервера AJAX.
АСП
q=request.querystring("q")

установить xmlDoc=Server.CreateObject(«Microsoft.XMLDOM»)
xmlDoc.async=»ложь»
xmlDoc.load(Server.MapPath(«cd_catalog.xml»))

set nodes=xmlDoc.selectNodes(«КАТАЛОГ/CD[ARTIST=’» & q & «‘]»)

для каждого x в узлах
для каждого y в x.childnodes
ответ.написать(«» & y.nodename & «: «)
ответ.написать(у.текст)
ответ.написать(«
«)
следующий
следующий

Надеюсь, урок, который я перевела, будет вам полезен.