Jak wykonać połączenie AJAX bez jQuery?

789

Jak wykonać wywołanie AJAX za pomocą JavaScript, bez użycia jQuery?

nieprzyzwoity
źródło
20
Należy pamiętać, że chociaż wiele odpowiedzi tutaj sugeruje nasłuchiwanie zmian w readystatechange , współczesne przeglądarki obsługują teraz zdarzenia ładowania , przerywania , postępu i błędów dla XMLHttpRequest (prawdopodobnie będziesz jednak dbał tylko o ładowanie ).
Paul S.
2
@ImadoddinIbnAlauddin na przykład, gdy jego główna funkcjonalność (przechodzenie przez DOM) nie jest potrzebna.
ZESTAW
8
youmightnotneedjquery.com wiele czystych przykładów js, w tym. ajax dla ie8 +, ie9 + i ie10 +
Sanya_Zol
1
w3schools ma ładny krok po kroku wprowadzenie do ajax bez jquery: w3schools.com/js/js_ajax_intro.asp
eli
Możesz także użyć EHTML: github.com/Guseyn/EHTML Użyj elementu e-json do pobierania
pliku Json

Odpowiedzi:

591

Z JavaScriptem „waniliowym”:

<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");
    }
});
dov.amir
źródło
1
@ Fractaliste Jeśli po prostu wywołujesz callbacki po blokach if odnoszących się do pliku xmlhttp.status, to po prostu zadzwoń tam i gotowe.
Jay
5
@Wade Myślę, że Gokigooooks mówi, kiedy czytając JavaScript „waniliowym” pomyślał, że to biblioteka JavaScript, którą musi pobrać. Mógł także odnosić się do Vanilla JS .
Trisped
220

Za pomocą następującego fragmentu kodu możesz łatwo robić podobne rzeczy, takie 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)
};
Petah
źródło
1
To naprawdę świetny start, ale myślę, że brakuje ci czegoś, co pojawia się w odpowiedzi @ 3nigma. Oznacza to, że nie jestem pewien, czy sensowne jest wysyłanie określonych żądań (wszystkie otrzymują i wysyłają pocztę) bez zwracania odpowiedzi serwera. Na końcu metody wysyłania dodałem kolejną linię return x.responseText;- a następnie zwracam każde z ajax.sendpołączeń.
Sam
3
@Sam, że [zwykle] nie możesz zwrócić jako żądania asynchronicznego. Powinieneś obsłużyć odpowiedź w wywołaniu zwrotnym.
Petah,
@Sam jest tam przykład:ajax.get('/test.php', {foo: 'bar'}, function(responseText) { alert(responseText); });
Petah
Niezły fragment. Ale czy nie powinno tak być query.join('&').replace(/%20/g, '+')?
afsantos
3
Uwzględnij również żądanie CORS, dołączając ten wiersz jako opcję. „xhr.withCredentials = true;”
Akam
131

Wiem, że to dość stare pytanie, ale w nowszych przeglądarkach dostępne jest teraz ładniejsze API . Ta fetch()metoda umożliwia tworzenie żądań internetowych. Na przykład, aby poprosić o json od /get-data:

var opts = {
  method: 'GET',      
  headers: {}
};
fetch('/get-data', opts).then(function (response) {
  return response.json();
})
.then(function (body) {
  //doSomething with body;
});

Zobacz tutaj po więcej szczegółów.

Will Munn
źródło
9
W rzeczywistości twierdzenie, że interfejs API pobierania działa w „nowszych przeglądarkach”, jest nieprawidłowe, ponieważ IE i Edge go nie obsługują. (Edge 14 wymaga, aby użytkownik specjalnie włączył tę funkcję) caniuse.com/#feat=fetch
saluce 12.04.16
7
W tym miejscu należy wspomnieć o polifillu GitHub. github.com/github/fetch
TylerY86
7
Po prostu dodaj <script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>i używaj pobierania jak mistrz.
TylerY86
7
@saluce Teraz jest domyślnie włączony w Edge 14 (a IE nie jest już „nową” przeglądarką :-)
Supersharp,
1
Nie używaj Fetch na urządzeniach mobilnych. Ma problem z dolną obudową nagłówka HTTP na Androidzie. Działa dobrze na iOS.
Kenny Lim,
103

Możesz użyć 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żesz wypróbować podobne rozwiązania online na tych linkach:

AbdelHady
źródło
Przydałoby się również dodać zmienną wejściową dla żądania (zostanie użyte w xmlhttp.send (żądanie);)
Pavel Perna
2
@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ę pomyślałem o zaktualizowaniu odpowiedzi, aby zaakceptować parametry żądania jako parametr funkcji tutaj , a także przekazać metodę ( GETlub POST), ale zatrzymało mnie to, że chcę, aby odpowiedź była jak najprostsza, aby ludzie mogli wypróbować ją tak szybko, jak to możliwe. Właściwie nienawidziłem innych odpowiedzi za to, że zbyt długo, bo starają się być perfekcyjni :)
AbdelHady,
40

Co powiesz na tę wersję w wersji 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 obietnicę . Oto przykład użycia funkcji i obsługi obietnicy, którą zwraca:

get('foo.txt')
.then((data) => {
  // Do stuff with data, if foo.txt was successfully loaded.
})
.catch((err) => {
  // Do stuff on error...
});

Jeśli potrzebujesz załadować plik json, możesz użyć JSON.parse()do konwersji załadowanych danych na obiekt JS.

Możesz również zintegrować req.responseType='json'się z funkcją, ale niestety nie ma ona obsługi IE , więc trzymałbym się JSON.parse().

Rotareti
źródło
2
Korzystając XMLHttpRequestz niego, podejmij asynchroniczną próbę załadowania pliku. Oznacza to, że wykonanie kodu będzie trwało, podczas gdy plik ładuje się w tle. Aby użyć zawartości pliku w skrypcie, potrzebujesz mechanizmu, który informuje skrypt o zakończeniu ładowania pliku lub o niepowodzeniu ładowania. Tu przydają się obietnice . Istnieją inne sposoby rozwiązania tego problemu, ale myślę, że obietnice są najwygodniejsze.
Rotareti
@Rotareti Czy przeglądarki mobilne obsługują to podejście?
bodruk
Obsługują to tylko nowsze wersje przeglądarek. Powszechną praktyką jest pisanie kodu w najnowszej wersji ES6 / 7 / .. i używanie Babel lub podobnej do transponowania go z powrotem do ES5 w celu lepszego wsparcia przeglądarki.
Rotareti
2
@Rotareti Czy możesz również wyjaśnić, dlaczego byłoby to wygodniejsze niż zwykłe oddzwanianie? Czy ta wygoda jest warta dodatkowego wysiłku, aby ją przetransponować do obsługi starej przeglądarki?
lennyklb
@LennartKloppenburg Myślę, że ta odpowiedź dobrze to wyjaśnia: stackoverflow.com/a/14244950/1612318 „Czy ta wygoda jest warta dodatkowego wysiłku, aby ją przetransponować do obsługi starej przeglądarki?” Obietnice to tylko jedna z wielu funkcji dostarczonych z ES6 / 7. Jeśli używasz transpilatora, możesz napisać aktualny JS. To jest tego warte!
Rotareti 24.04.17
38
 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"
Rafay
źródło
58
Nie wykonuj połączeń synchronicznych. Użyj xhReq.onload i użyj wywołań zwrotnych.
19
3
@FellowStranger oReq.onload = function () {/*this.responseText*/};
19h
3
@kenansulayman Co jest nie tak z połączeniem synchronicznym? Czasami pasuje najlepiej.
Andrii Nemchenko
@Andrey: nic, o ile zdajesz sobie sprawę, że wstrzymujesz wykonywanie wszystkiego, dopóki odpowiedź serwera nie powróci. Nic wyjątkowo złego, ale może nie do końca odpowiednie do niektórych zastosowań.
mrówa
Ponadto, jeśli serwer z jakiegoś powodu nigdy nie zareaguje, reszta kodu nigdy się nie uruchomi.
Random Elephant
34

Użyj XMLHttpRequest .

Proste żądanie GET

httpRequest = new XMLHttpRequest()
httpRequest.open('GET', 'http://www.example.org/some.file')
httpRequest.send()

Proste żądanie POST

httpRequest = new XMLHttpRequest()
httpRequest.open('POST', 'http://www.example.org/some/endpoint')
httpRequest.send('some data')

Możemy określić, że żądanie powinno być asynchroniczne (prawda), domyślne lub synchroniczne (fałsz) z opcjonalnym trzecim argumentem.

// Make a synchronous GET request
httpRequest.open('GET', 'http://www.example.org/some.file', false)

Możemy ustawić nagłówki przed połączeniem httpRequest.send()

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Możemy obsłużyć odpowiedź, ustawiając httpRequest.onreadystatechangefunkcję przed wywołaniemhttpRequest.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.');
    }
  }
}
Harlem Wiewiórka
źródło
1
Zauważ, że istnieją inne udane statusy niż 200, np. 201
Nate Vaughan
30

Możesz uzyskać właściwy obiekt zgodnie z przeglądarką za pomocą

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;
}

Przy odpowiednim obiekcie GET może zostać wyodrębniony w celu:

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);
}
brunops
źródło
18

Szukałem sposobu na dołączenie obietnic do ajax i wykluczenie jQuery. Jest artykuł na temat HTML5 Rocks, który mówi o obietnicach ES6. (Mógłbyś wypełniać bibliotekę obietnic, taką jak Q ) Możesz użyć fragmentu kodu, który skopiowałem 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ż o tym artykuł .

Wyrównany
źródło
15

Mała kombinacja z kilku poniższych przykładów i stworzyła ten prosty kawałek:

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 twoje parametry są obiektami - drobne dodatkowe dostosowanie kodu:

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('&'));

Oba powinny być w pełni kompatybilne z przeglądarką + wersją.

tfont
źródło
Czy warto tutaj używać hasOwnProperty w pętli for?
kibibu
15

Jeśli nie chcesz dołączać JQuery, wypróbuję kilka lekkich bibliotek AJAX.

Moim ulubionym jest reqwest. Ma tylko 3,4 KB i jest bardzo dobrze zbudowany: https://github.com/ded/Reqwest

Oto przykładowe żądanie GET z reqwest:

reqwest({
    url: url,
    method: 'GET',
    type: 'json',
    success: onSuccess
});

Teraz, jeśli chcesz czegoś jeszcze bardziej lekkiego, wypróbuję microAjax w zaledwie 0,4 KB: 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 przykładowe połączenie:

microAjax(url, onSuccess);
Ryan
źródło
1
Myślę, że istnieje problem z microAjax, kiedy wywołujesz go dwukrotnie (z powodu licznych „tego”, myślę, że musi wystąpić kolizja). Nie wiem, czy nazwanie dwóch „nowym microAjax” jest dobrym obejściem, prawda?
Jill-Jênn Vie
13

Stare, ale spróbuję, może ktoś uzna te informacje za przydatne.

Jest to minimalna ilość kodu potrzebna do wykonania GETżądania i pobrania JSONsformatowanych danych. Dotyczy to tylko 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();

Sprawdź także nowy interfejs Fetch API, który jest opartym na obietnicach zamiennikiem interfejsu API XMLHttpRequest .

Blago Eres
źródło
9

XMLHttpRequest ()

Za pomocą XMLHttpRequest()konstruktora można utworzyć nowy obiekt XMLHttpRequest(XHR), który umożliwi interakcję z serwerem przy użyciu standardowych metod żądania HTTP (takich jak GETi POST):

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

const request = new XMLHttpRequest();

request.addEventListener('load', function () {
  if (this.readyState === 4 && this.status === 200) {
    console.log(this.responseText);
  }
});

request.open('POST', 'example.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

sprowadzać()

Możesz także użyć tej fetch()metody, aby uzyskać obiekt, Promisektóry rozwiązuje Responseobiekt reprezentujący odpowiedź na twoje żądanie:

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

fetch('example.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  },
  body: data,
}).then(response => {
  if (response.ok) {
    response.text().then(response => {
      console.log(response);
    });
  }
});

navigator.sendBeacon ()

Z drugiej strony, jeśli po prostu próbujesz POSTdanych i nie potrzebujesz odpowiedzi z serwera, najkrótszym rozwiązaniem byłoby użycie navigator.sendBeacon():

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

navigator.sendBeacon('example.php', data);
Grant Miller
źródło
1
Naprawdę podoba mi się twoja odpowiedź, ponieważ omawiasz większość przypadków nawet dla Internet Explorera za pomocą XMLHttpRequest, ale zalecałbym zmianę: „const data = ...” na: „var data = ...” w tym przykładzie (XMLHttpRequest), więc jest w pełni z nim zgodny
Dazag
8

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));
Mikel
źródło
7

Może to 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();
}
Ashish Kumar
źródło
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> &nbsp;
  <button onclick="empty()">Clear</button>
</body>
</html>
Vosobe Kapsimanis
źródło
4

Cóż, to tylko 4-etapowy łatwy proces,

Mam nadzieję, że to pomoże

Step 1. Przechowuj odwołanie do obiektu XMLHttpRequest

var xmlHttp = createXmlHttpRequestObject();

Step 2. Pobierz obiekt 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. Wykonaj asynchroniczne żądanie 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. Wykonywany automatycznie 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);
        }
    }
}
Prateek Joshi
źródło
3

w zwykłym 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, aby połączyć swoje moduły za pomocą node.js. Możesz użyć superagenta :

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);
     }
 });
svnm
źródło
3

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();
Rimian
źródło
3
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 połączenie z ajaxem

  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);
     }
      });

w przypadku przerwania poprzednich wniosków

      my_ajax_call.abort(function(result){
       console.log(result);
       });
karthikeyan ganesan
źródło
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";

?>
99freebies.blogspot.com
źródło
Jednowierszowy, jeśli nie potrzebują nawiasów klamrowych, Nikt nie używa IE6, To prawdopodobnie zostało wklejone, użyj onload zamiast onreadystatechange, łap błędy dla możliwych wywołań rekurencyjnych, xmlhttp to okropna nazwa zmiennej, wystarczy nazwać to x.
super
1

Jest tutaj bardzo dobre rozwiązanie z czystym javascript

/*create an XMLHttpRequest object*/

let GethttpRequest=function(){  
  let httpRequest=false;
  if(window.XMLHttpRequest){
    httpRequest   =new XMLHttpRequest();
    if(httpRequest.overrideMimeType){
    httpRequest.overrideMimeType('text/xml');
    }
  }else if(window.ActiveXObject){
    try{httpRequest   =new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
      try{
        httpRequest   =new ActiveXObject("Microsoft.XMLHTTP");
      }catch(e){}
    }
  }
  if(!httpRequest){return 0;}
  return httpRequest;
}

  /*Defining a function to make the request every time when it is needed*/

  function MakeRequest(){

    let uriPost       ="myURL";
    let xhrPost       =GethttpRequest();
    let fdPost        =new FormData();
    let date          =new Date();

    /*data to be sent on server*/
    let data          = { 
                        "name"      :"name",
                        "lName"     :"lName",
                        "phone"     :"phone",
                        "key"       :"key",
                        "password"  :"date"
                      };

    let JSONdata =JSON.stringify(data);             
    fdPost.append("data",JSONdata);
    xhrPost.open("POST" ,uriPost, true);
    xhrPost.timeout = 9000;/*the time you need to quit the request if it is not completed*/
    xhrPost.onloadstart = function (){
      /*do something*/
    };
    xhrPost.onload      = function (){
      /*do something*/
    };
    xhrPost.onloadend   = function (){
      /*do something*/
    }
    xhrPost.onprogress  =function(){
      /*do something*/
    }

    xhrPost.onreadystatechange =function(){

      if(xhrPost.readyState < 4){

      }else if(xhrPost.readyState === 4){

        if(xhrPost.status === 200){

          /*request succesfull*/

        }else if(xhrPost.status !==200){

          /*request failled*/

        }

      }


   }
  xhrPost.ontimeout = function (e){
    /*you can stop the request*/
  }
  xhrPost.onerror = function (){
    /*you can try again the request*/
  };
  xhrPost.onabort = function (){
    /*you can try again the request*/
  };
  xhrPost.overrideMimeType("text/plain; charset=x-user-defined-binary");
  xhrPost.setRequestHeader("Content-disposition", "form-data");
  xhrPost.setRequestHeader("X-Requested-With","xmlhttprequest");
  xhrPost.send(fdPost);
}

/*PHP side
<?php
  //check if the variable $_POST["data"] exists isset() && !empty()
  $data        =$_POST["data"];
  $decodedData =json_decode($_POST["data"]);
  //show a single item from the form
  echo $decodedData->name;

?>
*/

/*Usage*/
MakeRequest();
Ir Calif
źródło