Конспект XMLHttpRequest + jQuery + Promise + Axios

jQuery это JavaScript Библиотека сфокусированная на управлении DOM , вызовах AJAX , и событиях обработки.

/ //developer.mozilla.org
jQuery API Documentation //api.jquery.com
AJAX: Шпаргалка по AJAX на jQuery //habr.com
jQuery справочник //basicweb.ru

JavaScript и jQuery»3.10. Введение в jQuery //html5book.ru

Интерфейс Web API XMLHttpRequest

Интерфейс API реализует объекты и методы для обмена данными клиента и сервера. Запросы API не затрагивают работу браузера и не приводят к перезагрузки страницы, что позволяет реализовать в документе большую гибкость.

Общий пример сборки данных формы конструктором FormData() и асинхронной отправки данных объектом XMLHttpRequest:

var xhr = new XMLHttpRequest();
var formData = new FormData( document.getElementById( "myform" ));
xhr.open( "POST", "https://reks.biz/mypost.php", true );
xhr.onreadystatechange = function () { 
  if ( xhr.readyState == 4 && xhr.status == 200 )
    // on success:
    document.getElementByID( "status", xhr.responseText );
  else if (xhr.readyState == 4 && xhr.status != 200) { 
    // on fail: 
  }; 
xhr.send(formData);

var xhr = new XMLHttpRequest();

var formData = new FormData( document.getElementById( "myform" ));

xhr.open( "POST", "https://reks.biz/mypost.php", true );

xhr.onreadystatechange = function () {

if ( xhr.readyState == 4 && xhr.status == 200 )

// on success:

document.getElementByID( "status", xhr.responseText );

else if (xhr.readyState == 4 && xhr.status != 200) {

// on fail:

};

xhr.send(formData);

Объектная реализация осложняется тем, что в отличие от предыдущего примера, где XMLHttpRequest вызывает onreadystatechange как функцию, для вызова метода объекта дополнительно к методу необходимо передать this:

class Demo {

  SubsystemsUpdate() { 
    this.RequestGet( this.SubsystemsUpdateResponse ); 
  } 

  RequestGet( onready ) {
    var xhr = new XMLHttpRequest();
    xhr.open( 'GET', 'https://reks.biz/myget.php', true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) 
        onready.call( this, xhr.responseText );
    }.bind( this );
    xhr.send();
  }

  SubsystemsUpdateResponse( response ) {
    let suit = JSON.parse( response );
    this.DocumentElementsUpdate( suit );
  }

  DocumentElementsUpdate( suit ) {
    //...
  }
}

class Demo {

SubsystemsUpdate() {

this.RequestGet( this.SubsystemsUpdateResponse );

}

RequestGet( onready ) {

var xhr = new XMLHttpRequest();

xhr.open( 'GET', 'https://reks.biz/myget.php', true);

xhr.onreadystatechange = function () {

if (xhr.readyState == 4 && xhr.status == 200)

onready.call( this, xhr.responseText );

}.bind( this );

xhr.send();

}

SubsystemsUpdateResponse( response ) {

let suit = JSON.parse( response );

this.DocumentElementsUpdate( suit );

}

DocumentElementsUpdate( suit ) {

//...

}

Без показанного применения .call() и .bind() в колбек-функции this не будет определен.

AJAX (Asynchronous Javascript and XML)

Технология основана на использовании нестандартного объекта XMLHttpRequest для взаимодействия скриптов на стороне клиента со скриптами на стороне сервера.

Подготовка использования jQuery на веб-странице

Библиотека jQuery создает объекты и методы доступные js-скриптам веб-страницы в браузере. Библиотека не является штатной, и для ее использования веб-страница должна загрузить ее файл из оригинального репозитория //releases.jquery.com/jquery/ или другого надежного источника.

Существует несколько версий библиотеки jQuery, которые обозначаются номерами. У каждого релиза есть несколько компоновок. Компоновка Core является основной, кроме нее есть служебные Migrate и Git. Кроме того, компоновка Core существует в четырех форматах:

Uncompressed - не сжатый, полный формат библиотеки jQuery без изменений и оптимизаций, включая комментарии и отступы; удобен для отладки, но имеет наибольший объем среди остальных версии (~300KB)
Minified (.min) - формат минимизирован до ~30% за счет удаления лишних пробелов, переносов строк и комментариев
Slim (.slim) - упрощенная компоновка не содержит некоторые функции и методы, за счет чего имеет размер ~80% от полного формата
Slim Minified (.slim.min) - упрощенная и минимизированная версия составляет ~25% объема полного формата.

&lt;script src="https://code.jquery.com/jquery-3.6.4.min.js"&gt;&lt;/script&gt;

1	<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

Загрузку библиотеки для надежности часто выполняют не из репозитория, а из копии. Успешность загрузки можно проверить js-кодом:

if (typeof jQuery !== 'undefined')
  alert('jQuery loaded successfully');

1 2	if (typeof jQuery !== 'undefined') alert('jQuery loaded successfully');

Основное /Core

Данные /Data

Атрибуты элементов /Attributes

Каскадные таблицы стилей /CSS

Асинхронные серверных запросы /Ajax

Эйджакс - это функции и методы библиотеки jQuery, которые позволяют загружать данные с сервера без обновления страницы браузера.

После успешной загрузки файла jquery.js скриптам страницы становится доступен объект jQuery (альтернативно доступен как $). Возможности ajax реализуются его методами:

.ajax()

Два равноценных синтаксиса
jQuery.ajax( url [, settings ] ), jQuery.ajax( settings ) выполняют асинхронный http-запрос

url: String строка URL
settings: PlainObject набор пар ключ/значение, которые задают различные настройки запроса Ajax (ни одна настройка не является обязательной):
- url: String строка URL, куда будет направлен запрос (по умолчанию URL текущей страницы)
- success: Function( Anything data, String textStatus, jqXHR jqXHR ) A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter or the dataFilter callback function, if specified; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.
- type: String использовался до 1.9.0
  method: String устанавливает один из методов "GET", "POST", "PUT", по умолчанию "GET"
- data: PlainObject | String | Array Data to be sent to the server. If the HTTP method is one that cannot have an entity body, such as GET, the data is appended to the URL. When data is an object, jQuery generates the data string from the object's key/value pairs unless the processData option is set to false. For example, { a: "bc", d: "e,f" } is converted to the string "a=bc&d=e%2Cf". If the value is an array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below). For example, { a: [1,2] } becomes the string "a%5B%5D=1&a%5B%5D=2" with the default traditional: false setting.When data is passed as a string it should already be encoded using the correct encoding for contentType, which by default is application/x-www-form-urlencoded.In requests with dataType: "json" or dataType: "jsonp", if the string contains a double question mark (??) anywhere in the URL or a single question mark (?) in the query string, it is replaced with a value generated by jQuery that is unique for each copy of the library on the page (e.g. jQuery21406515378922229067_1479880736745).
- async: Boolean по умолчанию true, requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done()
- username: String, password: String имя пользователя и пароль, используемые в XMLHttpRequest в ответе на HTTP-запрос авторизации

$.ajax({
  url: "/my-server-script.php", // адрес скрипта на сервере, который будет обрабатывать запрос
  type: "GET", // метод запроса
  data: {param1: "value1", param2: "value2"}, // параметры запроса
  success: function(response) {
    // обработка ответа от сервера
    $("#my-div").html(response); // заменяем содержимое элемента с id="my-div" на ответ от сервера
  }
});

$.ajax({

url: "/my-server-script.php", // адрес скрипта на сервере, который будет обрабатывать запрос

type: "GET", // метод запроса

data: {param1: "value1", param2: "value2"}, // параметры запроса

success: function(response) {

// обработка ответа от сервера

$("#my-div").html(response); // заменяем содержимое элемента с id="my-div" на ответ от сервера

}

});

.load()

Метод объекта полученного с помощью jQuery
.load( url [, data ] [, complete ] ) выполняет запрос с параметрами к серверу и устанавливает полученные данные в элемент объекта

url URL строка запроса к серверу
data данные, включаемые в запрос
- тип String определяет запрос типа GET
- тип PlainObject определяет запрос типа POST
complete callback функция типа: Function( String responseText, String textStatus, jqXHR jqXHR ) вызывается при выполнении запроса

$("#my-div").load(
  "/my-server-script.php", 
  {param1: "value1", param2: "value2"},
  function( response, status, xhr ) {
    if(status == "error") {
      var msg = "Sorry but there was an error: ";
      $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});

$("#my-div").load(

"/my-server-script.php",

{param1: "value1", param2: "value2"},

function( response, status, xhr ) {

if(status == "error") {

var msg = "Sorry but there was an error: ";

$("#error").html(msg + xhr.status + " " + xhr.statusText);

}

});

$("#my-div").load(
  "/my-server-script.php", 
  {param1: "value1", param2: "value2"}); // загрузка содержимого ответа сервера в элемент с id="my-div"

$("#my-div").load(

"/my-server-script.php",

{param1: "value1", param2: "value2"}); // загрузка содержимого ответа сервера в элемент с id="my-div"

$(<span class="hljs-variable language_">document</span>).<span class="hljs-title function_">ready</span>(<span class="hljs-keyword">function</span>() {
  $(<span class="hljs-string">"p"</span>).<span class="hljs-title function_">hide</span>();
});

$(document).ready(function() {

$("p").hide();

});

Обработка запросов JQuery на стороне сервера

Для серверных скриптов ajax-запросы отличаются тем, что http-заголовок X-Requested-With получает значение XMLHttpRequest. Например, в PHP:

if ($_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest')
    // AJAX request

1 2	if ($_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest') // AJAX request

Promise Fetch

Язык JavaScript > Промисы, async/await //learn.javascript.ru
Использование Fetch //developer.mozilla.org
Введение в fetch //habr.com

Axios

Axios > Введение > Axios API //axios-http.com

Джерела

jsTree jquery plugin //www.jstree.com

M	T	W	T	F	S	S
« Nov
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Рекс – друг у світі комп'ютерів