Состоящий из HTML, технологии JavaScript™, DHTML и DOM, Ajax представляет собой блестящий способ превратить громоздкие веб-интерфейсы в интерактивные приложения Ajax. Для Ajax основным объектом является XMLHttpRequest, и все операции Ajax неотделимы от работы этого объекта.
Сначала давайте разберемся, как создать этот объект в JavaScript:
varxmlHttp=newXMLHttpRequest();
Эта простая строка кода создает объект XMLHttpRequest в Mozilla, Firefox, Safari, Opera и практически в любом браузере, отличном от Microsoft, который поддерживает Ajax в любой форме и способе. Но для IE, доля рынка которого составляет 70%, этот метод невозможен, а разные версии IE имеют разные методы создания, поэтому нам нужно использовать следующие два метода создания объектов в IE:
try{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");//Для новых браузеров
}поймать(ошибка){
пытаться{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");//Для старых браузеров
}поймать(ошибка2){
xmlHttp = ложь;
}
}
Несмотря на это, мы не можем предсказать, что некоторые браузеры не смогут создать этот объект, поэтому, если создание окажется неудачным, нам придется добавить предложение:
if(!xmlHttp){
alert("Невозможно создать объект XMLHttpRequest!");
}
Комбинация:
varxmlHttp=false;
пытаться{
xmlHttp = newXMLHttpRequest ();
}catch(trymicrosoft){
пытаться{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(othermicrosoft){
пытаться{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}поймать(не удалось){
xmlHttp = ложь;
}
}
}
если(!xmlHttp){
alert("Невозможно создать объект XMLHttpRequest!");
}
Затем давайте создадим функцию getInfo() для включения асинхронных запросов:
functiongetInfo(){
varnum=document.getElementById("num").value;//Получаем данные формы
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//true здесь представляет асинхронный запрос
}
После настройки с помощью open() вы можете отправлять запросы. Хотя вы можете отправлять данные с помощью send(), вы также можете отправлять данные через сам URL-адрес. Фактически, в большинстве запросов GET гораздо проще отправлять данные с использованием URL-адреса, поэтому просто используйте здесь значение null в качестве параметра send(). Файл php в URL-адресе — это файл php, который запрашивается для обработки необходимых данных, как и в случае, когда мы обычно используем PHP. Можно добавить несколько параметров и разделить их символом &.
xmlHttp.send (нуль);
После отправки данных нам нужно использовать метод обратного вызова для получения статуса сервера, поэтому используется атрибут onreadystatechange.
xmlHttp.onreadystatechange = updatePage;
Этот оператор должен быть помещен перед оператором send(), чтобы он был эффективным. Последующий updatePage — это функция, обрабатывающая возвращаемую информацию. Полный метод getInfo() выглядит следующим образом:
функцияgetInfo(){
varnum=document.getElementById("num").value;//Получаем данные формы
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//true здесь представляет асинхронный запрос
xmlHttp.onreadystatechange = updatePage;
xmlHttp.send (нуль);
}
Нам также нужно вызвать эту функцию в html:
<inputname="num"id="num"onblur="getInfo()"type="text"/>
Далее нам нужно написать функцию updatePage():
functionupdatePage(){
если (xmlhttp.readyState == 4) {
varresponse = xmlhttp.responseText;
document.getElementById("город").value=response;
}
}
ReadyState в приведенном выше коде — это статус, возвращаемый сервером. Этот статус 4 указывает, что запрос отправлен и обработан. responseText предназначен для получения информации, возвращаемой сервером, а затем присвоения ее форме с идентификатором города через JavaScript.
На этом работа простой Ajax-программы завершена. Полный код JavaScript выглядит следующим образом:
varxmlHttp=false;
пытаться{
xmlHttp = newXMLHttpRequest ();
}catch(trymicrosoft){
пытаться{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(othermicrosoft){
пытаться{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}поймать(не удалось){
xmlHttp = ложь;
}
}
}
если(!xmlHttp){
alert("Невозможно создать объект XMLHttpRequest!");
}
функцияgetInfo(){
varnum=document.getElementById("num").value;//Получаем данные формы
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//true здесь представляет асинхронный запрос
xmlHttp.onreadystatechange = updatePage;
xmlHttp.send (нуль);
}
функцияобновлениестраницы(){
если (xmlhttp.readyState == 4) {
varresponse = xmlhttp.responseText;
document.getElementById("город").value=response;
}
}
Здесь еще не хватает php-файла. Так как метод обработки другой и метод записи другой, и это не основная часть Ajax, код сюда включаться не будет. Просто помните, что PHP выводит и возвращает необходимые данные. Он
давно не обновлялся. Я видел этот урок сегодня, и он очень подходит для новичков.