Latest web development tutorials

XML DOM - HttpRequest объекты

Через объект XMLHttpRequest, вы можете обновить раздел веб-страницы без перезагрузки всей страницы.


Объект XMLHttpRequest

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

Объект XMLHttpRequestмечта разработчика, потому что вы можете:

  • Обновление веб-страницы без перезагрузки страницы
  • После того, как страница загружается из данных запроса сервера
  • После загрузки страницы данные, полученные с сервера
  • Передача данных на сервер в фоновом режиме

Создание объекта XMLHttpRequest

Все современные браузеры (IE7 +, Firefox, Chrome, Safari и Opera) имеет встроенный XMLHttpRequest объект.

Создание синтаксиса объекта XMLHttpRequest

xmlhttp=new XMLHttpRequest();

Более старые версии Internet Explorer (IE5 и IE6) с использованием объектов ActiveX:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

Для того, чтобы справиться со всеми современными браузерами, включая IE5 и IE6, пожалуйста, проверьте, поддерживает ли браузер объект XMLHttpRequest. Если это так, то создать объект XMLHttpRequest, если это не произойдет, создать объект ActiveX:

примеров

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

Попробуйте »


Отправить запрос на сервер

Для того, чтобы отправить запрос на сервер, мы используем открыть объект XMLHttpRequest (в) и отправить () метод:

xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();

方法 描述
open(method,url,async) 规定请求的类型,URL,请求是否应该进行异步处理。

method:请求的类型:GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string) 发送请求到服务器。

string:仅用于 POST 请求


GET или POST?

GET проще, чем POST и быстро, и может использоваться в большинстве случаев.

Тем не менее, всегда используйте запрос POST при следующих обстоятельствах:

  • Кэшированных файлов не вариант (или файл базы данных на сервере обновлений)
  • Объем данных, отправленных на сервер (не POST без ограничения размера) большой
  • Отправка пользовательского ввода (может содержать неизвестные символы), POST сильнее и более безопасным, чем GET

URL - файл на сервере

URL аргумент метод Open (), является адрес файла на сервере:

xmlhttp.open("GET","xmlhttp_info.txt",true);

Файл может быть любой тип файла (например, .txt и .xml), или файлы сценариев сервера (например, .html и .php, может выполнять действия на сервере перед отправкой обратно ответ).


Асинхронный - Верно или нет?

Для запроса асинхронной передачи, метод асинхронной аргумент открытым () должен быть установлен верно:

xmlhttp.open("GET","xmlhttp_info.txt",true);

Отправить асинхронный запрос для веб-разработчика является огромным шагом вперед. На сервере для выполнения многих задач очень много времени.

Через передается асинхронно, JavaScript не нужно ждать ответа сервера, но могут быть заменены:

  • Во время ожидания ответа от сервера, чтобы выполнить дополнительные скрипты
  • Готов обработать ответ, когда ответ

Асинхронный = True

При использовании асинхр = True, когда в ответ на заранее определенного события функция onreadystatechange готов к выполнению:

примеров

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();

Попробуйте »


Асинхронный = False

Для третьего параметра асинхронном = ложь, измените открытое () метод является ложным:

xmlhttp.open("GET","xmlhttp_info.txt",false);

Не рекомендуется асинхронной = ложь, но если обработано несколько небольших запрос или может.

Помните, что JavaScript в ответе сервера не продолжается до тех пор, пока не будете готовы. Если сервер занят или медленно, то приложение будет приостановлено или остановлено.

Примечание: При использовании асинхр = ложь, не пишите onreadystatechange функцию - просто нужно разместить код после отправки () заявления:

примеров

xmlhttp.open("GET","xmlhttp_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Попробуйте »


Ответ сервера

Для того, чтобы получить ответ от сервера, используйте responseText или responseXML свойство объекта XMLHttpRequest в.

属性 描述
responseText 获取响应数据作为字符串
responseXML 获取响应数据作为 XML 数据


responseText недвижимость

Если ответ от сервера не XML, пожалуйста, используйте свойство responseText.

responseText свойство возвращает ответ в виде строки, вы можете использовать его соответствующим образом:

примеров

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Попробуйте »


responseXML недвижимость

Если ответ не XML с сервера, и вы хотите, чтобы решить его в объект XML, используйте свойства responseXML:

примеров

Запрос файла cd_catalog.xml и разобрать ответ:

xmlDoc=xmlhttp.responseXML;
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "
";
}
document.getElementById("myDiv").innerHTML=txt;

Попробуйте »


onreadystatechange событие

Когда запрос отправляется на сервер, нам нужно выполнить некоторые действия, основанные на ответе.

onreadystatechange событие запускается каждый раз, когда readyState изменения.

XMLHttpRequest readyState свойство имеет статус.

Три важных свойства объекта XMLHttpRequest:

属性 描述
onreadystatechange 存储函数(或函数的名称)在每次 readyState 属性变化时被自动调用
readyState 存放了 XMLHttpRequest 的状态。从 0 到 4 变化:
0:请求未初始化
1:服务器建立连接
2:收到的请求
3:处理请求
4:请求完成和响应准备就绪
status 200:"OK"
404:找不到页面

В onreadystatechange случае, мы указываем, что произойдет, когда время готов к обработке ответа сервера.

Когда readyState 4 или 200 государство, ответ получают:

примеров

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

Попробуйте »

Примечание: onreadystatechange событие запускается каждый раз при смене readyState, вызвало в общей сложности четыре раза.


Примеры s

Другие примеры

По getAllResponseHeaders () для получения информации заголовка
Чтобы получить информацию заголовка ресурса (документ).

() Извлекает указанную информацию заголовка getResponseHeader
Для того, чтобы получить ресурс (файл), чтобы указать информацию заголовка.

Содержание поиска ASP - файл
Когда пользователь вводит символы в поле ввода, как веб-страницы взаимодействовать с веб-сервером.

Получить содержимое из базы данных
Веб-страница, как извлекать информацию из базы данных с помощью объекта XMLHttpRequest.

Содержимое файла XML - поиска
Создание XMLHttpRequest для извлечения данных из файла XML и отображать данные в HTML-таблице.