- JavaScript function that returns result of ajax call
- 2 Answers 2
- Руководство по Ajax в JavaScript
- Как работает Ajax
- Отправка запроса и получение ответа
- Выполнение AJAX GET-запроса
- Выполнение AJAX POST-запроса
- Похожие посты
- Руководство по сортировке массивов в JavaScript
- Руководство по массивам в JavaScript
- Руководство по работе с атрибутами DOM в JavaScript
JavaScript function that returns result of ajax call
Help needed. Im writing a function that returns result of ajax call but i did not get any results, i guess it’s a scope issue, but is there any way to do it? Here is my code:
function Favorites() < var links; $.ajax(< type: "GET", url: "/Services/Favorite.svc/Favorites", data: "<>", contentType: "application/json; charset=utf-8", dataType: "json", cache: false, success: function(msg) < links = (typeof msg.d) == 'string' ? eval('(' + msg.d + ')') : msg.d; >>); return links; >;
2 Answers 2
Ajax is asynchronous, i.e. when return links is executed, the callback function in success might not even have been called.
Extend your function to accept a callback:
function Favorites(callback) < var links; $.ajax(< type: "GET", url: "/Services/Favorite.svc/Favorites", data: "<>", contentType: "application/json; charset=utf-8", dataType: "json", cache: false, success: callback >); >;
var callback = function(msg) < links = (typeof msg.d) == 'string' ? eval('(' + msg.d + ')') : msg.d; // do other stuff with links here >Favorites(callback);
Your problem is that the HTTP request you’re making is asnychronous and your Favorites function returns before the Ajax request has come back. You will need to change your function so that it accepts a callback to be executed once the response has come back:
function Favorites(callback) < $.ajax(< type: "GET", url: "/Services/Favorite.svc/Favorites", data: "<>", contentType: "application/json; charset=utf-8", dataType: "json", cache: false, success: function(msg) < var links = (typeof msg.d == 'string') ? eval('(' + msg.d + ')') : msg.d; callback(links); >>); >; Favorites( function(links) < alert(links); >);
Aside: convention is that only functions intended to be used as constructors should start with a capital letter, so your function would be better named as favorites .
Руководство по Ajax в JavaScript
Ajax расшифровывается как Asynchronous Javascript And Xml. Ajax — это просто средство загрузки данных с сервера и выборочного обновления частей веб-страницы без перезагрузки всей страницы.
По сути, Ajax использует встроенный в браузер объект XMLHttpRequest (XHR) для асинхронной отправки и получения информации на веб-сервер и с него в фоновом режиме, не блокируя страницу и не влияя на работу пользователя.
Ajax стал настолько популярным, что вы вряд ли найдете приложение, которое в некоторой степени не использует Ajax. Примером некоторых крупномасштабных онлайн-приложений на основе Ajax являются: Gmail, Google Maps, Google Docs, YouTube, Facebook, Flickr и многие другие.
Ajax — это не новая технология, на самом деле Ajax вообще не является технологией. Ajax — это просто термин, обозначающий процесс асинхронного обмена данными с веб-сервера через JavaScript без обновления страницы.
Не смущайтесь букве X (то есть XML ) в термине AJAX. Он сохранился в аббревиатуре по историческим причинам. Другой формат обмена данными, такой как JSON, HTML или простой текст, может использоваться вместо XML.
Как работает Ajax
Для осуществления Ajax-связи JavaScript использует специальный объект, встроенный в браузер — объект XMLHttpRequest (XHR) — для отправки HTTP-запросов на сервер и получения данных в ответ.
Все современные браузеры (Chrome, Firefox, IE7 +, Safari, Opera) поддерживают объект XMLHttpRequest .
Следующая иллюстрация демонстрирует, как работает Ajax-связь:
Поскольку Ajax-запросы обычно являются асинхронными, выполнение сценария продолжается, как только отправляется запрос Ajax, т. е. браузер не будет останавливать выполнение сценария до тех пор, пока ответ сервера не вернется.
В следующем разделе мы обсудим каждый шаг, вовлеченный в этот процесс один за другим:
Отправка запроса и получение ответа
Прежде чем выполнить Ajax-связь между клиентом и сервером, первое, что вы должны сделать, — создать экземпляр объекта XMLHttpRequest , как показано ниже:
var request = new XMLHttpRequest();
Теперь следующим шагом при отправке запроса на сервер является создание экземпляра вновь созданного объекта запроса с помощью метода open() объекта XMLHttpRequest .
Метод open() обычно принимает два параметра — метод HTTP-запроса для использования, такой как «GET», «POST» и т. д., и URL-адрес для отправки запроса, например:
request.open("GET", "info.txt"); -Or- request.open("POST", "add-user.php");
Файл может быть любого типа, например .txt или .xml , или файлы скриптов на стороне сервера, например .php или .asp , которые могут выполнять некоторые действия на сервере (например, вставка или чтение данных из базы) перед отправкой ответа.
Чтобы отправитт запрос на сервер используйте метод send() объекта XMLHttpRequest .
request.send(); -Or- request.send(body);
Метод send() принимает необязательный параметр body , который позволяет нам указать тело запроса. В основном это используется для запросов HTTP POST, так как запрос HTTP GET не имеет тела запроса, а только заголовки.
Метод GET обычно используется для отправки небольшого объема данных на сервер, в то время как метод POST используется для отправки большого объема данных, таких как данные формы.
В методе GET данные отправляются как параметры URL. Но в методе POST данные отправляются на сервер как часть тела HTTP-запроса. Данные, отправленные методом POST, не будут видны в URL.
См. Руководство по GET и POST запросам в PHP для подробного сравнения этих двух методов.
В следующем разделе мы подробнее рассмотрим, как работают Ajax-запросы.
Выполнение AJAX GET-запроса
GET-запрос обычно используется для получения или извлечения некоторой информации с сервера, которая не требует каких-либо манипуляций или изменений в базе данных, например, выборка результатов поиска на основе термина, выборка пользовательских данных на основе их идентификатора или имени, и так далее.
В следующем примере показано, как сделать AJAX GET-запрос в JavaScript.
Содержимое поля DIV результата будет заменено ответом сервера
Когда запрос асинхронный, метод send() возвращается сразу после отправки запроса. Поэтому перед обработкой необходимо проверить, где находится ответ в его жизненном цикле, используя свойство readyState объекта XMLHttpRequest .
readyState — это целое число, которое указывает состояние HTTP-запроса. Кроме того, функция, назначенная обработчику события onreadystatechange , вызывается каждый раз, когда изменяется свойство readyState . Возможные значения свойства readyState приведены ниже.
Номер | Значение | Описание |
---|---|---|
0 | UNSENT | Объект XMLHttpRequest создан, но метод open() еще не был вызван (т.е. запрос не инициализирован). |
1 | OPENED | Вызван метод open() (т.е. установлено соединение с сервером). |
2 | HEADERS_RECEIVED | Метод send() был вызван (то есть сервер получил запрос). |
3 | LOADING | Сервер обрабатывает запрос. |
4 | DONE | Запрос обработан и ответ готов. |
Теоретически событие readystatechange должно запускаться каждый раз, когда изменяется свойство readyState . Но большинство браузеров не запускают это событие, когда readyState изменяется на 0 или 1. Однако все браузеры запускают это событие, когда readyState изменяется на 4.
Свойство status возвращает числовой код состояния HTTP ответа XMLHttpRequest . Некоторые из распространенных кодов состояния HTTP перечислены ниже:
- 200 — Сервер успешно обработал запрос.
- 404 — Сервер не может найти запрошенную страницу.
- 503 — Сервер временно недоступен.
Подробнее см. Список HTTP-кодов состояний о статусе запроса для получения полного списка кодов ответов.
Вот код из нашего файла greet.php , который просто создает полное имя человека, объединяя его имя и фамилию и выводя приветственное сообщение.
Выполнение AJAX POST-запроса
Метод POST используется в основном для отправки данных форм на веб-сервер. В следующем примере показано, как отправить данные форм на сервер с помощью Ajax.