什麼是AJAX？

AJAX = 非同步 JavaScript 和 XML。

AJAX 是一種用於建立快速動態網頁的技術。

通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

下面通過原生JavaScript和Jquery庫實現
AJAX的請求是是需要後臺配合的，在實現的時候可能會出現跨域的問題(本次提前解決了跨域問題)

原生Js實現

html

<style>
  #res{
    height: 300px;
    width: 300px;
    border: red solid 5px;
  }
</style>

<button>點擊發送請求</button>
<!-- #res標籤存放ajax響應體 -->
<div id="res"></div>
 

Javascript

  let btn = document.getElementsByTagName("button")[0];
  let res = document.getElementById('res');
  btn.onclick = function(){
    //建立物件
    let xhr = new XMLHttpRequest();

    //設定請求方式

    //GET方法
    xhr.open('GET', 'www.****.com');
    //get傳參：xhr.open('GET', 'www.****.com?a=100&b=200');

    //POST方法
    //xhr.open('POST', 'www.****.com')
    //post傳參是直接在xhr.send()中傳。eg：xhr.send('a=100&b=200')

    //設定請求頭
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
    //傳送
    xhr.send();
    //處理返回結果
    xhr.onreadystatechange = function(){
      //readyState 是XMLHttpRequest物件中的屬性，共有5個值 0 1 2 3 4 表示狀態
      //0 表示未初始化，readyState的初始值
      //1 表示open()方法呼叫完畢
      //2 表示send()方法呼叫完畢
      //3 表示服務端返回了部分資料
      //4 表示服務端返回了所有資料
      if(xhr.readystate === 4){
        if(xhr.status >= 200 && xhr.status < 300){
          //xhr.responseText、xhr.response.URL都可以自己列印嘗試
          res.innerHTML = xhr.response
        }
      }
    }
  }
 

Jquery實現

html

<button class="col-3">GET</button>
<button class="col-3">POST</button>
<button class="col-3">AJAX</button>

javascript

//get方法
$('button').eq(0).click(function(){
  $.get('www.****.com', {a: 100}, function(data){
  console.log(data);
  })
})
//post方法
$('button').eq(1).click(function(){
  $.post('www.****.com', {a: 100}, function(data){
    console.log(data);
  })
})
//  POST\GET都可
$('button').eq(2).click(function(){
  $.ajax({
    type: 'get',
    url: 'www.****.com',
    data:{
      a: 100,
      b:200
    }
    success: function(data){
      console.log(data);
    },
    error: function(data){
      console.log('請求失敗')
    }
  })
})