601
Jak wykonać wywołanie AJAX za pomocą JavaScript, bez korzystania z jQuery?Jak wykonać wywołanie AJAX bez jQuery?
A
Odpowiedz
33
var xhReq = new XMLHttpRequest();
xhReq.open("GET", "sumGet.phtml?figure1=5&figure2=10", false);
xhReq.send(null);
var serverResponse = xhReq.responseText;
alert(serverResponse); // Shows "15"
+2
Czy to działa w różnych przeglądarkach? – Benubird
+49
Nie wykonuj połączeń synchronicznych. Użyj xhReq.onload i użyj wywołań zwrotnych. –
+1
@kenansulayman możesz pokazać przykład, co masz na myśli? –
499
Z "waniliowy" javascript:
<script type="text/javascript">
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
if (xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
else if (xmlhttp.status == 400) {
alert('There was an error 400');
}
else {
alert('something else other than 200 was returned');
}
}
};
xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send();
}
</script>
z jQuery:
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$(this).addClass("done");
}
});
+809
Proszę przestać wspierać IE5/IE6 – Archibald
+3
@DrewNoakes: Jest zdecydowanie bardziej czytelny, ale niestety, gdy go wypróbowałem na mini przeglądarce operowej, nie był obsługiwany, więc domyślam się, że jego obsługa jest mniej rozpowszechniona – BornToCode
+0
@Fractaliste Jeśli po prostu wywołasz callbacki po blokach if związanych z xmlhttp.status, po prostu zadzwoń do nich i gotowe. – Jay
4
<html>
<script>
var xmlDoc = null ;
function load() {
if (typeof window.ActiveXObject != 'undefined') {
xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
xmlDoc.onreadystatechange = process ;
}
else {
xmlDoc = new XMLHttpRequest();
xmlDoc.onload = process ;
}
xmlDoc.open("GET", "background.html", true);
xmlDoc.send(null);
}
function process() {
if (xmlDoc.readyState != 4) return ;
document.getElementById("output").value = xmlDoc.responseText ;
}
function empty() {
document.getElementById("output").value = '<empty>' ;
}
</script>
<body>
<textarea id="output" cols='70' rows='40'><empty></textarea>
<br></br>
<button onclick="load()">Load</button>
<button onclick="empty()">Clear</button>
</body>
</html>
2
HTML:
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","1.php?id=99freebies.blogspot.com",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
PHP:
<?php
$id = $_GET[id];
print "$id";
?>
+0
Pojedyncza linia, jeśli nie potrzeba nawiasów klamrowych, Noone używa IE6, To była prawdopodobnie kopia wklejona, użyj onload zamiast onreadystatangeange, błędy catch dla możliwych wywołań rekursywnych, xmlhttp to straszna nazwa zmiennej, po prostu nazwij to x. – super
186
Korzystanie Poniższy urywek można robić podobne rzeczy dość łatwo, jak to:
ajax.get('/test.php', {foo: 'bar'}, function() {});
Oto fragment:
var ajax = {};
ajax.x = function() {
if (typeof XMLHttpRequest !== 'undefined') {
return new XMLHttpRequest();
}
var versions = [
"MSXML2.XmlHttp.6.0",
"MSXML2.XmlHttp.5.0",
"MSXML2.XmlHttp.4.0",
"MSXML2.XmlHttp.3.0",
"MSXML2.XmlHttp.2.0",
"Microsoft.XmlHttp"
];
var xhr;
for (var i = 0; i < versions.length; i++) {
try {
xhr = new ActiveXObject(versions[i]);
break;
} catch (e) {
}
}
return xhr;
};
ajax.send = function (url, callback, method, data, async) {
if (async === undefined) {
async = true;
}
var x = ajax.x();
x.open(method, url, async);
x.onreadystatechange = function() {
if (x.readyState == 4) {
callback(x.responseText)
}
};
if (method == 'POST') {
x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
x.send(data)
};
ajax.get = function (url, data, callback, async) {
var query = [];
for (var key in data) {
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'GET', null, async)
};
ajax.post = function (url, data, callback, async) {
var query = [];
for (var key in data) {
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
ajax.send(url, callback, 'POST', query.join('&'), async)
};
+1
To naprawdę świetny skok, ale myślę, że brakuje ci czegoś, co zawiera odpowiedź @ 3nigma. Oznacza to, że nie jestem pewien, na ile sensownym jest, aby niektóre żądania (wszystkie get i niektóre post), bez zwracania odpowiedzi serwera.Dodałem kolejną linię na końcu metody send - 'return x.responseText;' - a następnie zwróć każde z wywołań 'ajax.send'. – Sam
+2
@Zamówię [zwykle] nie można zwrócić jako jego asynchroniczne żądanie. Powinieneś obsłużyć odpowiedź w wywołaniu zwrotnym. – Petah
+0
@Jest tam przykład: 'ajax.get ('/ test.php', {foo: 'bar'}, function (responseText) {alert (responseText);});' – Petah
85
Można użyj następującej funkcji:
function callAjax(url, callback){
var xmlhttp;
// compatible with IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
callback(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
Można próbować podobnych rozwiązań on-line na te linki:
+0
Byłoby miło dodać zmienną wejściową dla żądania (będzie używana w xmlhttp.send (request);) –
+0
@PavelPerna, ponieważ przykład tutaj jest 'GET', więc możesz po prostu dodać je do żądania, ale aby być bardziej ogólnym, jestem z tobą, naprawdę myślałem o aktualizacji odpowiedzi, aby zaakceptować parametry żądania jako parametr do funkcji tutaj, a także aby przekazać metodę ('GET' lub' POST'), ale co mnie powstrzymało jest to, że chcę, aby odpowiedź była tak prosta, jak to tylko możliwe, aby ludzie mogli ją wypróbować tak szybko, jak to możliwe. Właściwie, nienawidziłem innych odpowiedzi na długo, ponieważ starają się być perfekcyjni :) – AbdelHady
26
można uzyskać poprawny obiekt w zależności od przeglądarki z
function getXmlDoc() {
var xmlDoc;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlDoc = new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlDoc;
}
Z właściwym obiektem, GET może mogą być wydobywane do:
function myGet(url, callback) {
var xmlDoc = getXmlDoc();
xmlDoc.open('GET', url, true);
xmlDoc.onreadystatechange = function() {
if (xmlDoc.readyState === 4 && xmlDoc.status === 200) {
callback(xmlDoc);
}
}
xmlDoc.send();
}
I POST do:
function myPost(url, data, callback) {
var xmlDoc = getXmlDoc();
xmlDoc.open('POST', url, true);
xmlDoc.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlDoc.onreadystatechange = function() {
if (xmlDoc.readyState === 4 && xmlDoc.status === 200) {
callback(xmlDoc);
}
}
xmlDoc.send(data);
}
7
To może pomóc:
function doAjax(url, callback) {
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
callback(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
13
Mała kombinacja z kilku poniższych przykładach i utworzono ten prosty element:
function ajax(url, method, data, async)
{
method = typeof method !== 'undefined' ? method : 'GET';
async = typeof async !== 'undefined' ? async : false;
if (window.XMLHttpRequest)
{
var xhReq = new XMLHttpRequest();
}
else
{
var xhReq = new ActiveXObject("Microsoft.XMLHTTP");
}
if (method == 'POST')
{
xhReq.open(method, url, async);
xhReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhReq.send(data);
}
else
{
if(typeof data !== 'undefined' && data !== null)
{
url = url+'?'+data;
}
xhReq.open(method, url, async);
xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhReq.send(null);
}
//var serverResponse = xhReq.responseText;
//alert(serverResponse);
}
// Example usage below (using a string query):
ajax('http://www.google.com');
ajax('http://www.google.com', 'POST', 'q=test');
lub jeśli parametry są przedmiot (y) - drobna korekta dodatkowy kod:
var parameters = {
q: 'test'
}
var query = [];
for (var key in parameters)
{
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key]));
}
ajax('http://www.google.com', 'POST', query.join('&'));
Obie powinny być w pełni przeglądarka + wersja kompatybilna.
+0
Czy warto używać hasOwnProperty wewnątrz pętli for? – kibibu
15
Szukałem od do włączenia obietnic z ajax i wykluczyć jQuery.Jest artykuł na temat HTML5 Rocks, który mówi o obietnicach ES6 (może polyfilować z obiecującą biblioteką, taką jak Q), a następnie użyj fragmentu kodu skopiowanego z artykułu.
function get(url) {
// Return a new promise.
return new Promise(function(resolve, reject) {
// Do the usual XHR stuff
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function() {
// This is called even on 404 etc
// so check the status
if (req.status == 200) {
// Resolve the promise with the response text
resolve(req.response);
}
else {
// Otherwise reject with the status text
// which will hopefully be a meaningful error
reject(Error(req.statusText));
}
};
// Handle network errors
req.onerror = function() {
reject(Error("Network Error"));
};
// Make the request
req.send();
});
}
Uwaga: Napisałem również an article about this.
+0
To było naprawdę pomocne, ponieważ robię rekursywny długi mechanizm głosowania! – super
12
Jeśli nie chcesz dołączać JQuery, wypróbowałbym kilka lekkich bibliotek AJAX.
Moim ulubionym jest reqwest. To tylko 3.4kb i bardzo dobrze zbudowany: https://github.com/ded/Reqwest
Oto próbka żądanie GET z reqwest:
reqwest({
url: url,
method: 'GET',
type: 'json',
success: onSuccess
});
Teraz, jeśli chcesz coś jeszcze bardziej lekki, będę próbować microAjax w zwykłym 0,4kb: https://code.google.com/p/microajax/
to jest cały kod tutaj:
function microAjax(B,A){this.bindFunction=function(E,D){return function(){return E.apply(D,[D])}};this.stateChange=function(D){if(this.request.readyState==4){this.callbackFunction(this.request.responseText)}};this.getRequest=function(){if(window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}return false};this.postBody=(arguments[2]||"");this.callbackFunction=A;this.url=B;this.request=this.getRequest();if(this.request){var C=this.request;C.onreadystatechange=this.bindFunction(this.stateChange,this);if(this.postBody!==""){C.open("POST",B,true);C.setRequestHeader("X-Requested-With","XMLHttpRequest");C.setRequestHeader("Content-type","application/x-www-form-urlencoded");C.setRequestHeader("Connection","close")}else{C.open("GET",B,true)}C.send(this.postBody)}};
A oto wezwanie próbki:
microAjax(url, onSuccess);
+1
Myślę, że jest problem z microAjax, kiedy wywołuje się go dwa razy (z powodu licznych "tego", myślę, że musi być kolizja). Nie wiem, czy połączenie dwóch "nowych mikroAjax" jest dobrym rozwiązaniem, prawda? –
0
w czystym JavaScript w przeglądarce:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
if(xhr.status == 200){
console.log(xhr.responseText);
} else if(xhr.status == 400) {
console.log('There was an error 400');
} else {
console.log('something else other than 200 was returned');
}
}
}
xhr.open("GET", "mock_data.json", true);
xhr.send();
Lub jeśli chcesz użyć Browserify do bundle moduły przy użyciu node.js. Można użyć superagent:
var request = require('superagent');
var url = '/mock_data.json';
request
.get(url)
.end(function(err, res){
if (res.ok) {
console.log('yay got ' + JSON.stringify(res.body));
} else {
console.log('Oh no! error ' + res.text);
}
});
1
Oto JSFiffle bez JQuery
http://jsfiddle.net/rimian/jurwre07/
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
var url = 'http://echo.jsontest.com/key/value/one/two';
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
} else if (xmlhttp.status == 400) {
console.log('There was an error 400');
} else {
console.log('something else other than 200 was returned');
}
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
};
loadXMLDoc();
4
Cóż to jest tylko 4 krok łatwy proceess,
Mam nadzieję, że go pomaga
Step 1. Store odniesienie do obiektu XMLHttpRequest
var xmlHttp = createXmlHttpRequestObject();
Step 2. odebrania obiektu XMLHttpRequest
function createXmlHttpRequestObject() {
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// if running Internet Explorer
if (window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xmlHttp = false;
}
}
// if running Mozilla or other browsers
else {
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
xmlHttp = false;
}
}
// return the created object or display an error message
if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}
Step 3. Bądź asynchronicznego żądania HTTP za pomocą obiektu XMLHttpRequest
function process() {
// proceed only if the xmlHttp object isn't busy
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
// retrieve the name typed by the user on the form
item = encodeURIComponent(document.getElementById("input_item").value);
// execute the your_file.php page from the server
xmlHttp.open("GET", "your_file.php?item=" + item, true);
// define the method to handle server responses
xmlHttp.onreadystatechange = handleServerResponse;
// make the server request
xmlHttp.send(null);
}
}
Step 4. Wykonane autom matycznie po otrzymaniu wiadomości z serwera
function handleServerResponse() {
// move forward only if the transaction has completed
if (xmlHttp.readyState == 4) {
// status of 200 indicates the transaction completed successfully
if (xmlHttp.status == 200) {
// extract the XML retrieved from the server
xmlResponse = xmlHttp.responseText;
document.getElementById("put_response").innerHTML = xmlResponse;
// restart sequence
}
// a HTTP status different than 200 signals an error
else {
alert("There was a problem accessing the server: " + xmlHttp.statusText);
}
}
}
71
wiem, że jest to dość stare pytanie, ale jest teraz ładniejszy API dostępna natywnie w newer browsers.Metoda fetch() umożliwia tworzenie żądań internetowych. Na przykład, aby poprosić o jakiś json z /get-data:
var opts = {
method: 'GET',
body: 'json',
headers: {}
};
fetch('/get-data', opts).then(function (response) {
return response.json();
})
.then(function (body) {
//doSomething with body;
});
Zobacz here więcej szczegółów.
+6
W rzeczywistości błędem byłoby twierdzić, że interfejs API pobierania działa w "nowszych przeglądarkach", ponieważ IE i Edge nie obsługują go. (Krawędź 14 wymaga, aby użytkownik włączył tę funkcję) http://caniuse.com/#feat=fetch – saluce
+4
Powinna tu być wzmianka o polifildzie GitHub. https://github.com/github/fetch – TylerY86
+6
Po prostu dodaj '' i użyj pobierania jak mistrz. – TylerY86
11
Stary, ale spróbuję, może ktoś uzna te informacje za użyteczne.
Jest to minimalna ilość kodu potrzebna do wykonania żądania GET i pobrania niektórych sformatowanych danych w formacie JSON. Ma to zastosowanie tylko do nowoczesnych przeglądarek, takich jak najnowsze wersje Chrome, FF, Safari, Opera i Microsoft Edge.
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json'); // by default async
xhr.responseType = 'json'; // in which format you expect the response to be
xhr.onload = function() {
if(this.status == 200) {// onload called even on 404 etc so check the status
console.log(this.response); // No need for JSON.parse()
}
};
xhr.onerror = function() {
// error
};
xhr.send();
także sprawdzić nowe Fetch API który jest wymiana obietnica oparte na XMLHttpRequest API.
0
Korzystanie z powyższej odpowiedzi @Petah jako ogromnego źródła pomocy. Napisałem tutaj swój własny moduł AJAX o nazwie AJ: https://github.com/NightfallAlicorn/AJ Nie wszystko jest jeszcze przetestowane, ale działa dla mnie z get i post dla JSON. Możesz kopiować i używać źródła, jak chcesz. Nie widziałem jeszcze wyraźnej, zaakceptowanej odpowiedzi, więc zakładam, że jest to w porządku.
26
Co z tą wersją w wersji zwykłej ES6/ES2015?
function get(url) {
return new Promise((resolve, reject) => {
const req = new XMLHttpRequest();
req.open('GET', url);
req.onload =() => req.status === 200 ? resolve(req.response) : reject(Error(req.statusText));
req.onerror = (e) => reject(Error(`Network Error: ${e}`));
req.send();
});
}
Funkcja zwraca wartość promise. Oto przykład, w jaki sposób korzystać z funkcji i obsługi obietnicę zwraca:
get('foo.txt')
.then((data) => {
// Do stuff with data, if foo.txt was successfully loaded.
})
.catch((err) => {
// Do stuff on error...
});
Jeśli trzeba załadować plik json można użyć JSON.parse() konwertować dane załadowane do obiektu JS.
Możesz również zintegrować req.responseType='json' w funkcję, ale niestety istnieje no IE support for it, więc trzymam się z JSON.parse().
+2
Użycie 'XMLHttpRequest' powoduje asynchroniczną próbę załadowania pliku. Oznacza to, że wykonywanie kodu będzie kontynuowane, podczas gdy twój plik ładuje się w tle. Aby użyć zawartości pliku w skrypcie, potrzebujesz mechanizmu, który poinformuje twój skrypt, gdy plik zakończy się ładowaniem lub nie załaduje się. Właśnie tam przydają się * obietnice *. Są inne sposoby rozwiązania tego problemu, ale myślę, że * obietnice * są najwygodniejsze. – Rotareti
+0
@Rotareti Czy przeglądarki mobilne obsługują to podejście? – bodruk
+0
Obsługują go tylko nowsze wersje przeglądarek.Powszechną praktyką jest napisanie kodu w najnowszym ES6/7/.. i użycie Babel lub podobne, aby przenieść go z powrotem do ES5, aby uzyskać lepszą obsługę przeglądarki. – Rotareti
2
var load_process = false;
function ajaxCall(param, response) {
if (load_process == true) {
return;
}
else
{
if (param.async == undefined) {
param.async = true;
}
if (param.async == false) {
load_process = true;
}
var xhr;
xhr = new XMLHttpRequest();
if (param.type != "GET") {
xhr.open(param.type, param.url, true);
if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) {
}
else if (param.contentType != undefined || param.contentType == true) {
xhr.setRequestHeader('Content-Type', param.contentType);
}
else {
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
}
else {
xhr.open(param.type, param.url + "?" + obj_param(param.data));
}
xhr.onprogress = function (loadTime) {
if (param.progress != undefined) {
param.progress({ loaded: loadTime.loaded }, "success");
}
}
xhr.ontimeout = function() {
this.abort();
param.success("timeout", "timeout");
load_process = false;
};
xhr.onerror = function() {
param.error(xhr.responseText, "error");
load_process = false;
};
xhr.onload = function() {
if (xhr.status === 200) {
if (param.dataType != undefined && param.dataType == "json") {
param.success(JSON.parse(xhr.responseText), "success");
}
else {
param.success(JSON.stringify(xhr.responseText), "success");
}
}
else if (xhr.status !== 200) {
param.error(xhr.responseText, "error");
}
load_process = false;
};
if (param.data != null || param.data != undefined) {
if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) {
xhr.send(param.data);
}
else {
xhr.send(obj_param(param.data));
}
}
else {
xhr.send();
}
if (param.timeout != undefined) {
xhr.timeout = param.timeout;
}
else
{
xhr.timeout = 20000;
}
this.abort = function (response) {
if (XMLHttpRequest != null) {
xhr.abort();
load_process = false;
if (response != undefined) {
response({ status: "success" });
}
}
}
}
}
function obj_param(obj) {
var parts = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
}
}
return parts.join('&');
}
moje wezwanie ajax
var my_ajax_call=ajaxCall({
url: url,
type: method,
data: {data:value},
dataType: 'json',
async:false,//synchronous request. Default value is true
timeout:10000,//default timeout 20000
progress:function(loadTime,status)
{
console.log(loadTime);
},
success: function (result, status) {
console.log(result);
},
error :function(result,status)
{
console.log(result);
}
});
dla przerwania poprzednich wniosków
my_ajax_call.abort(function(result){
console.log(result);
});
5
Od youMightNotNeedJquery.com + JSON.stringify
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(JSON.stringify(data));
9
użytkowania XMLHttpRequest.
Proste GET żądanie
httpRequest = new XMLHttpRequest()
httpRequest.open('GET', 'http://www.example.org/some.file')
httpRequest.send()
Proste POST żądanie
httpRequest = new XMLHttpRequest()
httpRequest.open('POST', 'http://www.example.org/some/endpoint')
httpRequest.send('some data')
Możemy określić, że wniosek powinien być asynchroniczny (true), domyślny, lub synchroniczny (fałsz) z opcjonalnym trzecim argumencie .
// Make a synchronous GET request
httpRequest.open('GET', 'http://www.example.org/some.file', false)
Możemy ustawić nagłówki przed wywołaniem httpRequest.send()
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
Możemy obsłużyć odpowiedź ustawiając httpRequest.onreadystatechange do funkcji przed wywołaniem httpRequest.send()
httpRequest.onreadystatechange = function(){
// Process the server response here.
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
Powiązane problemy
- 1. Jak wykonać wywołanie ajax w MVC4
- 2. Jak wykonać sekwencję połączeń AJAX?
- 3. Wywołanie jQuery/AJAX z timerem
- 4. QUnit: Jak przetestować ajax połączeń bez modyfikowania wywołanie ajax
- 5. Wywołanie Ajax Jquery do WEB API
- 6. Jak wykonać wywołanie programowo?
- 7. ustawić obsługę błędów dla jquery datatables wywołanie ajax ajax
- 8. Wywołanie Ajax JQuery do wywołania onClick
- 9. jQuery wywołanie AJAX zwraca [obiekt obiektu]
- 10. Jak wykonać funkcję ajax onbeforeunload?
- 11. jak zablokować wywołanie ajax (chcę to zablokować)
- 12. Jak wykonać wywołanie funkcji jquery po "X" sekundach
- 13. Jak mogę wykonać wywołanie synchronizacji z pobieraniem szkieletowym
- 14. Jak wykonać wiele wywołań ajax jQuery wygląda ładnie?
- 15. Jquery: Bieganie AJAX lokalnie bez serwera WWW
- 16. Jak wykonać wywołanie zwrotne JAVA między klasami?
- 17. Wywołanie response.redirect przez Ajax
- 18. Wywołanie "imdbapi.com" z jquery
- 19. Jak wyśmiać wywołanie AJAX za pomocą NSURLProtocol?
- 20. Wywołanie funkcji ColdFusion przy użyciu AJAX
- 21. jquery ajax post anulowany
- 22. Wywołanie serwletu ze strony JSP przy użyciu jQuery Ajax
- 23. Wywołanie jQuery $ .ajax do Web Api z tablicami łańcuchów
- 24. Wywołanie webmethod w pliku aspx.cs przy użyciu jquery ajax
- 25. Jak wykonać żądanie Ajax przez NodeJS do punktu końcowego
- 26. Jak wykonać wywołanie api protokołu Telegram MTProto?
- 27. Jak wykonać zdalne wywołanie procedury (klient SOAP)?
- 28. Wywołanie AJAX z wyszukiwaniem Elasticsearch
- 29. jQuery przesłać plik przy użyciu metody ajax jQuery (bez wtyczek)
- 30. Jak zrobić blokowanie połączenia AJAX jQuery bez async = false?
Należy pamiętać, że podczas gdy wiele odpowiedzi sugerujemy odsłuchiwanie _readystatechange_, nowoczesne przeglądarki obsługują teraz zdarzenia _load_, _abort_, _progress_ i _error_ dla _XMLHttpRequest_ (będziesz probab ale tylko troszcz się o _load_). –
@ImadoddinIbnAlauddin na przykład, gdy nie jest potrzebna główna funkcja (przechodzenie przez DOM). – SET
@Imad, ponieważ JQuery jest biblioteką JavaScript i jest denerwujące, gdy ludzie decydują, że używasz całkowicie nieobowiązkowego języka, który w rzeczywistości nie dodaje niczego nowego do tego języka. – DaemonOfTheWest