1.什麼是ajax
Asynchronous JS And Xml 異步JS 和 XML
2.ajax 技術構成
以html 爲骨架
以css 爲渲染手段
以js 作爲主要的操作語言
以XML 或者 JSON 作爲數據傳輸格式
以 XMLHttpRequest 作爲請求 和 響應的處理對象
3.ajax 的優點
異步請求
局部刷新
4.使用js 創建 XMLHttpRequest 或者ActiveObject("Microsoft.XMLHTTP")
function createXHR(){
var xhr = null;
// 如果瀏覽器支持 XMLHttpRequest
if(this.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//alert(xhr);
return xhr;
}
5.XMLHttpRequest 的API
function sender(){
// 準備發送Http 請求
var xhr = createXHR();
xhr.open(type,url,async);
type 請求的方式 string 類型 取值有 get post put delete
url 請求的路徑 string 類型 hello.do http://localhost:....
async 是否異步 boolean 類型 默認是 true
// 註冊數據處理函數
xhr.onreadystatechange = 數據處理函數;
xhr.onreadystatechange = function(){
// 獲取請求狀態 readyState http的狀態碼是 200
if(xhr.readySate == 4 && xhr.status == 200){
// 獲取服務器返回的數據
var text = xhr.responseText;
}
};
// 發送請求
xhr.send(null);
}
練習1
首先編寫一個servlet 可以返回 10000以內的隨機數。
然後寫一個 html 頁面 上面有一個點擊按鈕 按鈕上顯示發送ajax 請求 ,把ajax返回的數據
顯示html 頁面的一個span 標記上.
servlet代碼的書寫
@WebServlet("/randomVaule.do")
public class XdlRandomValueServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Random random = new Random();
int a = random.nextInt(10000);
PrintWriter pWriter = response.getWriter();
pWriter.write(""+a);
pWriter.close();
}
html代碼的書寫
<script type="text/javascript">
<!-- 使用js 創建 XMLHttpRequest -->
function createXHR(){
var xhr = null;
if (this.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveObject("Microsoft.XMLHTTP");
}
//alert(xhr);
return xhr;
}
</script>
<script type="text/javascript">
function sendAJAX() {
// 準備發送Http 請求
var xhr = createXHR();
xhr.open('post', 'randomVaule.do', true);
// 註冊數據處理函數
xhr.onreadystatechange=function(){
// 獲取請求狀態 readyState http的狀態碼是 200
if(xhr.readyState==4 && xhr.status==200){
// 獲取服務器返回的數據
var text = xhr.responseText;
//給網頁中標籤設置內容
document.getElementById("sp1").innerHTML=text;
}
};
//發送請求
xhr.send(null);
}
</script>
</head>
<body>
<span id="sp1"></span>
<input type="button" value="發送Ajax 請求" onclick="sendAJAX()">
</body>
練習2
首先編寫一個servlet 可以返回按照 yyyy-MM-dd hh:mm:ss 的系統日期字符串。
然後寫一個html頁面 上面有一個點擊按鈕，按鈕上顯示發送ajax請求，把Ajax返回的數據顯示到html頁面的一個span標籤上。
//創建一個名爲XdlDateServlet的servlet
@WebServlet("/date.do")
public class XdlDateServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
*/
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
Date date = new Date();
SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
String time = sf.format(date);
PrintWriter pWriter = response.getWriter();
pWriter.write(time);
pWriter.close();
}
}
// Html頁面的編寫
<script type="text/javascript">
function createXHR(){
var xhr = null;
if (this.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveObject("Microsoft.XMLHTTP");
}
//alert(xhr);
return xhr;
}
</script>
<script type="text/javascript">
function sendAJAX() {
// 準備發送Http 請求
var xhr = createXHR();
xhr.open('post', 'date.do', true);
// 註冊數據處理函數
xhr.onreadystatechange=function(){
// 獲取請求狀態 readyState http的狀態碼是 200
if(xhr.readyState==4 && xhr.status==200){
// 獲取服務器返回的數據
var text = xhr.responseText;
//給網頁中標籤設置內容
document.getElementById("sp2").innerHTML=text;
}
};
xhr.send(null);
}
</script>
</head>
<body>
<span id="sp2"></span>
<input type="button" value="ajax請求" onclick="sendAJAX()">
</body>