AJAX (асінхронны JavaScript і XML) - гэта метад стварэння бясшвовых інтэрактыўных вэб-сайтаў з дапамогай асінхроннага абмену дадзенымі паміж кліентам і серверам. AJAX палягчае зносіны з серверам ці частковыя абнаўлення старонак без традыцыйнага абнаўлення старонкі.

пазначае асінхронны і .

Хоць гэта не тэхналогія сама па сабе, - гэта тэрмін, прыдуманы ў 2005 годзе Джэсі Джэймсам Гарретт , які апісвае падыход да сумеснага выкарыстання шэрагу існуючых тэхналогій, у тым ліку: / , , [TG01], , , і, самае галоўнае, аб'ект XMLHttpRequest . выкарыстоўвае API XMLHttpRequest (скарочана ) для кіравання запытамі з кода.

Што робіць настолькі карысным, так гэта яго асінхронны характар абмену дадзенымі. Да яго з'яўлення дадзеныя маглі адпраўляцца толькі падчас фазы ўзаемадзеяння з кліентам (калі вэб-старонка запытваецца ўпершыню). Гэта азначала, што ўсе дадзеныя павінны былі быць альбо загружаныя падчас загрузкі, альбо вам прыйшлося б "скідаць" дадзеныя разам з дапамогай аперацый GET або POST (г.зн. Загружаць старонку, змяняць дадзеныя, адпраўляць дадзеныя, загружаць старонку і г.д .). Ні загрузка усяго набору дадзеных у кліент, ні перазагрузка базавай старонкі з кожным запытам GET або POST ня былі таннымі з пункту гледжання рэсурсаў. змяніў вэб-мадэль з дапамогай JavaScript для асінхроннай загрузкі дадзеных у кліент.

Кліент адкрывае новы XMLHttpRequest і запытвае вэб-старонку, як пры звычайным выкліку кліента. Аднак гэты запыт звычайна накіраваны на адмысловую старонку, якая загружае толькі дадзеныя для JavaScript. Такім чынам, дадзеныя, якімі неабходна абменьвацца, могуць быць абмежаваныя толькі тым, што неабходна для гэтай канкрэтнай функцыі, эканомячы час, памяць і прапускную здольнасць. Паколькі яно асінхронныя, гэта ўзаемадзеянне не павінна блакаваць якія-небудзь іншыя дзеянні, якія выконваюцца на вэб-старонцы, і яно дазваляе кліенту / браўзэру паводзіць сябе як праграма з вэб-сайтам, абменьваючыся дадзенымі па меры неабходнасці без перазагрузкі якіх-небудзь іншых рэсурсаў.

Хоць "X" ў пазначае , любы тып дадзеных можа быць адпраўлены і атрыманы. ( натацыя аб'ектаў JavaScript ) замяніў ў якасці пераважнага фармату абмену дадзенымі. Асноўная прычына гэтага заключаецца ў тым, што JavaScript першапачаткова аналізуе , тады як павінен аналізавацца значна больш павольным і грувасткім наборам кліенцкіх бібліятэк . Сёння з дапамогай новых аб'ектаў responseType ( ArrayBuffer , Blob і г.д.) Вы нават можаце запытваць двайковыя файлы праз XMLHttpRequest і ствараць больш магутныя і поўнафункцыянальныя вэб-прыкладанні.

XMLHttpRequest з'яўляецца асноўным метадам ўзаемадзеяння з серверам і кліентам; гэта падтрымліваецца ўсімі сучаснымі браўзэрамі. Раннія версіі Internet Explorer (IE 5 і 6) не падтрымліваюць уласны API , хоць яны падтрымліваюць API , які мае большасць магчымасцяў (прыкладам гэтага з'яўляецца new ActiveXObject("MSXML2.XMLHTTP.3.0") ). Важна адзначыць, што XMLHttpRequest пры непасрэдным выкарыстанні павінен апрацоўваць ўзровень сувязі і чакаць завяршэння адказу на запыт. Вы можаце ўбачыць гэта ў радку if (xmlhttp.readyState == 4 xmlhttp.status == 200) у прыведзеным ніжэй прыкладзе. Гэты тэст правярае, завершана Ці стан запыту і ці атрымаў ён правільны адказ 200. Прычына ў тым, што гэтая функцыя зваротнага выкліку будзе выклікацца кожны раз, калі кліент атрымлівае пакет ад сервера.


Прыклад AJAX:

 var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4  xmlhttp.status == 200) { //stuff to do with response text (xmlhttp.responseText) } } xmlhttp.open("GET", "url", true); xmlhttp.send(); 

AJAX Прыклад 2:

 function (url, params) { // IE 5.5+ and every other browser var xhr = new(window.XMLHttpRequest || ActiveXObject)('MSXML2.XMLHTTP.3.0'); xhr.open("POST", url, true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8"); xhr.setRequestHeader("Accept", "application/json"); xhr.onreadystatechange = function () { if (this.readyState === 4) { if (this.status >= 200  this.status < 400) { console.log(JSON.parse(this.responseText)); } } } xhr.send(params); xhr = null; }, 

Паколькі гэта дадае складанасці ў , ёсць шмат бібліятэк , якія будуць апрацоўваць гэта ўзаемадзеянне для вас. Ніжэй прыведзена шырока выкарыстоўваная бібліятэка і яе спрашчэнне .


Прыклад jQuery AJAX:

 $.ajax({ url: "url", context: document.body }).done(function() { //stuff to do with response text }); 

У Chrome 42, Edge 14 і Firefox 39/52 з'явіўся новы API, званы fetch які значна спрашчае ў браўзэрах. Няма падтрымкі для Internet Explorer. fetch заснавана на абяцанне.

Атрымаць прыклад AJAX:

 fetch('/url').then(res => res.json()).then(jsonData => console.log(jsonData)); fetch('/url', { method: 'POST', body: JSON.stringify({id: 1}), }) .then(res => res.json()).then(jsonData => console.log(jsonData)); 

Спіс фреймворков AJAX:

  1. JQuery UI
  2. MooTools
  3. прататып
  4. бібліятэка YUI
  5. ASP.NET AJAX
  6. Spry Framework
  7. Dojo Toolkit
  8. Ext JS
  9. Backbone.js
  10. AngularJS
  11. Unified.JS

рэсурсы: