Jquery – одна из популярных Javascript библиотек. Она достаточно хорошо ориентирована для разработки ajax-приложений. При этом код получается очень компактным.
Я рассмотрю 3 подхода из множества возможных:
1. Стандартный, через $.post и $.get
2. Загрузка данных в элемент через $.load
3. Подгрузка скрипта с сервера с помощью getScript.
1. Стандартный, через $.post и $.get
Функции $.post и $.get посылают необходимые параметры и возвращают данные в скрипт. Имеют синтаксис
|
|
$.post(url[, params[, callback]]) $.get(url[, params[, callback]]) |
|
где url – ссылка на скрипт, params – массив параметров, callback – функция, которая вызывается в случае успешного выполнения запроса и получает в качестве параметра данные, которые получены с сервера.
Пример
html-страница. В область area мы будем записывать данные, полученные со скрипта.
|
|
<html> <head> <title>Тест</title> <script language="javascript" src="scr.js"></script> </head> <body> Данные, полученные с сервера: <span id="area"></span> <input type="button" onclick="getdata()" /> </body> </html> |
|
javascipt-файл. Функция onSuccess вызывается когда данные приходят со скрипта и записываются в область area.
|
|
function onSuccess(data) { $("#area").html(data); } function getdata() { $.post("ajax.php", {a: 10, b:20}, onSuccess); } |
|
php-файл. Скрипт возвращает произведение параметров.
|
|
header( "Content-Type: text/html; charset=utf-8" ); echo $_POST['a']*$_POST['b']; |
|
2. Загрузка данных в элемент через $.load
Данные в предыдущем примере можно было подгрузить в одну строчку с помощью функции:
|
|
load(url[, params[, callback]]); |
|
где url – скрипт, откуда брать данные, а callback – функция, которая будет вызываться в случае успешного выполнения запроса.
Функция вызывается так:
|
|
$("#area").load("ajax.php"); |
|
3. Подгрузка скрипта с сервера с помощью getScript.
И последний способ – подгрузка и выполение файла с javascript. Это делается с помощью функции:
|
|
getScript(url[, callback]) |
|