json，ajax技術

愛喝coffee的人發表於2020-12-29

JSON和AJAX

內容

1、JSON解析
2、什麼是Ajax
3、Ajax工作原理
4、Ajax的使用
5、Ajax的綜合練習

目標

1、掌握JSON解析
2、熟悉什麼是Ajax
3、掌握Ajax工作原理
4、掌握Ajax的使用
5、熟練Ajax的綜合練習

第一節 JSON概述

1.1 什麼是json

JSON(JavaScript Object Notation, JS 物件表示) 是一種輕量級的資料交換格式。它基於 ECMAScript (w3c制定的js規範)的一個子集，採用完全獨立於程式語言的文字格式來儲存和表示資料。簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言。易於機器解析和生成，並有效地提升網路傳輸效率。

1.2 json語法

[] 表示陣列

{} 表示物件

“” 表示是屬性名或字串型別的值

表示屬性和值之間的分隔符

, 表示多個屬性的間隔符或者是多個元素的間隔符

json的值：

數字（整數或浮點數）
字串（在雙引號或單引號中）
邏輯值（true 或 false）
陣列（在中括號中）
物件（在大括號中）
null

例項演示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>json語法</title>
</head>
<body>
	<script type="text/javascript">
		//表示物件
		var  p=new Object();
		p.name="haha";
		p.age=20;
		p.address="beijing";
		console.log(p.name+"..."+p.age+"...."+p.address);
		
		var p1={"name":"李四","age":30,"address":"上海"};
		console.log(p1.name+"..."+p1.age+"...."+p1.address);
		
		var json='{"name":"李四","age":30,"address":"杭州"}';//json字串
		
		var p2=JSON.parse(json);
		console.log(p2.name+"..."+p2.age+"...."+p2.address);
		
		//要實現從物件轉換為 JSON 字串，使用 JSON.stringify() 方法：
		//var json = JSON.stringify({a: 'Hello', b: 'World'}); //結果是 '{"a": "Hello", "b": "World"}'
		//要實現從 JSON 轉換為物件，使用 JSON.parse() 方法：
		//var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //結果是 {a: 'Hello', b: 'World'}

		//表示陣列
		
		var arr=["北京","上海","南京"];
		var arr2=[{name:"xxx",age:20},{name:"yyy",age:22},{name:"zzz",age:30}];
			
	</script>
</body>
</html>

第二節 JSON解析

要解析的字串：

//物件巢狀陣列巢狀物件
String json1="{'id':1,'name':'JAVAEE-1910','stus':[{'id':101,'name':'劉一','age':16}]}";
//陣列
String json2="['北京','天津','杭州']";

初始的類：

Student.java

public class Student {

    private int id;
    private String name;
    private int age;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
    public Student(int id, String name, int age) {
        super();
        this.id = id;
        this.name = name;
        this.age = age;
    }
    public Student() {
        super();
    }
    @Override
    public String toString() {
        return "Student [id=" + id + ", name=" + name + ", age=" + age + "]";
    }
}

Grade.java

public class Grade {

    private int id;
    private String name;
    private ArrayList<Student> stus;
    public Grade(int id, String name, ArrayList<Student> stus) {
        super();
        this.id = id;
        this.name = name;
        this.stus = stus;
    }
    public Grade() {
        super();
    }
    @Override
    public String toString() {
        return "Grade [id=" + id + ", name=" + name + ", stus=" + stus + "]";
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public ArrayList<Student> getStus() {
        return stus;
    }
    public void setStus(ArrayList<Student> stus) {
        this.stus = stus;
    }
}

2.1 FastJson解析

public class FASTJson {

    //解析
    @Test
    public void test1() {
        // 物件巢狀陣列巢狀物件
        String json1 = "{'id':1,'name':'JAVAEE-1703','stus':[{'id':101,'name':'劉銘','age':16}]}";
        // 陣列
        String json2 = "['北京','天津','杭州']";
        //1、
        //靜態方法轉成物件
        Grade grade=JSON.parseObject(json1, Grade.class);
        System.out.println(grade);
        //轉成陣列
        List<String> list=JSON.parseArray(json2, String.class);
        System.out.println(list);
    }
    //生成
    @Test
    public void test2(){
        ArrayList<Student> list=new ArrayList<>();
        for(int i=1;i<3;i++){
            list.add(new Student(101+i, "碼子", 20+i));
        }
        Grade grade=new Grade(100001,"張三", list);
        String json=JSON.toJSONString(grade);
        System.out.println(json);
    }
}

//注意事項
	//1.1控制不序列化某些屬性  @JSONField(serialize=false)  預設是true
	//1.2控制輸出  
		// SerializerFeature.PrettyFormat
		// SerializerFeature.WriteMapNullValue  null也輸出
		// SerializerFeature.WriteNullStringAsEmpty   null輸出""
		// 迴圈引用檢測 SerializerFeature.DisableCircularReferenceDetect

2.2 Jackson解析


import com.fasterxml.jackson.core.type.TypeReference;
public class JackSonTest {

    //解析
    @Test
    public void test1() throws Exception{
        // 物件巢狀陣列巢狀物件
        String json1 = "{\"id\":1,\"name\":\"JAVAEE-1703\",\"stus\":[{\"id\":101,\"name\":\"劉一\",\"age\":16}]}";
        // 陣列
        String json2 = "[\"北京\",\"天津\",\"杭州\"]";
        //1、建立物件對映
        ObjectMapper mapper=new ObjectMapper();
        Grade grade=mapper.readValue(json1, Grade.class);
        System.out.println(grade);
        //2、
        ArrayList<String> list=mapper.readValue(json2, 
                new TypeReference<ArrayList<String>>() {
        });
        System.out.println(list);

    }
    //生成
    @Test
    public void test2() throws JsonProcessingException{
        ArrayList<Student> list=new ArrayList<>();
        for(int i=1;i<3;i++){
            list.add(new Student(101+i, "碼子", 20+i));
        }
        Grade grade=new Grade(100001,"張三", list);
        ObjectMapper mapper=new ObjectMapper();
        //將物件轉換為JSON格式字串
        String json=mapper.writeValueAsString(grade);
        System.out.	println(json);
    }
}
//Jackson註解
//1 @JsonProperty註解指定一個屬性用於JSON對映，預設情況下對映的JSON屬性與註解的屬性名稱相同，不過可以使用該註解的value值修改JSON屬性名
//2 @JsonIgnore註解用於排除某個屬性，這樣該屬性就不會被Jackson序列化和反序列化。
//3 格式化輸出
// 美化輸出
//mapper.enable(SerializationFeature.INDENT_OUTPUT);
// 允許序列化空的POJO類（否則會丟擲異常）
//mapper.disable(SerializationFeature.FAIL_ON_EMPTY_BEANS);

第三節 Ajax概述

AJAX 是一種在無需重新載入整個網頁的情況下，能夠實現區域性更新的技術。

3.1 什麼是AJAX

AJAX = 非同步 JavaScript 和 XML。 (Asynchronized JavaScript And XML)

AJAX 是一種用於建立快速動態網頁的技術。

通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）如果需要更新內容，必需過載整個頁面。

有很多使用 AJAX 的應用程式案例：新浪微博、Google 地圖、開心網等等。

3.2 AJAX工作原理

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-Joh3GSr0-1609250051251)(img\img1.png)]

AJAX是基於現有的Internet標準，並且聯合使用它們：

XMLHttpRequest 物件 (非同步的與伺服器交換資料)
JavaScript/DOM (資訊顯示/互動)
CSS (給資料定義樣式)
XML (作為轉換資料的格式)、JSON

3.3 AJAX例項

使用Ajax傳送請求四個步驟:

1 建立XMLHTTPRequest物件

2 設定onreadystatechange回撥函式

3 open() 開啟連線

4 send() 傳送請求

div 部分用於顯示來自伺服器的資訊。當按鈕被點選時，它負責呼叫名為 loadXMLDoc() 的函式：

<!DOCTYPE html>
<html>
<head>
  <title>ajax例項</title>
  <meta charset="utf-8"/>
  <script type="text/javascript">
	function loadXMLDoc()
	{
   //1 建立XMLHTTPRequest物件
			var xhr;
			if(window.XMLHttpRequest){
				xhr=new XMLHttpRequest();
			}else{
				//ie
				xhr=new ActiveXObject("Microsoft.XMLHTTP");
			}

			//2 設定onreadystatechange回撥函式(非同步，如果同步不需要)
			xhr.onreadystatechange=function(){
				//處理資料  readyState==4表示伺服器響應完畢    狀態碼 200  404  500  302
				if(xhr.readyState==4&&xhr.status==200){
					document.getElementById("mydiv").innerHTML=xhr.responseText;
				}
			}

			//3 open() 開啟連線  method(GET POST)  url(表示請求的地址)  async（同步或非同步  true非同步，false同步）
			xhr.open("GET","book.xml",true);

			//4 send() 傳送請求 
			xhr.send();

	}
</script>
</head>
<body>
  	<div id="myDiv"><h2>使用 AJAX 修改該文字內容</h2></div>
    <button type="button" onclick="loadXMLDoc()">修改內容</button>
</body>
</html>

book.xml

<?xml version="1.0" encoding="UTF-8" ?>
<books>
    <book>
        <id>1101</id>
        <bookname>java開發</bookname>
        <author>徐廉政</author>
        <price>99</price>
    </book>
    <book>
        <id>1102</id>
        <bookname>HTML開發</bookname>
        <author>張健</author>
        <price>100</price>
    </book>
</books>

3.4 建立XMLHttpRequest物件

XMLHttpRequest物件是AJAX的基礎。
所有現代瀏覽器均支援 XMLHttpRequest 物件（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用於在後臺與伺服器互動資料。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 物件。建立 XMLHttpRequest 物件的語法：

var xmlhttp=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 物件：

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支援 XMLHttpRequest 物件。如果支援，則建立 XMLHttpRequest 物件。如果不支援，則建立 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 瀏覽器執行程式碼
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

3.5 onreadystatechange回撥函式

當請求被髮送到伺服器時，我們需要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態資訊。
下面是 XMLHttpRequest 物件的三個重要的屬性：

屬性	描述
onreadystatechange	儲存函式（或函式名），每當 readyState 屬性改變時，就會呼叫該函式。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。0: 請求未初始化1: 伺服器連線已建立2: 請求已接收3: 請求處理中4: 請求已完成，且響應已就緒
status	200: "OK"404: 未找到頁面

在 onreadystatechange 事件中，我們規定當伺服器響應已做好被處理的準備時所執行的任務。

當 readyState 等於 4 且狀態為 200 時，表示響應已就緒：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

注意： onreadystatechange 事件被觸發 4 次，五個狀態（0 - 4），對應著 readyState 的每個變化。

3.5 XMLHttpRequest請求

如需將請求傳送到伺服器，我們使用 XMLHttpRequest 物件的 open() 和 send() 方法：

xmlhttp.open("GET","servlet1",true);
xmlhttp.send();

方法	描述
open(method,url,async)	規定請求的型別、URL 以及是否非同步處理請求。method：請求的型別；GET 或 POSTurl：檔案在伺服器上的位置async：true（非同步）或 false（同步）
send(string)	將請求傳送到伺服器。string：僅用於 POST 請求

method-請求方式

GET 還是 POST？

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

不使用快取檔案（更新伺服器上的檔案或資料庫）
向伺服器傳送大量資料（POST 沒有資料量限制）
傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠

GET 請求

一個簡單的 GET 請求：

xmlhttp.open("GET","/try/ajax/servlet3",true);
xmlhttp.send();

在上面的例子中，您可能得到的是快取的結果。

為了避免這種情況，請向 URL 新增一個唯一的 ID：

xmlhttp.open("GET","/try/ajax/servlet3?number=" + Math.random(),true);
xmlhttp.send();

如果您希望通過 GET 方法傳送資訊，請向 URL 新增資訊：

xmlhttp.open("GET","/try/ajax/servlet3?username=leilei&password=123",true);
xmlhttp.send();

POST 請求

一個簡單 POST 請求：

xmlhttp.open("POST","/try/ajax/servlet4",true);
xmlhttp.send();

如果需要像 HTML 表單那樣 POST 資料，請使用 setRequestHeader() 來新增 HTTP 頭。然後在 send() 方法中規定您希望傳送的資料：

xmlhttp.open("POST","/try/ajax/servlet4",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("username=leilei&password=123");

方法	描述
setRequestHeader(header,value)	向請求新增 HTTP 頭。header: 規定頭的名稱 value: 規定頭的值

url - 伺服器地址

open() 方法的 url 引數是伺服器上資源的地址：

xmlhttp.open("GET","servlet5",true);

非同步 - True 或 False

AJAX 指的是非同步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 物件如果要用於 AJAX 的話，其 open() 方法的 async 引數必須設定為 true：

xmlhttp.open("GET","ajax_test.html",true);

對於 web 開發人員來說，傳送非同步請求是一個巨大的進步。很多在伺服器執行的任務都相當費時。AJAX 出現之前，這可能會引起應用程式掛起或停止。

通過 AJAX，JavaScript 無需等待伺服器的響應，而是：

在等待伺服器響應時執行其他指令碼
當響應就緒後對響應進行處理

Async=true

當使用 async=true 時，請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函式：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

Async=false

如需使用 async=false，請將 open() 方法中的第三個引數改為 false：

我們不推薦使用 async=false，但是對於一些小型的請求，也是可以的。

請記住，JavaScript 會等到伺服器響應就緒才繼續執行。如果伺服器繁忙或緩慢，應用程式會掛起或停止。

**注意：**當您使用 async=false 時，請不要編寫 onreadystatechange 函式 - 把程式碼放到 send() 語句後面即可：

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

3.6 XMLHttpRequest響應

伺服器響應

如需獲得來自伺服器的響應，請使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性。

屬性	描述
responseText	獲得字串形式的響應資料。
responseXML	獲得 XML 形式的響應資料。

responseText 屬性

如果來自伺服器的響應並非 XML，請使用 responseText 屬性。

responseText 屬性返回字串形式的響應，因此您可以這樣使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 屬性

如果來自伺服器的響應是 XML，而且需要作為 XML 物件進行解析，請使用 responseXML 屬性：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

第四節 Ajax的使用

4.1 Ajax與伺服器互動

模擬登陸驗證

驗證使用者是否可以註冊!利用ajax技術進行動態驗證

1.編寫註冊頁面

<%@ 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>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="./ajax.js"></script>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  
  <body>
   		<center>
   			 <font color="red" size="7">qq註冊頁面</font>
   			 <input type="text" name="username" onkeyup="kp(this)" /> <span id="sp"></span> <br/>	 
   			 <input type="password" name="password"/><br/>
   			 <input type="submit" value="註冊"/>
   		</center>
   		<script type="text/javascript">
   			
   			//當使用者名稱輸入框輸入內容就呼叫此方法
   			function kp(ipt){
   			 
   			 //1.獲取input輸入框的value
   			   var value = ipt.value;
   			 //2.進行驗證
   			   if(value != null && value !=""){
   			       	//1-5
   			       	//1.建立Ajax
   			       	var xmlhttp = getAjax();
   			       	
   			       	//2.設定狀態改變監聽
   			       	xmlhttp.onreadystatechange = function(){
   			       		
   			       		//5獲取響應資料
   			       		if(xmlhttp.readyState == 4 && xmlhttp.status ==200)
   			       		{
   			       			
   			       			var result = xmlhttp.responseText; //獲取結果
   			       			
   			       			//  1 行    2 不行
   			       			
   			       			//1.找到span標籤
   			       			
   			       			var sp = document.getElementById("sp");
   			       			
   			       			if(result == "1"){
   			       				//成功的 span 提示一句綠色的話		
   			       				sp.innerHTML=""; //清空
   			       			 	var ft = document.createElement("font");
   			       				var fttext = document.createTextNode("恭喜您!可以註冊!!"); //文字標籤
   			       				ft.setAttribute("color", "green");
   			       				ft.appendChild(fttext);
   			       				sp.appendChild(ft);  
   			       			}else{
   			       				//失敗的 span 提示一句紅色的話
   			       				sp.innerText="使用者已經被註冊!";
   			       				sp.style.color = "red";
   			       			}
   			       		}
   			       	
   			       	}
   			       	
   			       	//3.設定ajax method  url
   			       	xmlhttp.open("POST",
   			       	 "${pageContext.request.contextPath}/servlet/DealServlet");
   			         
   			        //4.傳送請求
   			        //設定一個請求頭
   			        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   			        xmlhttp.send("value="+value);
   			   
   			   }	
   			}
   		</script>
  </body>
</html>

4.2 編寫Ajax處理servlet

public class DealServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//0.設定編碼格式
		request.setCharacterEncoding("UTF-8");
	    response.setContentType("text/html;charset=UTF-8");
		//1.
	    String value = request.getParameter("value");
		//2.
	    String  result = null;
	    if (value.equals("root") | value.equals("admin")) {
		   result = "2";
		   //代表已經存在
		}else{
			//可以註冊
			result = "1";
		}
		//3.
		response.getWriter().write(result);   
    }	
}

Ajax技術~~
2020-12-16
詳談基於JSON的高階AJAX開發技術
2014-03-25
JSON
AJAX核心技術
2020-11-11
反向ajax技術
2012-06-19
AJAX技術介紹
2010-04-13
JSON&AJAX
2020-11-14
JSON
SpringMVC-09-Ajax技術
2020-09-14
SpringMVC
ajax和json物件
2016-09-11
JSON物件
ajax接受json響應
2020-04-04
JSON
ajax解析json物件集合
2022-04-01
JSON物件
Ajax技術的一些總結
2019-03-18
Ajax使用一+javascript解析Ajax返回的json字串
2016-07-14
JavaScriptJSON字串
jQuery、ajax新增Json資料
2018-10-25
jQueryJSON
技術分享：如何避免ajax重複請求？
2021-03-30
利用AJAX技術提高搜尋引擎排名（轉）
2007-07-28
Tab頁介面，用jQuery及Ajax技術實現
2017-11-16
jQuery
springmvc ajax請求以及json
2016-08-26
SpringMVCJSON
Javaweb——(day12)JSON和Ajax
2020-11-28
JavaWebJSON
JQuery中ajax和JSON的獲取
2017-02-04
jQueryJSON
jQuery的ajax和json使用例項
2017-02-02
jQueryJSON
Ajax的技術核心實現動態無重新整理
2014-04-08
javaweb-ajax和json基礎知識
2020-11-07
JavaWebJSON
ajax中該選json還是normal form
2016-08-22
JSONORM
[專業術語]AJAX
2019-05-11
JavaScript Ajax與Comet——“其他跨域技術”的注意要點
2016-02-26
JavaScript跨域
.net中ajax技術實現(自我總結,也許不對)
2009-07-14
AJAX技術可能會擴大安全方面的威脅(轉)
2007-08-15
javascript和php使用ajax通訊傳遞JSON
2015-06-26
JavaScriptPHPJSON
Flutter Json自動反序列化——json_serializable v1.5.1 | 掘金技術徵文
2018-07-30
FlutterJSON
使用Ajax技術檢測使用者名稱是否被佔用
2019-12-01
J2EE Web開發使用Ajax技術的核心所在
2009-04-12
Web
ajax為什麼需要json格式響應資料？
2020-10-23
JSON
Ajax、JSON、響應式設計和Node.js
2024-03-23
JSONNode.js
Vue為何棄用經典的Ajax，選擇新技術Axios？
2022-03-01
VueiOS
ASP.NET 2.0當中的Call back技術與ASP.NET AJAX
2008-01-03
ASP.NET
甲骨文為推進AJAX和Java技術廣開開源之門
2007-08-25
Java
ajax與json通過程式碼的簡單應用
2018-08-31
JSON
vue3.0 載入json的“另類”方法（非ajax）
2020-09-07
VueJSON