От доста дълго време много сайтове имат динамични страници, тоест те се актуализират без презареждане. Това се постига чрез извикване на сървъра чрез JavaScript, в повечето случаи POST и GET заявки. И почти винаги такива сайтове използват Ajax за това. И не всеки знае (за съжаление), че Ajax не е отделен език, а просто библиотека на JavaScript. Заключение: Ajax е просто удобен начин за изпращане на POST заявки, но всичко това може да се направи и без неговата помощ. Ето как да изпращате POST заявки чрез JavaScript без Ajax, ще разгледам в тази статия.

Сега ще решим една класическа задача - сумирането на две числа, зададени от потребителя. Тоест ние с вас броим 2 числа от текстови полета, изпращаме ги на сървъра, получаваме отговор и ги показваме на страницата. И всичко това без презареждане на страницата.

Нека започнем с нещо просто: писане на PHP код:

Тук всичко е елементарно, така че дори няма да коментирам. Сега идва по-трудната част - клиентската страна:

/* Тази функция създава XMLHTTP обект за различни браузъри */
функция getXmlHttp() (
var xmlhttp;
опитвам (
xmlhttp = нов ActiveXObject("Msxml2.XMLHTTP");
) улов (д) (
опитвам (
xmlhttp = нов ActiveXObject("Microsoft.XMLHTTP");
) хващам (E) (
xmlhttp = невярно;
}
}
if (!xmlhttp && typeof XMLHttpRequest!="недефиниран") (
xmlhttp = нов XMLHttpRequest();
}
връщане xmlhttp;
}
функция summa() (
var a = document.getElementById("a").value; // Прочетете стойността на a
var b = document.getElementById("b").value; // Прочетете стойността на b
var xmlhttp = getXmlHttp(); // Създаване на XMLHTTP обект
xmlhttp.open("POST", "test.php", true); // Отваряне на асинхронна връзка
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Изпращане на кодиране
xmlhttp.send("a=" + encodeURIComponent(a) + "&b=" + encodeURIComponent(b)); // Изпращане на POST заявка
xmlhttp.onreadystatechange = function() ( // Изчакване на отговор от сървъра
if (xmlhttp.readyState == 4) ( // Пристигна отговор
if(xmlhttp.status == 200) ( // Сървърът върна код 200 (което е добре)
document.getElementById("сума").innerHTML = xmlhttp.responseText; // Отпечатване на отговора на сървъра
}
}
};
}

Сумата е:

Няма да коментирам HTML кода, тъй като е напълно прозрачен. Но ще добавя малко към JavaScript, въпреки подробните коментари. Първо, функцията getXmlHttp() е обща. Можете спокойно да го копирате във вашите скриптове. Неговата задача е да върне такъв XMLHTTP, така че да работи във всеки браузър. Тъй като най-популярната опция е new XMLHttpRequest(), обаче, тя не работи в IE6 например. Другите опции също не са универсални, така че тук просто избираме работеща опция за всеки браузър.

Писах и в коментарите за „асинхронна работа“. Има и синхронен вариант. Единствената разлика е, че в синхронен режим, докато не се получи отговор от сървъра, браузърът няма да работи, просто ще виси. Трудно ми е да измисля задача, където това е необходимо, така че веднага написах асинхронна версия. Работи така: изпращаме заявка и чакаме отговор, но браузърът не виси. И когато пристигне отговорът (xmlhttp.readyState == 4), ние незабавно обработваме отговора. Това е асинхронната версия на работа, тя е малко по-сложна, но е единствената, която трябва да се използва (с изключение на много редки случаи).

Ето как POST заявките се изпращат чрез JavaScript. Както можете да видите, изобщо не ни трябваше Ajax. И силно препоръчвам, ако имате само няколко заявки за целия сайт, тогава дори не си помисляйте да използвате тази тежка библиотека, а използвайте материала в тази статия.

GET заявка

Заявка GET или POST се изпраща чрез XMLHttpRequest обект (наричан накратко XHR).

// изпълнение на кода, когато пристигне отговорът от GET заявката // код, когато заявката е успешна // Изпращане на GET заявка ajax.open("GET" , "/handler.php" ); ajax.setRequestHeader("X-Requested-With", "XMLHttpRequest"); ajax.send();

Струва си да обърнете внимание на метода setRequestHeader(). Този метод казва на сървъра, че е изпратена Ajax заявка. Много рамки, като jQuery, задават тази заглавка по подразбиране. Ако не зададете тази заглавка, сървърът може да не открие Ajax заявката и да върне грешка.

Можете да изпращате GET или POST заявка само в текущия домейн на сайта (поради правилото за ограничаване на домейна, наричано още „Политика за същия произход“).

Методът open() може да приеме и трети параметър, false, който прави заявките синхронни (тоест кодът спира да се изпълнява, докато не пристигне отговор от сървъра). Този метод се счита за непрепоръчителен за употреба, т.к може да забави JavaScript. Браузърът Chrome също показва предупреждение в конзолата, когато се използва тази опция.

POST заявка

Първо трябва да посочите какви данни искате да изпратите:

// Стари браузъри var params = "lang=JavaScript&framework=jQuery" ; // Съвременни браузъри var params = new FormData(); params.append("lang" , "JavaScript"); params.append("framework" , "jQuery" );

Обектът FormData() се поддържа от съвременните браузъри (IE поддръжка от IE 10).

Можете също да подадете елемент на формуляр към FormData(), чиито полета ще бъдат предадени в POST заявката.

var params = new FormData(document .getElementById("form-name" )); // 1-ви метод var params = new FormData(document .forms["form-name" ]); // 2-ри метод

Създадените параметри могат да бъдат предадени чрез метода send().

var ajax = нов XMLHttpRequest(); // изпълнява кода, когато пристигне отговорът от POST заявката ajax.onreadystatechange = function () ( if (ajax.readyState == 4 ) ( if (ajax.status == 200 || ajax.status == 304 ) ( / / код за успешна заявка ajax.response; // отговор на сървъра ) else ( // код за грешка ) ) ) // Изпращане на POST заявка ajax.open("POST " , "/ajax-handler.php" ); ajax.setRequestHeader("X-Requested-With", "XMLHttpRequest"); ajax.send(параметри); Моля, активирайте JavaScript, за да видите дефиницията и приложението на jQuery AJAX

Функцията jQuery $.post() ви позволява да изтегляте данни от сървъра, като използвате HTTP заявка, използвайки метода POST. За да изтеглите данни чрез метода на HTTP заявка ВЗЕМЕТЕможете да използвате функцията jQuery $.get().

Моля, обърнете внимание, че функцията $.post() е съкратена версия на функцията $.ajax() със следните параметри:

$.ajax(( type : "POST " // HTTP метод, използван за url на заявката : "url ", // низ, съдържащ URL адреса, до който се изпраща заявката data : data, // данни, които ще бъдат изпратени до сървър успех : успех , // функция за обратно извикване, която се извиква, ако AJAX заявката е завършена успешно dataType : "dataType " // типът данни, който очаквате да получите от сървъра ));

Метод ВЗЕМЕТЕЗа разлика от ПУБЛИКУВАНЕКогато формулярът бъде изпратен, той предава събраната информация като част от URL адреса:

Url?name=value&name=value // Методът GET използва двойки име = стойност

При изпращане на данни чрез метода ПУБЛИКУВАНЕданните се предават по такъв начин, че потребителят вече не вижда данните, изпратени до манипулатора на формуляра (добавя данни от формуляра в тялото на http заявката, което не се показва в URL адреса).

Обърнете внимание на някои нюанси, когато работите с HTTP методи ВЗЕМЕТЕИ ПУБЛИКУВАНЕ:

• Метод ВЗЕМЕТЕограничава количеството информация, предавана в URL (около 3000 знака), методът ПУБЛИКУВАНЕняма такива ограничения.
• Никога не използвайте метода ВЗЕМЕТЕ, ако трябва да прехвърлите чувствителни данни (например паролата на потребителя, тъй като тя ще бъде прехвърлена в URL низа - в чист текст).
• Страницата, генерирана от метода ВЗЕМЕТЕ, можете да го маркирате с отметка (адресът на страницата винаги ще бъде уникален) и страницата, генерирана от метода ПУБЛИКУВАНЕТова не е възможно, тъй като адресът на страницата не се променя (в URL адреса не се предават данни).
• Моля, имайте предвид, че използването на метода ВЗЕМЕТЕМожете да прехвърляте данни не чрез формуляр, а чрез URL адреса на страницата.

jQuery синтаксис: 1.0 синтаксис: $.post( URL адрес, данни, успех, dataType); URL адрес- Струна данни- PlainObject или String успех-Функция(Обикновен обект данни, низ textStatus,jqXHR jqXHR) dataType- Синтаксис на низове 1.12/2.2: $.post(( настройки) ); // параметрите на заявката се предават в обекта настройки-Обикновен обект

Страниците, заредени от функцията $.post(), никога не се кешират, поради което стойностите на кеша (определя дали страниците ще бъдат кеширани, по подразбиране е true) и ifModified (проверява полетата на заглавката Last-Modified, по подразбиране е false ) параметри на функцията jQuery .ajaxSetup() (задава стойности по подразбиране за бъдещи заявки AJAX) няма да повлияе на тези заявки.

Добавени в jQuery 1.0 Стойности на параметрите Параметър Описание

URL адрес	Ред, съдържащ URL адресадрес, на който се изпраща AJAXискане. Задължителен параметър.
данни	Обект или низ, който ще бъде изпратен до сървъра заедно с AJAXискане.
успех	Функция за обратно извикване, която се извиква if AJAXзаявката ще завърши успешно. Незадължителен параметър. Функцията приема следните параметри: данни- данни, върнати от сървъра. textStatus- низ, описващ състоянието на заявката. jqXHR- jqXHR обект (до версия jQuery 1.4.x XMLHttpRequest обект).
dataType	Определя типа данни, които очаквате да получите от сървъра. Ако типът данни не е посочен, тогава jQuery ще се опита да го определи въз основа на MIME типа от отговора ( XMLТип MIMEще доведе до XML, считано от jQuery 1.4 jsonще даде обект JavaScript, сценарийще изпълни скрипта и всичко останало ще бъде върнато като низ). Незадължителен параметър. Налични типове (резултатът се предава като първи аргумент на функцията за успешно извикване): "xml" - връща XMLдокумент, който може да бъде изобразен с помощта на jQuery. "html" - връща HTMLкато обикновен текст, етикетите ще бъдат обработени и изпълнени, след като бъдат вмъкнати в обектния модел на документа ( DOM). "скрипт" - оценява отговора като JavaScriptи го връща като обикновен текст. Деактивира кеширането чрез добавяне на параметъра _= към низа на заявката, дори ако параметърът на кеша е true. Това ще обърне метода ПУБЛИКУВАНЕ V ВЗЕМЕТЕза междудомейн заявки. "json" - оценява отговора като JSONи връща обект JavaScript. Междудомейн "json"заявките се преобразуват в "jsonp", ако jsonp не е посочен в параметрите на заявката: false . Данни JSONсе анализират в строг ред и трябва да отговарят на общоприетия формат, всички неправилни JSONсе отхвърля и се извежда грешка. От jQuery 1.9 празен отговор не се приема; сървърът трябва да върне NULL или () като отговор. "jsonp" - зарежда данни във формат JSON, използвайки формата за изтегляне JSONP. Добавя допълнителен параметър "?callback=? " в края URL адресадреси за указване на името на функцията манипулатор. Деактивира кеширането чрез добавяне на параметъра _= към URL адресадрес, дори ако параметърът на кеша е true. "текст" е обикновен текстов низ. множество стойности - стойностите са разделени с интервал. От версия 1.5 jQuery може да преобразува типа данни, който е получен в Content-Type на заглавката, в типа данни, който ви е необходим. Например, ако искате текстов отговор да се интерпретира като XML, използвайте „текстов XML“ за този тип данни. Можете също да направите JSONP заявка, да я получите като текст и да я интерпретирате като XML: "jsonp текстов XML" . Следният ред ще направи същото: "jsonp XML", jQuery ще се опита да преобразува от JSONP V XML, след неуспешен опит ще се опита да конвертира JSONPв текста и след това от текста в XML.

Пример за използване Пример за използване на функция jQuery $.post() $(document).ready(function ()( $("form ").submit(function ()( var formData = $(this).serialize(); / / създайте променлива, която съдържа кодиран набор от елементи на формуляр като низ $.post("user.php ", formData, функция( данни) ( // прехвърляне и изтегляне на данни от сървъра чрез HTTP заявка, използвайки POST метода $("div ").html( данни); // вмъкване на данни, получени от сървъра в елемента ) ) ) ); ) );

В този пример ние обвързваме JavaScript"submit" събитие манипулатор (form submission handler), който се задейства в момента на изпращане на формуляра (в нашия случай попълване) при щракване върху елемент с тип submit (бутон за изпращане на формуляра).

Освен това създаваме променлива, която съдържа кодиран набор от елементи на формуляр като низ - резултатът от изпълнението на метода .serialize(). След това, използвайки функцията jQuery $.post(), изпълняваме асинхронна AJAX заявка със следните параметри:

• url е файлът, до който имаме достъп ("user.php"), той съдържа следния PHP код: Резултат ("a":1,"b":2,"c":3,"d":4,"e ":5) PHP пример за функцията json_decode $json = "("a":1,"b":2)"; var_dump(json_decode($json, true)); $arr = json_decode($json, вярно); ехо "
  ".$arr["a"]."
  ".$arr["b"]."
  "; Result array(5) ( ["a"] => int(1) ["b"] => int(2) ) 1 2 Пример за Ajax заявка, използваща метода POST

  И какво ще правим:
  Ние проверяваме коректността на изпратените данни (чрез AJAX POST заявка) (данните се въвеждат от потребителя). Ако данните са правилни, показваме съобщение. В противен случай добавяме червено подчертаване към полетата. Всичко работи асинхронно, тоест без презареждане на страницата. Можете да използвате този принцип, например, за да създадете система за коментари, която вмъква коментари в база данни.

  
  

  jQuery $(document).ready(function())( var working = false; /* Този флаг предотвратява изпращането на множество коментари: */ $("form").submit(function(e)( e.preventDefault() ; if(работи) връща false; работи = true; $("#submit").val("Изчакайте.."); $(".error").removeClass("error"); $.post("submit .php" ,$(this).serialize(),function(msg)( /* Изпратете стойностите на формуляра до submit.php: */ work = false; $("#submit").val("Submit" ); if(msg. status) // Ако данните са правилни, добавете съобщение ( console.log(msg.status); $(msg.html).hide().insertBefore("form").slideDown() ; ) else ( // Ако има грешки, преминете през обекта // msg.errors и ги покажете на страницата $.each(msg.errors,function(k,v)( $("#"+k). addClass("грешка"); //предупреждение(k); )); ) ),"json"); )); )); HTML Въведете номер Въведете имейл PHP // приемане на данни, получени чрез ajax $arr = $_POST; $arr = $_POST; if(filter_var($arr, FILTER_VALIDATE_EMAIL) && filter_var($arr, FILTER_VALIDATE_INT)) ( echo json_encode(array("status"=>1,"html"=>"Благодарим ви, данните ви са точни")); // сървър върна информация) else ( if(filter_var($arr, FILTER_VALIDATE_EMAIL) == false) ( $errors["email"] = "Моля, въведете име."; ) if(filter_var($arr, FILTER_VALIDATE_INT) == false) ( $ errors["intt"] = "Моля, въведете име."; ) $arr = $errors; /* Показване на съобщения за грешка */ echo "("status":0,"errors":".json_encode($arr ) ")"; )

  JQuery е библиотека на javascript, чиято цел е „пишете по-малко, правете повече“. jQuery е лесен за свързване към вашия сайт и започване на използване. jQuery прави много по-лесно използването на javascript на вашия сайт.

  jQuery елиминира много редове от javascript код и ви позволява да имплементирате целия този набор от редове само с един метод.

  Какво е AJAX?

  AJAX е асинхронен (т.е. браузърът може да прави каквото си поиска след изпращане на заявка, като показване на съобщение, чакащо отговор, превъртане на страницата и т.н.) JavaScript и XML. Използва се за създаване на динамични и бързи уеб страници. AJAX ни позволява да актуализираме част от уеб страница, без да презареждаме цялата страница.

  Какво ще кажете за jQuery и AJAX?

  Комбинацията от jQuery и AJAX осигурява мощна функционалност. С jquery и ajax можете да направите заявка и да получите информация в различни формати, включително XML, HTML и дори обикновен текст. Можете да използвате формата JSON за обмен на данни. Можем да използваме данните, получени чрез ajax заявка в нашата html страница.

  jQuery прави съществуващия браузър Ajax API по-мощен и по-лесен за използване. Осъществяването на ajax извиквания по нормалния начин с помощта на javascript е малко сложно: тъй като трябва да имате предвид, че различните браузъри изискват различни подходи за създаване на обекта XMLHttpRequest. Освен това изпращането на данни, например от формуляри, става по-трудно, ако използвате обикновен javascript за извикването на ajax.

  jQuery предоставя проста и мощна функционалност, която разширява AJAX методите на javascript и осигурява по-гъвкав подход.

  В тази кратка статия ще ви покажа как да използвате jQuery и AJAX в проста php форма. Нека да започнем... За да използваме jQuery и AJAX ще ни трябват два файла, като първия файл ще съдържа html/php кода, чрез който ще бъде направена ajax заявката. Във втория файл ще обработим ajax заявката и ще върнем резултата на първата страница.

  Стъпка 1: Създайте файл school.php и поставете следния код в него:

  В горния код получаваме името и номера на ученика и използвайки jquery и ajax, ги изпращаме на details.php.

  функция getdetails())( var name = $("#name").val(); var rno = $("#rno").val(); $.ajax(( тип: "POST", url: " подробности .php", данни: (fname:име, id:rno) )).done(функция(резултат) ( $("#msg").html(" Адрес на ролка № " +rno +" е "+резултат ) ; )); )

  Твоето име:
  Номер на ролка:

  Стъпка 2: Създайте details.php и поставете следния код в него:

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

  За този пример ще трябва да създадете училищна база данни и таблица за ученици. Таблицата на ученика съдържа полета с имена, поредни номера и адреси.

  Надявам се да намерите тази статия за полезна.