Как сделать AJAX-вызов с использованием JavaScript, без использования jQuery?
javascript
ajax
discky
источник
источник
Ответы:
С «ванильным» JavaScript:
С помощью jQuery:
источник
Используя следующий фрагмент, вы можете довольно легко сделать похожие вещи, например:
Вот фрагмент:
источник
return x.responseText;
- и затем возвращаю каждый изajax.send
вызовов.ajax.get('/test.php', {foo: 'bar'}, function(responseText) { alert(responseText); });
query.join('&').replace(/%20/g, '+')
вместо этого?Я знаю, что это довольно старый вопрос, но теперь есть более приятный API, доступный изначально в новых браузерах .
fetch()
Метод позволяет сделать веб - запросов. Например, чтобы запросить JSON от/get-data
:Смотрите здесь для более подробной информации.
источник
<script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>
и используй fetch как чемпион.Вы можете использовать следующую функцию:
Вы можете попробовать похожие решения онлайн по этим ссылкам:
источник
GET
, так что вы можете просто добавить их к запросу, но если быть более общим, я с вами, я действительно думал об обновлении ответа, чтобы принимать параметры запроса в качестве параметра функции здесь , & также передать метод (GET
илиPOST
), но что остановило меня, так это то, что я хочу, чтобы ответ здесь был как можно более простым, чтобы люди попробовали его как можно быстрее. На самом деле, я ненавидел некоторые другие ответы за то, что слишком долго, потому что они пытаются быть идеальными :)Как насчет этой версии в простом ES6 / ES2015 ?
Функция возвращает обещание . Вот пример того, как использовать функцию и обрабатывать обещание, которое она возвращает:
Если вам нужно загрузить файл json, вы можете использовать его
JSON.parse()
для преобразования загруженных данных в объект JS.Вы также можете интегрировать
req.responseType='json'
в функцию, но, к сожалению, IE не поддерживает ее , поэтому я бы придерживалсяJSON.parse()
.источник
XMLHttpRequest
вы делаете асинхронную попытку загрузки файла. Это означает, что выполнение вашего кода будет продолжаться, пока ваш файл загружается в фоновом режиме. Чтобы использовать содержимое файла в вашем скрипте, вам нужен механизм, который сообщает вашему скрипту, когда файл завершил загрузку или произошел сбой загрузки. Вот где обещания пригодятся. Есть и другие способы решения этой проблемы, но я думаю, что обещания наиболее удобны.источник
Используйте XMLHttpRequest .
Простой запрос GET
Простой POST-запрос
Мы можем указать, что запрос должен быть асинхронным (true), заданным по умолчанию или синхронным (false) с необязательным третьим аргументом.
Мы можем установить заголовки перед вызовом
httpRequest.send()
Мы можем обработать ответ, установив
httpRequest.onreadystatechange
функцию перед вызовомhttpRequest.send()
источник
Вы можете получить правильный объект в соответствии с браузером с
С правильным объектом GET может быть абстрагирован для:
И ПОЧТА, чтобы:
источник
Я искал способ включить обещания в ajax и исключить jQuery. На HTML5 Rocks есть статья, в которой говорится об обещаниях ES6. (Вы можете заполнить библиотеку обещаний наподобие Q ). Вы можете использовать фрагмент кода, который я скопировал из статьи.
Примечание: я также написал статью об этом .
источник
Небольшая комбинация из пары примеров ниже и создала эту простую часть:
ИЛИ, если ваши параметры - объект (ы) - незначительная дополнительная корректировка кода:
Оба должны быть полностью совместимы с браузером и версией.
источник
Если вы не хотите включать JQuery, я бы попробовал несколько облегченных библиотек AJAX.
Мой любимый это reqwest. Это только 3.4kb и очень хорошо построено: https://github.com/ded/Reqwest
Вот пример запроса GET с reqwest:
Теперь, если вы хотите что-то еще более легкое, я бы попробовал microAjax всего за 0,4 КБ: https://code.google.com/p/microajax/
Это весь код прямо здесь:
А вот пример звонка:
источник
Старый, но я постараюсь, возможно, кто-то найдет эту информацию полезной.
Это минимальный объем кода, необходимый для
GET
запроса и полученияJSON
отформатированных данных. Это применимо только к современным браузерам, таким как последние версии Chrome , FF , Safari , Opera и Microsoft Edge .Также ознакомьтесь с новым Fetch API, который является заменой на основе обещаний для API XMLHttpRequest .
источник
XMLHttpRequest ()
Вы можете использовать
XMLHttpRequest()
конструктор для создания новогоXMLHttpRequest
(XHR) объекта, который позволит вам взаимодействовать с сервером, используя стандартные методы HTTP-запроса (такие какGET
иPOST
):выборки ()
Вы также можете использовать
fetch()
метод для получения,Promise
которое разрешаетResponse
объект, представляющий ответ на ваш запрос:navigator.sendBeacon ()
С другой стороны, если вы просто пытаетесь получить
POST
данные и не нуждаетесь в ответе от сервера, самое короткое решение будет использоватьnavigator.sendBeacon()
:источник
От youMightNotNeedJquery.com +
JSON.stringify
источник
Это может помочь:
источник
источник
Я надеюсь, что это помогает
Step 1.
Сохраните ссылку на объект XMLHttpRequestStep 2.
Получить объект XMLHttpRequestStep 3.
Выполните асинхронный HTTP-запрос, используя объект XMLHttpRequestStep 4.
Выполняется автоматически при получении сообщения с сервераисточник
в обычном JavaScript в браузере:
Или, если вы хотите использовать Browserify для объединения ваших модулей с помощью node.js. Вы можете использовать суперагент :
источник
Вот JSFiffle без JQuery
http://jsfiddle.net/rimian/jurwre07/
источник
мой вызов ajax
для отмены предыдущих запросов
источник
HTML:
PHP:
источник
Очень хорошее решение с чистым JavaScript здесь
источник
Попробуйте использовать Fetch Api ( Fetch API )
Это действительно ясно, и 100% ваниль.
источник