尚矽谷視頻學校教程1
阿新 • • 發佈：2018-04-19
如果 一個 避免 gets 緩存 quest tco asc 圖片
1.+尚矽谷_佟剛_Ajax_概述.wmv
2.+尚矽谷_佟剛_Ajax_使用+XMLHttpRequest+實現+Ajax.wmv
XMLHttpRequest 對象提供了對 HTTP 協議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或異步地返回 Web 服務器的響應，並且能夠以文本或者一個 DOM 文檔的形式返回內容。
接下來我們來實現一個helloword心建立一個Java web動態工程
我們在webRoot目錄下一個hello.txt文件
文件的內容如下
hello ajax!!!
我們在index.jsp目錄下添加一個a標簽，點擊瀏覽器頁面中a標簽的時候采用ajax的方式訪問服務器段hello.txt文件，並將文件的值在alert中顯示出來
index.jsp內容如下
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <!-- 未采用jquery框架實現ajax --> <!-- --> <script type="text/javascript"> //頁面加載完成之後會調用 window.onload = function()函數 window.onload = function(){ //獲得a元素的第一個節點，添加click點擊事 //獲得a元素的第一個節點，添加click點擊事件 document.getElementsByTagName("a")[0].onclick = function(){ //2創建一個XMLHTTPrequest對象 var request = new XMLHttpRequest(); //請求的url，就是當前dom對象的href屬性 var url = this.href; //采用get的請求方式 var method= "GET"; //4調用對象的open方法 request.open(method, url); //5 調用send方法發送請求 request.send(null); //6 為對象添加響應函數 request.onreadystatechange = function(){ //判斷響應是否完成 if(request.readyState == 4){ //在判斷響應是否可用 if(request.status == 200 || request.status == 304){ //默認的返回值是問題類型，將返回的結果打印出來,這裏還可以返回json或者xml格式的數據 alert(request.responseText); } } } return false; } } </script> </head> <body> <!-- 添加一個a標簽，采用ajax的方式將讀取hello.txt的內容在對話框中顯示出來 --> <a href="${pageContext.request.contextPath }/hello.txt">顯示內容</a> </body> </html>
運行效果
點擊顯示內容的時候彈出對應的內容
很多時候為了避免瀏覽器的緩存，我們請求的時候都帶上一個時間戳，保證每次請求都不一樣
//請求的url，就是當前dom對象的href屬性
var url = this.href + "?time="+new Date();
上面是采用GET的方式請求，下面我們采用post的方式請求
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <!-- 未采用jquery框架實現ajax --> <!-- --> <script type="text/javascript"> //頁面加載完成之後會調用 window.onload = function()函數 window.onload = function(){ //獲得a元素的第一個節點，添加click點擊事 //獲得a元素的第一個節點，添加click點擊事件 document.getElementsByTagName("a")[0].onclick = function(){ //2創建一個XMLHTTPrequest對象 var request = new XMLHttpRequest(); //請求的url，就是當前dom對象的href屬性 var url = this.href + "?time="+new Date(); //采用get的請求方式 var method= "POST"; //4調用對象的open方法 request.open(method, url); //如果是post方式需要在send之前，open之後設置 request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //5 調用send方法發送請求 request.send(null); //6 為對象添加響應函數 request.onreadystatechange = function(){ //判斷響應是否完成 if(request.readyState == 4){ //在判斷響應是否可用 if(request.status == 200 || request.status == 304){ //默認的返回值是問題類型，將返回的結果打印出來,這裏還可以返回json或者xml格式的數據 alert(request.responseText); } } } return false; } } </script> </head> <body> <!-- 添加一個a標簽，采用ajax的方式將讀取hello.txt的內容在對話框中顯示出來 --> <a href="${pageContext.request.contextPath }/hello.txt">顯示內容</a> </body> </html>
如果post需要傳遞參數要在send函數中封裝
3.+尚矽谷_佟剛_Ajax_數據格式_HTML.wmv
對於返回值是html格式的數據，我們可以直接使用innerHTML標簽進行操作
我們來看下面這樣的案例
我們在index.sjp頁面上新增一個div標簽，我們將讀取的hello.txt值直接賦值在div節點的後面
<div id="detail"></div>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <!-- 未采用jquery框架實現ajax --> <!-- --> <script type="text/javascript"> //頁面加載完成之後會調用 window.onload = function()函數 window.onload = function(){ //獲得a元素的第一個節點，添加click點擊事 //獲得a元素的第一個節點，添加click點擊事件 document.getElementsByTagName("a")[0].onclick = function(){ //2創建一個XMLHTTPrequest對象 var request = new XMLHttpRequest(); //請求的url，就是當前dom對象的href屬性 var url = this.href + "?time="+new Date(); //采用get的請求方式 var method= "POST"; //4調用對象的open方法 request.open(method, url); //如果是post方式需要在send之前，open之後設置 request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //5 調用send方法發送請求 request.send(null); //6 為對象添加響應函數 request.onreadystatechange = function(){ //判斷響應是否完成 if(request.readyState == 4){ //在判斷響應是否可用 if(request.status == 200 || request.status == 304){ //默認的返回值是問題類型，將返回的結果打印出來,這裏還可以返回json或者xml格式的數據 //將返回值賦值給id為dedtail的節點 document.getElementById("detail").innerHTML=request.responseText; } } } return false; } } </script> </head> <body> <!-- 添加一個a標簽，采用ajax的方式將讀取hello.txt的內容在對話框中顯示出來 --> <a href="${pageContext.request.contextPath }/hello.txt">顯示內容</a> <div id="detail"></div> </body> </html>
運行的效果為
尚矽谷視頻學校教程1