Ajax入門 01
什麼是ajax?
Asynchronous JavaScript And XML 非同步JavaScript和XML ,建立互動式的網頁開發技術
是屬於客戶端與伺服器之間互動的一種技術
與傳統的互動比較
傳統的互動(整個頁面重新整理+請求和響應同步處理)
瀏覽器發請求-->tomcat-->tomcat響應給瀏覽器-->jsp servlet處理 -->返回響應瀏覽器顯示響應結果
使用Ajax互動(區域性重新整理和非同步處理)
客戶請求-->XMLHttpRequest發請求-->到tomcat-->XMLHttpRequest接受結果-->顯示瀏覽器
Ajax好處
區域性重新整理和非同步處理
提高了程式的互動效率(傳遞數量少)
提高使用者體驗(避免了整個頁面的頻繁重新整理)
Ajax原理
Ajax是一系列技術的綜合運用
基於js去傳送請求和響應處理
以XMLHttpRequest物件為核心
涉及Html css 頁面渲染技術
涉及xml,json等資料互動格式
//servlet響應設定字元: res.setContentType("text/plain;charset=utf-8");
使用JavaScript建立XMLHttpRequest
<!-- 獲取xmlHttpRequest --> <script type="text/javascript"> //建立XmlHTTPRequest function getXhr(){ var xhr; if(window.XMLHttpRequest){ //判斷瀏覽器,是否是ie的老版本 xhr = new XMLHttpRequest();傳送Http請求
function sendRequest() { var xhr = getXhr(); xhr.open("get","demo1.do",true);//建立一個http請求 xhr.send(null);//傳送http請求 }回撥函式
function sendRequest() {
var xhr = getXhr();
xhr.open("get","demo1.do",true);//建立一個http請求
//註冊一個回撥函式,請求處理完成之後呼叫
xhr.onreadystatechange= function(){
if(xhr.readyState==4){//請求處理完畢
//獲取伺服器返回的資訊
var msg =xhr.responseText;
//將訊息放到span span的id叫msg
document.getElementById("msg").innerHTML=msg;
}
};
xhr.send(null);//傳送http請求
}
註釋:
readyState: 0,1,2,3,4 4就是請求處理完畢
responseText 獲取伺服器返回的文字
responseXML 獲取伺服器返回的XML