Bagaimana cara membuat panggilan AJAX tanpa jQuery?


789

Bagaimana cara membuat panggilan AJAX menggunakan JavaScript, tanpa menggunakan jQuery?


20
Harap dicatat bahwa sementara banyak jawaban di sini menyarankan mendengarkan untuk readystatechange , browser modern sekarang mendukung memuat , membatalkan , kemajuan , dan acara kesalahan untuk XMLHttpRequest (Anda mungkin hanya akan peduli tentang memuat ).
Paul S.

2
@ImadoddinIbnAlauddin misalnya ketika itu fungsi utama (DOM traversing) tidak diperlukan.
SET

8
youmightnotneedjquery.com banyak contoh js murni termasuk. ajax untuk ie8 +, ie9 + dan ie10 +
Sanya_Zol

1
w3schools memiliki langkah-langkah pengenalan yang bagus ke ajax tanpa jquery: w3schools.com/js/js_ajax_intro.asp
eli

Anda juga dapat menggunakan EHTML: github.com/Guseyn/EHTML Menggunakan elemen e-json untuk mengambil json dan memetakannya ke elemen html
Guseyn Ismayylov

Jawaban:


591

Dengan JavaScript "vanilla":

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

Dengan jQuery:

$.ajax({
    url: "test.html",
    context: document.body,
    success: function(){
      $(this).addClass("done");
    }
});

1
@Fractaliste Jika Anda cukup memanggil callback setelah blok if yang berkaitan dengan xmlhttp.status, maka panggil saja di sana dan Anda selesai.
Jay

5
@Wade Saya pikir Gokigooooks mengatakan ketika dia membaca Dengan "vanilla" JavaScript dia pikir itu adalah perpustakaan JavaScript yang dia perlu unduh. Dia mungkin juga mereferensikan Vanilla JS .
Dipotong

221

Dengan menggunakan cuplikan berikut ini, Anda dapat melakukan hal serupa dengan cukup mudah, seperti ini:

ajax.get('/test.php', {foo: 'bar'}, function() {});

Berikut cuplikannya:

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
Ini adalah jumpstart yang sangat bagus, tapi saya pikir Anda kehilangan sesuatu yang muncul dalam jawaban @ 3nigma. Artinya, saya tidak yakin seberapa masuk akal untuk membuat permintaan tertentu (semua dapatkan dan beberapa posting) tanpa mengembalikan respons server. Saya menambahkan baris lain di akhir metode pengiriman - return x.responseText;- dan kemudian mengembalikan masing-masing ajax.sendpanggilan.
Sam

3
@ Sam, Anda [biasanya] tidak dapat kembali sebagai permintaan asinkronnya. Anda harus menangani respons dalam panggilan balik.
Petah

@ Sam ada contoh di sana:ajax.get('/test.php', {foo: 'bar'}, function(responseText) { alert(responseText); });
Petah

Cuplikan yang bagus. Namun, bukankah seharusnya begitu query.join('&').replace(/%20/g, '+')?
afsantos

3
Harap sertakan juga permintaan CORS dengan memasukkan baris ini sebagai opsi. 'xhr.withCredentials = true;'
Akam

131

Saya tahu ini adalah pertanyaan yang cukup lama, tetapi sekarang ada API yang lebih bagus tersedia secara native di browser yang lebih baru . The fetch()Metode memungkinkan Anda untuk membuat permintaan web. Misalnya, untuk meminta beberapa json dari /get-data:

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

Lihat di sini untuk detail lebih lanjut.


9
Sebenarnya, akan salah untuk mengklaim Fetch API berfungsi di "browser yang lebih baru", karena IE dan Edge tidak mendukungnya. (Ujung 14 mengharuskan pengguna untuk secara khusus mengaktifkan ini fungsi) caniuse.com/#feat=fetch
saluce

7
Seharusnya ada sebutan polyfill GitHub di sini. github.com/github/fetch
TylerY86

7
Cukup tambahkan <script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>dan gunakan ambil seperti juara.
TylerY86

7
@ nilai Sekarang diaktifkan secara default di Edge 14 (dan IE bukan browser "baru" lagi :-)
Supersharp

1
Jangan gunakan Ambil di ponsel. Ini memiliki masalah HTTP header-casing lebih rendah di Android. Bekerja dengan baik di iOS.
Kenny Lim

104

Anda dapat menggunakan fungsi berikut:

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

Anda dapat mencoba solusi serupa online di tautan ini:


Juga akan menyenangkan untuk menambahkan beberapa variabel input untuk permintaan (akan digunakan dalam xmlhttp.send (request);)
Pavel Perna

2
@PavelPerna, karena contoh di sini adalah GET, jadi Anda bisa menambahkannya ke permintaan, tetapi untuk lebih umum, saya bersama Anda, saya benar-benar berpikir untuk memperbarui jawaban untuk menerima parameter permintaan sebagai parameter untuk fungsi di sini , & juga untuk lulus metode ( GETatau POST), tetapi yang menghentikan saya adalah bahwa saya ingin menyimpan jawabannya di sini sesederhana mungkin bagi orang-orang untuk mencobanya secepat mungkin. Sebenarnya, saya benci beberapa jawaban lain karena terlalu lama karena mereka berusaha untuk menjadi sempurna :)
AbdelHady

40

Bagaimana dengan versi ini di 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();
  });
}

Fungsi mengembalikan janji . Berikut adalah contoh tentang cara menggunakan fungsi dan menangani janji yang dikembalikan:

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

Jika Anda perlu memuat file json, Anda dapat menggunakan JSON.parse() untuk mengubah data yang dimuat menjadi Obyek JS.

Anda juga dapat mengintegrasikan req.responseType='json'ke dalam fungsi tetapi sayangnya tidak ada dukungan IE untuk itu , jadi saya akan tetap menggunakannya JSON.parse().


2
Menggunakan XMLHttpRequestAnda membuat upaya asinkron untuk memuat file. Itu berarti eksekusi kode Anda akan berlangsung, sementara file Anda dimuat di latar belakang. Untuk menggunakan konten file dalam skrip Anda, Anda memerlukan mekanisme yang memberitahu skrip Anda ketika file selesai dimuat atau gagal memuat. Di situlah janji berguna. Ada cara lain untuk menyelesaikan masalah ini, tapi saya pikir janji - janji itu paling nyaman.
Rotareti

@Rotareti Apakah browser seluler mendukung pendekatan ini?
Bodruk

Hanya versi browser yang lebih baru yang mendukungnya. Praktik yang umum adalah menulis kode Anda dalam ES6 / 7 / .. terbaru dan menggunakan Babel atau sama untuk mengubahnya kembali ke ES5 untuk dukungan browser yang lebih baik.
Rotareti

2
@Rotareti Bisakah Anda juga menjelaskan mengapa ini lebih nyaman daripada panggilan balik 'sederhana'? Apakah kenyamanan ini sepadan dengan upaya ekstra untuk mengubahnya menjadi dukungan browser lama?
lennyklb

@LennartKloppenburg Saya pikir jawaban ini menjelaskannya dengan baik: stackoverflow.com/a/14244950/1612318 "Apakah kenyamanan ini sepadan dengan upaya ekstra untuk mengubahnya menjadi dukungan browser lama?" Janji hanyalah salah satu dari banyak fitur yang datang dengan ES6 / 7. Jika Anda menggunakan transpiler, Anda dapat menulis JS terbaru. Itu sangat berharga!
Rotareti

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"

58
Jangan lakukan panggilan sinkron. Gunakan xhReq.onload dan gunakan callback.
19h

3
@FellowStranger oReq.onload = function () {/*this.responseText*/};
19h

3
@kenansulayman Apa yang salah dengan panggilan sinkron? Terkadang ini cocok untuk yang terbaik.
Andrii Nemchenko

@ Andrew: tidak ada, sejauh yang Anda sadari Anda menghentikan eksekusi segalanya sampai respons dari server kembali. Tidak ada yang sangat buruk, tetapi mungkin tidak cukup memadai untuk beberapa kegunaan.
mrówa

Juga, jika server sebenarnya tidak pernah merespons karena suatu alasan, sisa kode Anda tidak akan pernah berjalan.
Random Elephant

35

Gunakan XMLHttpRequest .

Permintaan GET sederhana

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

Permintaan POST sederhana

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

Kita dapat menentukan bahwa permintaan harus asinkron (benar), default, atau sinkron (salah) dengan argumen ketiga opsional.

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

Kita dapat mengatur tajuk sebelum menelepon httpRequest.send()

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

Kami dapat menangani respons dengan mengatur httpRequest.onreadystatechangeke suatu fungsi sebelum memanggilhttpRequest.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.');
    }
  }
}

1
Perhatikan bahwa ada status sukses lainnya dari 200 misalnya 201
Nate Vaughan

30

Anda bisa mendapatkan objek yang benar sesuai dengan browser

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

Dengan objek yang benar, GET dapat diabstraksi menjadi:

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

Dan POST ke:

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

18

Saya mencari cara untuk memasukkan janji dengan ajax dan mengecualikan jQuery. Ada sebuah artikel di HTML5 Rocks yang berbicara tentang janji ES6. (Anda dapat melakukan polyfill dengan perpustakaan janji seperti Q ) Anda dapat menggunakan potongan kode yang saya salin dari artikel.

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

Catatan: Saya juga menulis artikel tentang ini .


15

Kombinasi kecil dari beberapa contoh di bawah ini dan membuat karya sederhana ini:

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

ATAU jika parameter Anda objek (s) - penyesuaian kode tambahan kecil:

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

Keduanya harus sepenuhnya kompatibel dengan browser + versi.


Apakah layak menggunakan hasOwnProperty di dalam for loop di sini?
kibibu

15

Jika Anda tidak ingin memasukkan JQuery, saya akan mencoba beberapa pustaka AJAX yang ringan.

Favorit saya adalah reqwest. Ini hanya 3.4kb dan dibangun dengan sangat baik: https://github.com/ded/Reqwest

Berikut ini contoh permintaan GET dengan reqwest:

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

Sekarang jika Anda menginginkan sesuatu yang lebih ringan, saya akan mencoba microAjax hanya dengan 0,4 kb: https://code.google.com/p/microajax/

Ini semua kode di sini:

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

Dan inilah contoh panggilan:

microAjax(url, onSuccess);

1
Saya pikir ada masalah dengan microAjax, ketika Anda menyebutnya dua kali (karena banyak "ini", saya pikir, harus ada tabrakan). Saya tidak tahu apakah memanggil dua "microAjax baru" adalah solusi yang baik, bukan?
Jill-Jênn Vie

13

Tua tapi saya akan coba, mungkin seseorang akan menemukan info ini berguna.

Ini adalah jumlah minimal kode yang perlu Anda lakukan GETpermintaan dan mengambil beberapa JSONdata yang diformat. Ini hanya berlaku untuk browser modern seperti versi terbaru dari Chrome , FF , Safari , Opera dan 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();

Juga periksa Ambil API baru yang merupakan pengganti berbasis janji untuk API XMLHttpRequest .


9

XMLHttpRequest ()

Anda dapat menggunakan XMLHttpRequest()konstruktor untuk membuat objek baru XMLHttpRequest(XHR) yang akan memungkinkan Anda untuk berinteraksi dengan server menggunakan metode permintaan HTTP standar (seperti GETdan 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);

mengambil()

Anda juga dapat menggunakan fetch()metode ini untuk mendapatkan Promiseyang menyelesaikan ke Responseobjek yang mewakili respons terhadap permintaan Anda:

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 ()

Di sisi lain, jika Anda hanya berusaha untuk POSTdata dan tidak memerlukan respons dari server, solusi terpendek adalah menggunakan navigator.sendBeacon():

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

navigator.sendBeacon('example.php', data);

1
Saya sangat suka jawaban Anda, karena Anda menutupi sebagian besar kasus bahkan untuk Internet Explorer dengan XMLHttpRequest, tapi saya akan merekomendasikan untuk mengubah: "data const = ..." menjadi: "var data = ..." pada contoh itu (XMLHttpRequest) sehingga sepenuhnya kompatibel dengannya
Dazag

8

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

7

Ini dapat membantu:

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

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>

4

Yah itu hanya proses mudah 4 langkah,

Saya harap ini membantu

Step 1. Simpan referensi ke objek XMLHttpRequest

var xmlHttp = createXmlHttpRequestObject();

Step 2. Ambil objek 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. Buat permintaan HTTP asinkron menggunakan objek 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. Dilakukan secara otomatis ketika pesan diterima dari server

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

3

di JavaScript polos di browser:

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

Atau jika Anda ingin menggunakan Browserify untuk menggabungkan modul-modul Anda menggunakan node.js. Anda dapat menggunakan 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);
     }
 });

3

Inilah JSFiffle tanpa 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();

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

panggilan ajax saya

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

untuk membatalkan permintaan sebelumnya

      my_ajax_call.abort(function(result){
       console.log(result);
       });

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

?>

Seandainya satu baris tidak perlu kurung keriting, Noone menggunakan IE6, Ini mungkin disalin disalin, gunakan onload bukannya onreadystatechange, menangkap kesalahan untuk kemungkinan panggilan rekursif, xmlhttp adalah nama variabel yang mengerikan, panggil saja x.
super

1

Solusi yang sangat bagus dengan javascript murni ada di sini

/*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();
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.