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: 請求已完成,且響應已就緒
status200: "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);   
    }	
}

相關文章