Ajax概念、HTTP請求概念、Ajax的原生和jQuery實現、跨域知識

一、Ajax（讀A—jax不是阿賈克斯）原理圖：

二、HTTP請求概念

<script>
document.getElementById("search").onclick = function() { 
   var request = new XMLHttpRequest();
   request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
   request.send();
   request.onreadystatechange = function() {
      if (request.readyState===4) {
         if (request.status===200) { 
            document.getElementById("searchResult").innerHTML = request.responseText;
         } else {
            alert("發生錯誤：" + request.status);
         }
      } 
   }
}

document.getElementById("save").onclick = function() { 
   var request = new XMLHttpRequest();
   request.open("POST", "server.php");
   var data = "name=" + document.getElementById("staffName").value 
                     + "&number=" + document.getElementById("staffNumber").value 
                     + "&sex=" + document.getElementById("staffSex").value 
                     + "&job=" + document.getElementById("staffJob").value;
   request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   request.send(data);
   request.onreadystatechange = function() {
      if (request.readyState===4) {
         if (request.status===200) { 
            document.getElementById("createResult").innerHTML = request.responseText;
         } else {
            alert("發生錯誤：" + request.status);
         }
      } 
   }
}
</script>

三、JSON語法規則

四、jQuery實現Ajax

五、跨域