Принцип Ajax достаточно одного

предисловие

AJAX означает «асинхронный Javascript и XML», что относится к технологии веб-разработки для создания интерактивных веб-приложений. AJAX — это метод создания быстрых и динамичных веб-страниц. Это позволяет разработчикам получать только данные с сервера (вместо картинок, HTML-документов и других ресурсов), а передача интернет-ресурсов стала беспрецедентно легкой и чистой, что стимулирует творчество разработчиков и делает различные мощные веб-сайты и интернет-приложения выросли как грибы после дождя, постоянно удивляя людей.

Первый адрес этой статьиБлог GitHub, Писать статьи непросто, поддержите и обратите внимание!

1. Что такое Аякс

Ajax — это технология веб-разработки, которая асинхронно запрашивает данные, что полезно для улучшения взаимодействия с пользователем и производительности страницы. Проще говоря, Ajax загружает фоновые данные через асинхронные запросы и отображает их на веб-странице без необходимости обновления страницы. Общие сценарии приложений включают проверку формы, успешность входа в систему, подсказки в раскрывающемся списке поиска Baidu и экспресс-запрос номера отслеживания. **Цель Ajax — улучшить взаимодействие с пользователем и уменьшить объем передаваемых по сети данных. **В то же время, поскольку AJAX запрашивает выборочные данные вместо HTML-документов, это также экономит пропускную способность сети, делая работу в Интернете более удобной для пользователей Интернета.

Во-вторых, в чем принцип Ajax

Прежде чем объяснять принцип Ajax, мы могли бы также привести пример «руководитель хочет попросить Сяо Ли отчитаться о своей работе».Если лидер хочет о чем-то спросить Сяо Ли, он поручает секретарю позвонить Сяо Ли, а затем он сам занимается другими делами, пока секретарь не сообщает ему, что прибыл Хэ Сяоли, и, наконец, Сяоли отчитывается перед лидером.

Процесс запроса данных Ajax похож на «Лидер хочет найти Сяо Ли, чтобы сообщить о работе». Основной зависимостью является объект XMLHttpRequest, предоставляемый браузером, который действует как секретарь, позволяя браузеру выдавать HTTP-запросы и получать HTTP-ответы. Затем браузер выполняет другие действия, а затем отображает страницу после получения данных, возвращенных XHR.

После понимания того, как работает Ajax, давайте обсудим, как использовать Ajax.

В-третьих, использование Ajax

1. Создайте основной объект Ajax XMLHttpRequest (не забудьте учесть совместимость)

	1. var xhr=null;  
	2. if (window.XMLHttpRequest)  
	3.   {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
	4.   xhr=new XMLHttpRequest();  
	5.   } else{// 兼容 IE6, IE5 
	6.     xhr=new ActiveXObject("Microsoft.XMLHTTP");  
	7.   }

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

    1. xhr.open(method,url,async);  
    2. send(string);//post请求时才使用字符串参数，否则不用带参数。

метод: тип запроса; GET или POST
url: расположение файла на сервере
async: true (асинхронный) или false (синхронный)Примечание. В почтовом запросе должен быть задан формат содержимого заголовка запроса.

xhr.open("POST","test.html",true);  
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
xhr.send("fname=Henry&lname=Ford");  //post请求参数放在send里面，即请求体

3. Обработка ответов сервера (различаются синхронные и асинхронные)

responseText получает данные ответа в виде строки.

responseXML Получает данные ответа в формате XML.

① Синхронная обработка

	1. xhr.open("GET","info.txt",false);  
	2. xhr.send();  
	3. document.getElementById("myDiv").innerHTML=xhr.responseText; //获取数据直接显示在页面上

②Асинхронная обработка

Это относительно сложно и должно обрабатываться в событии изменения состояния запроса.

	1. xhr.onreadystatechange=function()  { 
	2.    if (xhr.readyState==4 &&xhr.status==200)  { 
	3.       document.getElementById("myDiv").innerHTML=xhr.responseText;  
	4.      }
	5.    }

Что такое состояние готовности?

readyState — это атрибут объекта XMLHttpRequest, который используется для определения текущего состояния объекта XMLHttpRequest. readyState имеет в общей сложности 5 значений состояния, от 0 до 4 соответственно, каждое значение представляет собой различное значение.

0: не инициализирован - метод .open() не вызывался;
1: Start -- метод .open() был вызван, но метод .send() не был вызван;
2: Отправить -- метод .send() был вызван, но ответа не получено;
3: Receive -- часть данных ответа получена;
4: Завершено -- все данные ответа получены и могут использоваться на стороне клиента;

Что такое статус?

Код состояния HTTP (статус) состоит из трех десятичных чисел. Первое десятичное число определяет тип кода состояния, а последние два числа не имеют функции классификации. Существует 5 типов кодов состояния HTTP:

Общие коды состояния

Только в RFC2616 записано 40 кодов состояния HTTP, а с такими расширениями, как WebDAV (RFC4918, 5842) и дополнительными кодами состояния HTTP (RFC6585), число достигает более 60. Далее мы представим некоторые из этих репрезентативных кодов состояния.

200 означает, что запрос от клиента был нормально обработан на стороне сервера.
204 означает, что запрос был успешно обработан, но ресурсы не возвращены.
301 означает постоянный редирект. Этот код состояния указывает, что запрошенному ресурсу был назначен новый URI, и тот URI, на который сейчас ссылается ресурс, должен использоваться в будущем.
302 означает временную переадресацию.
304 указывает, что клиент отправляет условный запрос (ссылаясь на сообщение запроса с использованием метода GET, которое содержит любой заголовок if-matched, if-modified-since, if-none-match, if-range, if-unmodified-since) Сервер разрешает запросу доступ к ресурсу, но возвращает 304Modified сразу после того, как запрос не соответствует условиям (ресурс на стороне сервера не изменился, и неистекший кеш клиента можно использовать напрямую)
400 означает синтаксическую ошибку в сообщении запроса. При возникновении ошибки необходимо изменить содержимое запроса и повторно отправить запрос.
401 означает неавторизованный, текущий запрос требует аутентификации пользователя.
403 указывает, что доступ к запрошенному ресурсу был запрещен сервером
404 означает, что запрошенный ресурс не может быть найден на сервере. Кроме того, его также можно использовать, когда серверная сторона отклоняет запрос и не хочет указывать причину.
500 означает, что на стороне сервера произошла ошибка при выполнении запроса. Это также может быть ошибка в веб-приложении или какой-то временный сбой.
503 указывает на то, что сервер временно перегружен или находится в состоянии простоя из-за обслуживания и не может сейчас обрабатывать запросы.

③Разница между данными запроса GET и POST

При использовании запроса Get параметры выводятся в URL, а при использовании метода Post — в поле отправки.
Используйте запрос Get для отправки небольшого объема данных и запрос Post для отправки большого объема данных.
Использование запросов Get имеет низкий уровень безопасности и будет кэшироваться, а запросы Post наоборот. Что касается первого отличия, см. подробности на следующих двух рисунках:

4. Вывод

Фактически, сетевые запросы выполняются через XMLHttpRequest или инкапсулированную структуру.Этот метод немного устарел, а методы настройки и вызова очень запутаны.Fetch, появившийся в последние годы, представляет собой лучшую альтернативу.Он не только предоставляет своего рода простой, логичный способ асинхронного извлечения ресурсов по сети и может легко использоваться другими технологиями.

Чтобы узнать, как использовать Fetch для запроса данных, нажмитеКак fetch запрашивает распространенные форматы данных

Если вы хотите узнать, как Ajax запрашивает фоновые данные, нажмитеФоновые данные запроса Ajax