Node.js Ajax Veri Ekleme, Çekme ve Dosya Yükleme

Node.js ve çeşitli modüller kullanarak Ajax ile veri ekleme, veri çekme ve dosya yükleme işlemleri ile ilgili bilgiler yer alıyor.

Node.js Ajax Veri Ekleme

Öncelikle proje dosyasını ve gerekli modülleri aşağıdaki komutlarla oluşturup indirelim.

npm init -y
npm i express body-parser

Formun hazırlanması

Gerekli paketleri indirdikten sonra veri ekleme işlemi için formu hazırlayalım.

<form action="ekle" method="POST" name="kayitformu">
  <label for="adi">Adınız: </label>
  <input type="text" id="adi" name="adi" required="required" />
  <label for="soyadi">Soyadınız: </label>
  <input type="text" id="soyadi" name="soyadi" required="required" />
  <input type="submit" />
</form>

Sunucunun hazırlanması

Veri ekleme işleminde kullanılacak olan formu Node.js ile HTTP sunucusu oluşturarak gösterelim.

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: false }))

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/form.html');
});

app.listen(3000, function () {
  console.log('Sunucu başlatıldı...');
});

Komutlar Express ile yeni bir HTTP sunucu oluşturup gönderilen veriyi body-parser modülüyle işleyecektir.

Veri ekleme işlemini yapılacağı ekle bölümünü oluşturalım.

app.post('/ekle', function (req, res) {
  let adi = req.body.adi;
  let soyadi = req.body.soyadi;

  res.json(req.body);
});

Veri ekleme bölümü formdaki adi ve soyadi parametrelerini JSON biçiminde geri döndürecektir.

Ajax veri ekleme işlemi

Veri ekleme işleminde en önemli kısım Ajax ile verilerin gönderilmesidir.

<script>
'use strict';
  var kayitFormu = document.forms["kayitformu"];
  kayitFormu.addEventListener("submit", gonder);

  function gonder(event) {
    event.preventDefault();

    var adi = kayitFormu.adi.value;
    var soyadi = kayitFormu.soyadi.value;
    var veri = "adi=" + adi + "&soyadi=" + soyadi;

    ysAjax("/ekle", "POST", veri, function (sonuc) {
      console.log(sonuc);
      //alert(sonuc.response);
      //alert(sonuc.responseText);
    });
  }
</script>

Veri ekleme işleminde form seçilmiş ve form bilgilerini gönderme başlayınca gonder isimli fonksiyonun çalıştırılması sağlanmıştır.

Fonksiyon ilk olarak gönderme işlemini preventDefault ile iptal etmiştir.

Formdaki veriler seçilip uygun biçimde yazılmış ve göndermeye hazır hale getirilmiştir.

Veriler ysAjax fonksiyonu kullanılarak gönderme işlemi yapılmıştır.

Fonksiyonun son parametresi gönderme işlemi sonucunu parametre olarak veren bir fonksiyon almaktadır.

Bu fonksiyon kullanılarak işlem sonucu ile ilgili bilgi alınabilir.

Sonuca sonuc.response, sonuc.responseText gibi özellikler kullanılarak erişilebilir.

Geri dönüş biçimi JSON olarak verildiği için JSON.parse metodu ile işlem sonucu da öğrenilebilir.

var gelenVeri = JSON.parse(sonuc.responseText);
alert(gelenVeri.adi);
alert(gelenVeri.soyadi);

Fonksiyon hakkında detaylı bilgi için JavaScript AJAX Nedir? Kullanımı yazısına bakmanızda fayda var.

Node.js Ajax Dosya Yükleme

Node.js ile dosya yükleme işlemi için express ve formidable modülü kullanılacaktır.

Detaylı bilgi için Node.js Dosya Yükleme yazısına bakabilirsiniz.

Sunucunun hazırlanması

Express ve formidable kullanarak dosya yükleme işlemini yapalım.

const express = require('express');
const app = express()
const fs = require('fs');
const formidable = require('formidable');

app.post('/yukleme', function (req, res) {

  let yukleme = new formidable.IncomingForm();
  yukleme.parse(req, function (err, fields, files) {

    let dosyaYolu = files.yuklenecek_dosya.path;
    let yuklenecekYer = __dirname + '/' + files.yuklenecek_dosya.name;

    fs.rename(dosyaYolu, yuklenecekYer, function (error) {
      if (error) throw error;
      res.send('Dosya başarıyla yüklendi.');
    });

  });
});

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/dosya-yukleme.html');
});

app.listen(3000);

Formun hazırlanması

Gerekli olan dosya yükleme işlemini Node.js ile yaptıktan sonra gerekli formu hazırlayalım.

<form action="yukleme" method="POST" enctype="multipart/form-data" name="dosyaYukleme">
  <input type="file" name="yuklenecek_dosya" required="required" />
  <input type="submit" />
</form>

NOT: Formdaki method değerinin POST ve enctype değerinin multipart/form-data olduğuna dikkat edin.

Ajax dosya yükleme işlemi

Ajax ile ilgili detaylı bilgi için JavaScript AJAX Nedir? Kullanımı yazısına bakabilirsiniz.

<script>
'use strict';
  var dosyaYukleme = document.forms["dosyaYukleme"];
  dosyaYukleme.addEventListener('submit', yukle);

  function yukle(event) {
    event.preventDefault();

    var veriler = new FormData(event.target);

    ysAjax('/yukleme', 'POST', veriler, function (sonuc) {
      console.log(sonuc.responseText);
    });
  }
</script>

Dosya yükleme işleminde form seçilmiş ve form bilgilerini gönderme başlayınca yukle isimli fonksiyonun çalıştırılması sağlanmıştır.

Fonksiyon ilk olarak gönderme işlemini preventDefault ile iptal etmiştir.

Daha sonra formdaki veriler FormData ile yüklenmeye hazır hale getirilmiştir.

Veriler ysAjax fonksiyonu kullanılarak gönderme işlemi yapılmıştır.

Fonksiyonun son parametresi gönderme işlemi sonucunu parametre olarak veren bir fonksiyon almaktadır.

Bu fonksiyon kullanılarak işlem sonucu ile ilgili bilgi alınabilir.

Sonuca sonuc.response, sonuc.responseText gibi özellikler kullanılarak erişilebilir.

Node.js Ajax Veri Çekme

Ajax ile veri çekme işlemi ajax ile veri ekleme ve ajax ile dosya yükleme işleminden daha kolay bir şekilde yapılmaktadır.

Sunucunun hazırlanması

Veri çekme işleminde çekilecek verileri Express ile hazırlayalım.

Amacımız AJAX ile veri çekme olduğundan verileri kendimiz hazırladık bu veriler veritabanından alınmış olabilir.

Express içerisinde yer alan json metodu veriyi JSON formatına çevirmek için kullanılır.

const express = require('express');
const app = express();

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/veriler.html');
});

app.get('/kisiler', function (req, res) {
  let kisiler = [
    { adi: 'Yusuf', soyadi: 'SEZER' },
    { adi: 'Ramazan', soyadi: 'SEZER' },
    { adi: 'Sinan', soyadi: 'SEZER' },
    { adi: 'Mehmet', soyadi: 'SEZER' }
  ];

  res.json(kisiler);
});

app.listen(3000, function () {
  console.log('Sunucu başlatıldı...');
});

JSON biçimi boyutunun XML yapısına göre az olması ve kullanım kolaylığından dolayı tercih edilir.

Detaylı bilgi için için JSON Nedir? yazısına bakabilirsiniz.

Ajax veri çekme işlemi

Veri çekme işleminde en önemli kısım verinin Ajax ile alınıp uygun bir şekilde sayfaya yerleştirilmesidir.

<p id="veriler"></p>
<script>
'use strict';
  window.addEventListener("load", getir);

  function getir() {
    var veriler = document.querySelector("#veriler");

    ysAjax("kisiler", "GET", null, function (sonuc) {
      console.log(sonuc);
    });
  }
</script>

Veri çekme işlemi sayfa yüklendiğinde yapılmasını istediğimiz için window nesnesinin load olayında getir fonksiyonunun çalışmasını sağladık.

Fonksiyonda verilerin ekleneceği alan seçilerek ysAjax fonksiyonu ile veri çekme işlemi yapılmıştır.

Fonksiyonun son parametresi veri çekme işlemi sonucunu parametre olarak veren bir fonksiyon almaktadır.

Bu fonksiyon kullanılarak çekilen verilere sayfaya yerleştirilir.

Verilere sonuc.response, sonuc.responseText gibi özellikler kullanılarak erişilebilir.

Geri dönüş biçimi JSON olarak verildiği için JSON.parse metodu ile alınan veriler işlenebilir hale getirilir.

var gelenVeriler = JSON.parse(sonuc.responseText);

for (var i = 0; i < gelenVeriler.length; i++) {
  var kisi = gelenVeriler[i];
  veriler.innerHTML += "Adı: " + kisi.adi;
  veriler.innerHTML += " Soyadı: " + kisi.soyadi;
  veriler.innerHTML += "<br/>";
}

Geri dönüş verinin bulunduğu açıklama sayfasından veya Postman, SOAPUI gibi araçlarla kontrol edilerek kullanılması faydalı olacaktır.

Veriler sayfa yapısına göre örnekteki gibi sayfaya yerleştirilir.

Başka sayfadan veri çekme işlemi

Ajax ile veri çekme işleminde başka bir adresten veri çekerken web tarayıcı tarafından çeşitli kısıtlamalar olabilir.

CORS kullanımı

Bu durumda CORS (Cross-Origin Resource Sharing) olarak adlandırılan yapı kullanılabilir.

Express.js ile CORS yapısına izin vermek için aşağıdaki kodların eklenmesi yeterli olacaktır.

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

JSONP kullanımı

JSONP, Ajax ile başka sayfadan veri çekme işlemi sırasında gelen kısıtlamayı aşmak için geliştirilen bir yöntemdir.

Yöntem temel olarak verileri belirlenen fonksiyona parametre olarak gönderir.

Express.js ile JSONP oluşturmak için jsonp metodu kullanılır.

app.get('/kisiler', function (req, res) {
  let kisiler = [
    { adi: 'Yusuf', soyadi: 'SEZER' },
    { adi: 'Ramazan', soyadi: 'SEZER' },
    { adi: 'Sinan', soyadi: 'SEZER' },
    { adi: 'Mehmet', soyadi: 'SEZER' }
  ];

  res.jsonp(kisiler);
});

Kullanımı aşağıdaki gibidir.

<script>
  function getir(veriler) {
    console.log(veriler);
  }
</script>
<script src="/kisiler?callback=getir"></script>

Kullanım sırasında ilk olarak fonksiyon adının yazılması gerekir.

Alınan veriler sayfa yapısına Ajax ile veri çekme işleminde olduğu gibi sayfaya yerleştirilir.

Node.js Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.