Cara menggunakan ajax javascript

Setelah kemarin kita belajar sebuah basic bagaimana cara menggunakan ajax javascript, oke sekarang kita coba cara menggunakan POST dan GET pada Ajax Javascript, mungkin sudah tidak asing lagi bagi teman-teman yang sudah pernah belajar PHP ya, oke jadi ada dua untuk menggunakannya, dan yang pastinya untuk menggunakan kedua tersebut, caranya berbeda, seperti apa simak terus ya teman-teman.

Sperti yang kita ketahui ketika kita menggunakan GET dan biasanya GET sendiri digunakan untuk sebuah pemanggilan, seperti klik read more, pokonya ketika kita klik sebuah button atau semacamnya maka kita akan mendapatkan proses data atau tampilan yang berbeda seperti kita mengklik tombol seperti pagination dan menu, beda halnya ketika kita menggunakan POST dimana POST digunakan proses form ya, oke langsung saja pertama saya akan mencontohkan menggunakan GET ya, untuk webserivcenya masih sama disini saya akan menggunakan data.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<script type="text/javascript">

function load_ajax(){

const ajax = new XMLHttpRequest()

var text = document.getElementById("text").value

ajax.open('GET', 'src/data.php?keyword='+text, true)

ajax.onreadystatechange = function(){

if(this.readyState === 4 && this.status === 200){

// let data = JSON.parse(this.responseText)

document.getElementById('result').innerHTML = this.responseText

}

}

ajax.send()

}

document.getElementById("btn").onclick = function(){

load_ajax()

}

</script>

jadi silahkan kita berikan sebuah parameter yang ada link tersebut disini saya memberikannya dengan sebuah kata keyword

1

'GET', 'src/data.php?keyword='+text, true

oke sekarang kita contoh kanya dengan POST

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<script type="text/javascript">

function load_ajax(){

const ajax = new XMLHttpRequest()

var text = document.getElementById("text").value

let data = "keyword="+text;

ajax.open('GET', 'src/data.php', true)

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

ajax.onreadystatechange = function(){

if(this.readyState === 4 && this.status === 200){

// let data = JSON.parse(this.responseText)

document.getElementById('result').innerHTML = this.responseText

}

}

ajax.send(data)

}

document.getElementById("btn").onclick = function(){

load_ajax()

}

Bedanya di POST parameternya kita tidak letakan di situ ya, saya buat variabel lagi

1

2

3

let data = "keyword="+text;

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

ajax.send(data)

mungkin itu tambahannya, untuk yang post dan di data.php nya saya hanya menulis

1

2

3

4

<?php  

echo "Nama: ". $_GET["keyword"];

echo "Nama: ". $_POST["keyword"];

?>

GET untuk yang GET dan POST untuk yang POST, kurang lebih seperti itu, oke saya rasa cukup sampai disini belajar kita tentang cara menggunakan POST dan GET pada Ajax Javascript semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.

Apa itu AJAX Bagaimana cara kerjanya?

Kapan menggunakan AJAX?

Kenapa menggunakan AJAX?

Apa yang dimaksud AJAX?