Ajax
AJAX：“Asynchronous JavaScript and XML”，異步的JavaScript和XML。但好像沒XML啥事兒，主要就是一堆JavaScript代碼。
普通的網頁請求回執過程（請求響應模式），浏覽器送出請求之後要等着浏覽器傳回請求，期間不能做任何事。
Ajax模式，浏覽器将請求發送給Ajax引擎，讓其去和伺服器請求并且等待傳回的資料，浏覽器還可以接着向下執行别的操作。
打個比方，傳統方式是一個人在幹活，ajax是兩個人在幹活。
Ajax是一個浏覽器端的技術，Ajax引擎是由浏覽器實作的。Ajax技術的主要目的在于局部交換用戶端和伺服器之間的資料。能夠不用重新載入整個頁面來更新資料，也就是Refresh without Reload（輕重新整理）。
與伺服器之間的溝通，完全是通過JavaScript來實行。因為不用重新載入整個頁面，Ajax傳送的資料量很小，反應也會很快。注：JavaScript是一門單線程語言，無法指定開啟新的線程。
Get方式
建立一個Ajax.jsp，填寫代碼
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script>
window.onload=function(){
//給按鈕注冊一個單擊事件
document.getElementById('btnClick').onclick=function(){
//1.建立一個XMLHttpRequest對象
var xhr=null;
//通過能力檢測，在不同浏覽器中建立該對象
if(XMLHttpRequest){
xhr=new XMLHttpRequest();
}else if(ActiveXObject){
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
//2.設定回調函數
xhr.onreadystatechange=function(){
if(xhr.readyState==&&xhr.status==){
document.getElementById('dvTime').innerHTML='目前時間：'+xhr.responseText;
}
};
//3.初始化請求，告訴xhr對象，使用get還是post請求，要請求哪個位址，是否是異步請求
xhr.open('get','ShowTime.jsp',true);
//如果想傳遞參數的話
//xhr.open('get','ShowTime.jsp?name=eaglezsx&age=22',true);
//通過Ajax發起請求，如果需要手動設定請求封包頭，則需要在初始化之後（open），在發送請求之前(send)
xhr.setRequestHeader('if-modified-since','0');//設定浏覽器不使用緩存
//4.開始發起請求
xhr.send();//因為目前使用的是get請求，沒有請求封包體，是以傳遞null參數。
};
};
</script>
</head>
<body>
<input type="button" id="btnClick" value="擷取伺服器時間"/>
<div id="dvTime">
目前時間：
</div>
</body>
</html>
建立一個ShowTime.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
out.write(new java.util.Date().toLocaleString());
%>
Post方式
xhr.open("POST", "ShowTime.jsp", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//添加請求頭
xhr.send("name=eaglezsx&age=22");
XMLHttpRequest對象
XMLHttpRequest 是 AJAX 的核心對象。所有現代浏覽器均支援XMLHttpRequest對象（IE5和IE6使用ActiveXObject）。
建立對象
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏覽器執行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏覽器執行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequest就是個變量，如果浏覽器中定義了，為Object，會轉換為true。如果沒有定義，會轉換為undefined，而undefined會轉換為false。
向伺服器發送請求
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
open(method , url , async):規定請求的類型、URL以及是否異步處理請求。method：請求的類型；GET或POST。url：檔案在伺服器上的位置。async：true(異步)或false（同步）。
send(string)：将請求發送到伺服器。string：僅用于POST請求。
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
setRequestHeader(header,value):向請求添加HTTP頭。
伺服器響應
如需獲得來自伺服器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
responseText:獲得字元串形式的響應資料
responseXML:獲得XML形式的響應資料
onreadystatechange事件
當請求被發送到伺服器時，需要執行一些基于響應的任務。每當readyState改變時，就會觸發onreadystatechange事件。readyState屬性存有XMLHttpRequest的狀态資訊。
onreadystatechange：存儲函數，每當readyState屬性改變時，就會調用該函數。
readyState：存有XMLHttpRequest的狀态。從0到4發生變化。
- 0：請求未初始化
- 1：伺服器連接配接已建立
- 2：請求已接收
- 3：請求進行中
- 4：請求已完成，且響應已就緒
status：200：“OK”，404：“未找到頁面”
在onreadystatechange事件在中，規定當伺服器響應已做好被處理的準備時所執行的任務。
當readyState等于4且狀态為200時，表示響應已就緒：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState== && xmlhttp.status==)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
注意： onreadystatechange 事件被觸發 5 次（0 - 4），對應着 readyState 的每個變化。
注意事項
- XMLHttpRequest隻能向同一個域中的相同端口号、相同協定的url發起請求，不能跨域,否則會引起錯誤。
- 為了浏覽器相容,get請求時最好為send()傳遞null參數。
- 在建立了xhr對象後立刻設定onreadystatechange事件，這樣就能監視到所有的狀态。如果不需要監視其他狀态隻監視readyState==4的狀态則可以在send()之前設定。
- get請求會有緩存問題,解決方式有
-
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true)//每次的都不一樣;
-
xhr.setRequestHeader('if-modified-since','0');
-
- POST請求 時，為了像表單那樣送出資料需要設定請求的Content-Type為：application/x-www-form-urlencoded。send(“鍵=值&鍵=值”)
- 通過ajax隻能傳遞一些基本的資料，傳遞不了檔案，要通過别的插件實作
jQuery方式Ajax
$(function(){
$("#btnClick").click(function(){
$.get("ShowTime.jsp",{"name":"eaglezsx","age":},
function(data){
$("#dvTime").html("目前時間"+data);
});
});
});
若是post請求直接把get改成post就行了
還有一種形式
$("#txtLoginId").blur(function () {
$.ajax({
type:"post",
url:"song.php",
data:"name=joh&lat=ddd",
success:function (msg) {
alert(msg);
}
});
});