XHR - XMLHttpRequest İstekleri, Ajax Json Verisi Kullanımı AngularJS | Turkish Tutorial
English
XHR (XMLHttpRequest) Requests and Ajax
XHR (XMLHttpRequest) can be thought of as a kind of API that allows the web server to communicate with the client side (browser). XHR is a feature that is currently supported by modern browsers and web server software.
AJAX can be thought of as a programming approach. In the AJAX approach, which is non-synchronized Javascript + XML, you can present the current content to the user without refreshing the page with a data stream that is not synchronized with the Javascript and XHR API.
** Note: ** Here are a few links that should draw your attention, if you look at it with a browser we can say that you are requesting an XHR every time you refresh the page. In the AJAX approach, it is recommended that these requests be made without page loading (by the browser).
A browser works on 2 basic requests, these are GET and POST requests. When the GET request requests data from the web server, the POST request sends data to the web server for processing by the server-side processor.
We do XHR requests at AngularJS with the built-in AngularJS service $ http we mentioned and used in previous sections of our training.
Let's take a closer look at what we can do with GET and POST examples and the $ http service.
Get Get and Use Json Data
If you remember, we used the HTTP service in AngularJS Services section of our training to retrieve the contents of a txt file contained in your files and use it on the page. We can say that the request for GET allows you to read and use the page in the same way as you read the page.
** Note: ** We mentioned in the previous sections of the tutorial how to handle normal text (text) output. Here we will use the pages / files that give the JSON output in our examples.
Türkçe
XHR (XMLHttpRequest) İstekleri ve Ajax
XHR (XMLHttpRequest), web sunucusu ile istemci tarafının (tarayıcı) iletişimini sağlayan bir tür API olarak düşünülebilir. XHR modern tarayicılar ve web sunucu yazılımları tarafindan geçerli olarak desteklenen bir özeıliktir.
AJAX ise, bir programlama yaklaşımı olarak düşünülebilir. Açılımının Türkçe karşılığı senkron olmayan Javascript + XML olan AJAX yaklaşımında Javascript ve XHR API'i ile eş zamanlı olmayan veri akışı ile sayfayı yenilemeden kullanıcıya güncel içerik sunabilirsiniz.
Not: Burada dikkatinizi çekmesi gereken birkaç bağlantı bulunuyor, Aslına bakarsanz bir tarayıcı ile sayfayı her yenilediğinizde bir xHR isteği yapıyorsunuz diyebiliriz. AJAX yaklaşımında, yapılan bu isteklerin sayfa yüklemesi (tarayıcı tarafından)yapılmadan da gerçekleştirilmesi önerilir.
Bir tarayıcı 2 temel istek üzerine çalışır, Bunlar GET ve POST istekleridir. GET isteği, web sunucusundan veri talep ederken, POST isteği web sunucusuna, sunucu taraflı işlemci tarafından işlenmek üzere veri gönderir.
AngularJS'de XHR isteklerini, eğitimlerimizin önceki bölümlerinde de bahsettiğimiz ve kullandığımız built-in AngularJS servisi $http ile gerçekıeştiriyoruz.
Bölümün devamında GET ve POST örnekleri ve $http servisi ile yapabileceklerimizi daha ayrıntılı inceleyelim.
Get İsteği ve Json Verisi Kullanımı
Hatırlarsanız, eğitimimizin AngularJS Servisleri bölümünde HTTP servisi ile dosyalarımızın içinde bulunan bir txt dosyasının içeriğini alıp bunu sayfada kullanmıştık. GET isteğinin, sayfayı bir tarayıcı gibi okuyup verdiği çıktıyı belirttiğiniz yapıda alıp kullanmanızı sağlıyor diyebiliriz.
Not: Eğitimlerin önceki bölümıerinde normal text (metin) çıktılarını nasıl işleyeceğimizden bahsettik. Burada örneklerimizde JSON çıktısı veren sayfaları/dosyaları kullanacağız.
Örneğimizde, oluşturduğumuz sebzeler Array'i tutan JSON kodlarını sebze.json dosyasına kayıt ederek bu dosyayı proje dosyamız içine (çalıştığımız HTML
dosyası ile aynı klasör içine) atalım;
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<ul>
<li><b>İşlem Statüsü:</b> {{jsonSebzeObj.status}}</li>
<li><b>Text Statüsü:</b> {{jsonSebzeObj.statusText}}</li>
</ul>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope, $http){
$http({method: "GET", url: "sebze.json"}).then(function(resp){
$scope.jsonSebzeObj = resp;
console.log($scope.jsonSebzeObj.data);
});
});
</script>
</body>
</html>
Örneğimizde $http servisi, GET metodu ile içeriğini aldığımız sebze.json dosyası içerinin JSON olduğunu algılayarak, döndüreceği değişkeni bir Javascript objesine dönüştürmektedir. Bu dönüştürme durumuna parse etmek diyoruz.
Dosyadan dönen verinin, dönen objenin data değişkeninde olduğunu unutmayınız! (jsonSebzeObj.data)
then() içerisinde, içeriğin alınması ile birlikte dönen değişkeni bir $scope değişkenine (jsonSebzeObj) atıyoruz ve bu obje içerisinde bulunan status ve statusText değerlerini sayfaya yazdırıyoruz.
Not: Status değerinin 200 olması bir HTTP isteğinin başarılı bir şekilde gerçekleştirildiğini simgeler. status değerinin 200 olması geliştiriciler tarafından çalışılan cihazda internet bağlantısı olması veya verinin alindığı sunucuda bir sorun olmadığını simgeler HTTP statü kodların tamamı:
https://en.wikipedia.org/wiki/List_of_HTTP_status_codes
Şimdi ki örneğimizde de JSON ile elde ettiğimiz sebzeler array'ini ng-repeat direktifi kullanarak sayfada bir tablo oluşturalım ve her sebzenin besin değerlerini görüntüleyelim;
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<table border="1" cellpadding="3">
<tr>
<th>Sebze Adı</th>
<th>Kalori</th>
<th>Proteyin</th>
<th>Yağ</th>
<th>Karbonhidrat</th>
</tr>
<tr ng-repeat = "sebze in jsonSebzeObj.data.sebzeler">
<td>{{sebze.isim}}</td>
<td>{{sebze.kalori}}</td>
<td>{{sebze.pro}} gr</td>
<td>{{sebze.yag}} gr</td>
<td>{{sebze.karb}} gr</td>
</tr>
</table>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope, $http){
$http({method: "GET", url: "sebze.json"}).then(function(resp){
$scope.jsonSebzeObj = resp;
});
});
</script>
</body>
</html>
Örneğimizde, bir önceki örnekteki JSON dosyasından çektiğimiz objeyi kullanarak obje içindeki sebzeler array'i içindeki obje elemanlarını (jsonSebzeObj.data.sebzeler) ng-repeat ile bir tabıo halinde sayfada yazdırdık. Burada dikkat edilmesi gereken, tekrar edecek olan DOM elementinin
Gördüğünüz gibi tarayıcı olarak Mozilla Firefox kullanıyoruz. GET işlemi sırasında, lokal (yerel) dosyamızda bir sorun bulunmuyor. Fakat Google Chrome,
güvenlik gerekçeleri ile Cross origin istekleri lokal dosyamızda (file:// protokolüne sahip) çalıştırmamaktadır.
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @codings I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x