GET請求
index
<%@ 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>Insert title here</title> <script type="text/javascript"> window.onload = function() { //1.獲取a節點並對其添加onclick響應函數 document.getElementsByTagName("a")[0].onclick = function() { //3.創建一個XMLHttpRequest對象 var request = new XMLHttpRequest(); //4.准備發送請求的數據：url var url = this.href + "?time=" + new Date();//不同的時間戳，來達到禁用緩存的目的 var method = "GET"; //5.調用XMLHttpRequest 對象的open方法 request.open(method, url); //6.調用XMLHttpRequest 對象的send方法 request.send(null); //7.為XMLHttpRequest 對象添加onreadystatechange 響應函數 request.onreadystatechange = function() { //alert(request.readyState); //8.判斷響應是否完成：XMLHttpRequest 對象的readyState 屬性值為4的時候 if (request.readyState == 4) { //9.在判斷響應是否可用：XMLHttpRequest 對象status 屬性值為200 if (request.status == 200 || request.status == 304) { //10.打印響應結果： responseText alert(request.responseText); } } } //2.取消 a節點的默認行為 return false; } } </script> </head> <body> <a href="helloAjax.txt">HelloAjax</a> </body> </html>
post請求
index2
<%@ 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>Insert title here</title> <script type="text/javascript"> window.onload = function() { //1.獲取a節點並對其添加onclick響應函數 document.getElementsByTagName("a")[0].onclick = function() { //3.創建一個XMLHttpRequest對象 var request = new XMLHttpRequest(); //4.准備發送請求的數據：url var url = this.href + "?time=" + new Date();//不同的時間戳，來達到禁用緩存的目的 var method = "POST"; //5.調用XMLHttpRequest 對象的open方法 request.open(method, url); request.setRequestHeader("ContentType", "application/x-www-form-urlencode");//符合的編碼格式 //6.調用XMLHttpRequest 對象的send方法 request.send("name = 'colin'"); //7.為XMLHttpRequest 對象添加onreadystatechange 響應函數 request.onreadystatechange = function() { //alert(request.readyState); //8.判斷響應是否完成：XMLHttpRequest 對象的readyState 屬性值為4的時候 if (request.readyState == 4) { //9.在判斷響應是否可用：XMLHttpRequest 對象status 屬性值為200 if (request.status == 200 || request.status == 304) { //10.打印響應結果： responseText alert(request.responseText); } } } //2.取消 a節點的默認行為 return false; } } </script> </head> <body> <a href="helloAjax.txt">HelloAjax</a> </body> </html>
數據格式JSON
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /* 數據放在一對大括號里 ，是鍵值對的集合，用冒號賦值 多個鍵值對使用逗號分隔，值本身還可以是json對象，也可以是方法(存儲函數) 對象描述中的數據可以是字符串，數字或者布爾值。 */ var jsonObject = { "name" : "hemiao", "age" : 22, "address" : { "city" : "Anhui", "school" : "anshida" }, "teaching" : function() { alert("java+ssm ..."); } }; // alert(jsonObject.name); // alert(jsonObject.address.city) // jsonObject.teaching() var jsonStr = "{'name':'文靜'}"; // 把一個字符串轉為json對象 // alert(jsonStr.name); // 使用eval()方法, 可以把一個字符串轉為本地的js代碼來執行 var testStr = "alert('hello eval')"; eval(testStr); //把json字符串轉為JSON對象 var json = eval("(" + jsonStr + ")");//需要加括號才可以的 alert(json.name) </script> </head> <body> </body> </html>