AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術.不通過重新整理頁面既可以與伺服器進行通訊。 1.XMLHttpRequest
1)open(“method”,”url”) 建立對伺服器的調用
2)send(content)向伺服器發送請求
3)onreadystatechange 每個狀態改變都會觸發這一事件，通常調用一個函數
4)readyState請求狀態：0-未初始化，1-正在載入，2-已經載入，3-互動中，4-完成
5)responseTest：伺服器響應
6)status:伺服器的Http狀態代碼 執行個體練習：
實現點擊姓名連結顯示連結到的常值內容到原頁面，不跳轉頁面。
huan.html內容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>姓名：馬小歡年齡：21學曆：大學本科</body></html>
ming.html內容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>姓名：小明年齡：22學曆：大學本科</body></html>
yun.html內容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>姓名：趙雲年齡：25學曆：研究生</body></html>1.用原生方法實現：index_1.jsp代碼：
<%-- Created by IntelliJ IDEA. User: pc Date: 17-4-21 Time: 下午12:10 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <script type='text/javascript' src='./js/jquery.min.js' charset='utf-8'></script> <title>Title</title> <script type="text/javascript"> $(function () { $("a").click(function () { var request = new XMLHttpRequest(); var method = "GET"; var url = this.href; request.open(method, url); request.send(null); request.onreadystatechange = function () { if (request.readyState === 4) { if (request.status === 200 || request.status === 304) { $(".html_").html(""); $(".html_").append(request.responseText); } } } return false; }); }); </script> <title>Title</title></head><body><h1>學生資訊：</h1><ul> <li><a href="./html_a/huan.html">馬小歡</a></li> <li><a href="./html_a/yun.html">趙雲</a></li> <li><a href="./html_a/ming.html">小明</a></li></ul><h1 class="html_"></h1></body></html>
結果：
2.load方法：
load(url,[data],[callback]) 將遠端HTML插入到DOM中
url:請求頁面的url地址
data:發送到key/value資料
callback:請求完成時的回呼函數 2.load方法實現：index_1.jsp代碼：
<%-- Created by IntelliJ IDEA. User: pc Date: 17-4-21 Time: 下午12:10 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <script type='text/javascript' src='./js/jquery.min.js' charset='utf-8'></script> <title>Title</title> <script type="text/javascript"> $(function () { $("a").click(function () { var url = this.href; var time ={"time":new Date()} $(".html_").load(url,time); return false; }); }); </script> <title>Title</title></head><body><h1>學生資訊：</h1><ul> <li><a href="./html_a/huan.html">馬小歡</a></li> <li><a href="./html_a/yun.html">趙雲</a></li> <li><a href="./html_a/ming.html">小明</a></li></ul><h1 class="html_"></h1></body></html>
2. .get .get .post方法：
2.get方法 .post方法 實現：index_1.jsp代碼：
<%-- Created by IntelliJ IDEA. User: pc Date: 17-4-21 Time: 下午12:10 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <script type='text/javascript' src='./js/jquery.min.js' charset='utf-8'></script> <title>Title</title> <script type="text/javascript"> $(function () { $("a").click(function () { var url = this.href; var time = {"time": new Date()} $.post(url, time, function (data) { var name = $(data).find("name").text(); var age = $(data).find("age").text(); var email = $(data).find("email").text(); $(".html_").html(""); $(".html_").append("<h2>姓名：" + name + "性別：" + age + "郵箱：" + email); }); return false; }); }); </script> <title>Title</title></head><body><h1>學生資訊：</h1><ul> <li><a href="./xml_ajax/huan.xml">馬小歡</a></li> <li><a href="./xml_ajax/yun.xml">趙雲</a></li> <li><a href="./xml_ajax/ming.xml">小明</a></li></ul><h1 class="html_"> </h1></body></html>
文章文集：JavaEE–學習筆記Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
