『現學現忘』Docker基礎 — 9、Docker簡介
阿新 • • 發佈：2022-03-10
AJAX和JSON
JSON
1.什麼是JSON？
- 是一種輕量級的資料交換格式
- 輕量級是指跟xml比較
- 資料交換指的是客戶端和伺服器之間業務資料的傳遞格式
2.JSON在JavaScript中的使用（客戶端）
json的定義
-
json是由鍵值對組成，並且由花括號{}包圍，每個鍵由引號引起來，鍵和值之間用冒號分隔，多組鍵值之間用逗號分隔
<!--json定義--> var json={ "a":1, "b":2, "c":true, "d":"aaa", "e":[1,2], "f":{ //json裡嵌入json "a":1, "b":2, "c":"t" }, "g":[//數組裡嵌入多個json { "a":1,"b":2,"c":3 },{ "a":1,"b":2,"c":3 }] } </script>
json的訪問
是一個物件，跟訪問物件一樣
alert(typeof (json)) //object 物件
alert(json.e) //獲取陣列的全部值
alert(json.g[0].c) //獲取陣列中的一個json物件裡的值
alert(json.f.c) //獲取json物件裡的json物件裡的其中一個值
//遍歷陣列
var G=json.e
for (let i = 0; i <G.length; i++) {
console.log(G[i])
}
json常用的兩個方法
json有兩種存在方式：
-
物件的存在，json物件
一般要操作json物件的資料的話，要用json物件格式
-
字串形式的存在，json字串
一般要在服務端和客戶端進行資料交換的時候，就用json字串
JSON.stringify()
JSON.parse()
//JSON.stringify()，將json物件轉為字串，這個字串特別像java裡的toString格式
var a=JSON.stringify(json)
alert(a)
console.log(a)
//JSON.parse()，將json字串轉為物件
var b=JSON.parse(a)
alert(b)
3.JSON在java中的使用（服務端）
首先必須導包
谷歌的依賴 <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version>2.8.1</version> </dependency>
JSON和JavaBean的轉換
// JSON和JavaBean的轉換
@Test
public void test1(){
Person person = new Person(1,"劉超好帥");
// 建立Gson物件例項
Gson gson = new Gson();
// toJson()可以將java物件轉換為json字串
String s = gson.toJson(person);
System.out.println(s);
// 把json字串轉換為java物件
// 第一個引數是json字串
// 第二個引數是轉換回去的java物件
Person person1 = gson.fromJson(s, person.getClass());
person1.setId(2);
System.out.println(person1.getId());
}
JSON和List的轉換
建立一個類繼承ypeToken
//JSON和List的轉換
@Test
public void test2(){
List<Person> PersonList=new ArrayList<>();
PersonList.add(new Person(1,"很好"));
PersonList.add(new Person(2,"很吊"));
Gson gson = new Gson();
// 將list集合轉換成json字串
String s = gson.toJson(PersonList);
System.out.println(s);
// 第二個引數必須我們建立一個類繼承TypeToken（來著匯入的JSOn的jar包）， public class ListType extends TypeToken<ArrayList<Person>>
List list= gson.fromJson(s,new TypeToken<ArrayList<Person>>(){}.getType());
System.out.println(list.get(1));
}
JSON和Map轉換
替換掉建立一個類繼承ypeToken，改用使用匿名內部類的方式
//具體跟list轉換一樣
//JSON和Map轉換
@Test
public void test3(){
Map<Integer,String> map=new HashMap<>();
map.put(1,"我好帥");
map.put(2,"太帥了");
Gson g=new Gson();
String s = g.toJson(map);
System.out.println(s);
Map m= g.fromJson(s,new MapType().getType());
//那我們每轉換一種都要建立一個類繼承TypeToken太不方便，這裡我們可以使用匿名內部類的方式
Map m1= g.fromJson(s,new TypeToken<HashMap<Integer,String>>(){}.getType());
// System.out.println(m.get(1));
System.out.println(m1.get(1));
AJAX
1 什麼是AJAX：
Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。
ajax是一種瀏覽器通過js非同步發起請求，區域性更新頁面的技術，位址列不會發生改變，不會捨棄原來頁面的內容
-
非同步和同步：客戶端和服務端相互通訊的基礎上
- 客戶端必須等待服務端的響應，在等待的期間什麼都做不了
- 客戶端不需要等待服務端的請求，在服務端處理請求的時候，客戶端可以進行其他操作
Ajax是一種在無需重新載入整個網頁的情況下，能夠更新分網頁的技木。是
通過在後臺與伺服器進行少量資料交換，Aax可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網歷的某部分講行更新。
內容，必須過載整個網頁頁面。
2 實現：
2.1使用原生的AJAX請求
客戶端
<script type="text/javascript">
<!--在這裡使用js發起請求，訪問伺服器AjAXServlet的javasrciptAjAX方法-->
function ajaxRequest(){
// 1.建立XMLHttpRequest物件
var XMLrequest=new XMLHttpRequest();
// 2.呼叫open方法設定請求引數
XMLrequest.open("Post","http://localhost:8080/AjAXServelt?action=javasrciptAjAX",true)
// 3.在send方法前繫結onreadystatechange事件，處理請求後的操作
XMLrequest.onreadystatechange=function () {
if (XMLrequest.readyState==4 && XML request.status==200){
//使div為divid的標籤內容（HTML）為
document.getElementById("div01").innerHTML=XMLrequest.responseText
}
}
// 4.傳送請求給伺服器
XMLrequest.send()
}
</script>
服務端
protected void javasrciptAjAX(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("ajax請求過來了");
Person person = new Person(1, "劉超好帥");
// 轉化為json字串
Gson gson = new Gson();
String s = gson.toJson(person);
resp.getWriter().write(s);
}
2.2 Jquery實現AJAX
$.ajax方法
url 表示請求的地址
type 表示請求的型別GET 或POST請求
data 表示傳送給伺服器的資料
格式有兩種:
一: name=value&name=value
二:{key:value}
success 請求成功，響應的回撥函式
dataType 響應的資料型別
常用資料型別：text（純文字），xml，json物件
$.ajax({
url:"http://localhost:8080/AjAXServlet",
data: "action=jqueryAjAX",
type:"GET",
success:function (data) {
alert("伺服器返回的資料是：" + data);
// var jsonObj = JSON.parse(data);
$("#msg").html(" ajax 編號：" + data.id + " , 姓名：" + data.name);
},
// dataType : "text"
dataType : "json"
});
$.get()
$.post()
url:請求的url地址
data:傳送的資料
callback:載入成功的回撥函式
type:返回內容格式
比起$.ajax少了type，因為get，post方法就限制了請求的型別了
$("#getBtn").click(function () {
$.get( "http://localhost:8080/AjAXServlet", "action=jquerygetAjAX", function (data){
alert("get")
}, "json"
)
})
$("#postBtn").click(function () {
$.post({
url: "http://localhost:8080/AjAXServlet",
data: "action=jquerypostAjAX",
Callbacks:function (data){
alert("post")
},
type: "json"
})
})
$.getJSON()
url:請求的地址
data:傳送的資料
callback:成功的回撥函式
比起get，post少了type（響應的格式），這個方法限制只能返回json型別並且是get請求
document.getElementById("getJSONBtn").click(function () {
$.getJSON("http://localhost:8080/AjAXServlet","action=jquerypostAjAX",function (data){
alert("post")
})
表單序列化serialize（）
獲取表單的所有內容，並將它拼接成name=value&&password=value
$("#submit").click(function () {
$.getJSON("http://localhost:8080/AjAXServlet","action=jquerypostAjAX&"+$("#form01").serialize(),function (data){
alert("serialize")
})