Надсилання форм за допомогою Ajax’a - Блог веб-розробників

допомогою

Навіщо це потрібно?

Створення об'єкта XMLHttpRequest

Надсилання запиту

Для відправкиGET -запиту будемо використовувати функціюsendGetRequest :

Код функціїurlEncodeData, яка дозволяє уникнути некоректних запитів і допомагає усунути проблеми з кодуванням, виглядає так:

Ця функція ліпить рядок виду 'par1=value1∥par2=value2&..&parn=valuen' з асоціативного масиву . При цьому параметри та їх значення обробляються функцією encodeURIComponent. Ця функція перетворює компонент запиту на вигляд, безпечний для передачі на сервер. Вона кодує всі символи escape-послідовностей у кодуванні UTF-8, крім букв латинського алфавіту, десяткових цифр і !*()’. Наприклад, ми хочемо передати на сервер наступні дані:

Тоді тіло запиту буде виглядати так: 'par1=value1&value2&par2=value3' і на сервері буде прийнято:

Array ([par1] => value1, [value2] => '', [par2] => value3 );

Так само ця функціяencodeURIComponent дозволяє уникнути проблем із кодуванням. Справа в тому, що ajax завжди передає текст в UTF-8 і, якщо цей текст не перекодувати в це кодування, то на сервері отримаємо купу «крокозябр».

Генерація тіла запиту

Тепер ми переходимо до найголовнішого - до написання функції, яку назвемо PostForm . Вона формуватиме і надсилатиме запит, ґрунтуючись на даних введених у форму.

Як параметри функція приймає об'єкт для надсилання запитів, форму яку потрібно надіслати і функцію, яка буде викликана, як тільки сервер відповість на запит.

ФункціяgetRequsetBody приймає як параметр форму. З даних, які введеніу поля форми створюється асоціативний масив із пар ім'яПоля: значенняПоля

function getRequestBody(form) < var par = <>, el; for(var i = 0; iПриклад використання

Тепер перевіримо, як усе це працює. На запити відповідатиме скрипт, записаний у файлі action.php. Виглядає він так:

У цьому скрипті ми, якщо вPOST -заросі хоч щось передано, перетворимо значення параметрів із кодування UTF-8, в якому вони прилетіли до WINDOWS-1251 і відправляємо назад на клієнт їх у форматованому вигляді. Жодної обгортки даних у html робити не будемо, оскільки наша мета лише продемонструвати роботу скрипта.