json,ajax技術
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技術~~
- AJAX核心技術
- 反向ajax技術
- 詳談基於JSON的高階AJAX開發技術JSON
- AJAX技術介紹
- JSON&AJAXJSON
- SpringMVC-09-Ajax技術SpringMVC
- ajax和json物件JSON物件
- ajax接受json響應JSON
- ajax解析json物件集合JSON物件
- Ajax&Json筆記JSON筆記
- Ajax技術的一些總結
- Ajax使用一+javascript解析Ajax返回的json字串JavaScriptJSON字串
- 技術分享:如何避免ajax重複請求?
- 利用AJAX技術提高搜尋引擎排名(轉)
- jQuery、ajax新增Json資料jQueryJSON
- Tab頁介面,用jQuery及Ajax技術實現jQuery
- springmvc ajax請求以及jsonSpringMVCJSON
- jQuery入門(五)Ajax和jsonjQueryJSON
- Javaweb——(day12)JSON和AjaxJavaWebJSON
- JQuery中ajax和JSON的獲取jQueryJSON
- jQuery的ajax和json使用例項jQueryJSON
- Ajax的技術核心實現動態無重新整理
- javaweb-ajax和json基礎知識JavaWebJSON
- ajax中該選json還是normal formJSONORM
- [專業術語]AJAX
- JavaScript Ajax與Comet——“其他跨域技術”的注意要點JavaScript跨域
- .net中ajax技術實現(自我總結,也許不對)
- AJAX技術可能會擴大安全方面的威脅(轉)
- javascript和php使用ajax通訊傳遞JSONJavaScriptPHPJSON
- 使用Ajax技術檢測使用者名稱是否被佔用
- J2EE Web開發使用Ajax技術的核心所在Web
- Flutter Json自動反序列化——json_serializable v1.5.1 | 掘金技術徵文FlutterJSON
- ajax為什麼需要json格式響應資料?JSON
- Ajax、JSON、響應式設計和Node.jsJSONNode.js
- Vue為何棄用經典的Ajax,選擇新技術Axios?VueiOS
- ASP.NET 2.0當中的Call back技術與ASP.NET AJAXASP.NET
- 甲骨文為推進AJAX和Java技術 廣開開源之門Java