Ajax!從入門到入土

• • • Ajax
    • 1、JSON
    • • 1.1 什么是JSON
      • 1.2 JSON語法
    • 2、JSON的解析
    • • 2.1 Java中解析JSON
      • • 2.1.1 FastJSON解析
        • 2.1.2 Jackson
      • 2.2 JavaScript中解析JSON
    • 3、Ajax的基本使用
    • • 3.1 什么是Ajax
      • 3.2 Ajax的工作原理
      • 3.3 Ajax的過程
    • 4、結合JavaWeb使用Ajax

Ajax

BOM：window/screen/location/history/

Asynchronous Javascript And XML （異步的JavaScript和XML）

表單提交：存在“整個頁面刷新”過程

Ajax:可以實現“局部刷新”

1、JSON

1.1 什么是JSON

JSON(JavaScript Object Notation)是一種輕量級的數據交互格式。它基于ECMAScript(W3C指定的JS規范)的一個子集，采用完成獨立的格式，不依賴與任何編程語言。

1.2 JSON語法

• [] 表示數組
• {} 表示對象
• “” 屬性名或字符類型的值
• : 屬性名和值之間的一個分隔符
• , 多個屬性之間的一個分隔符

一個JSON對象

{"id":"1001", "name": "張三豐", "gender":"男"}

JSON數組

[{"id":1001, "name": "張三豐", "gender":"男"},{"id":1002, "name": "張非", "gender":"男"}]

2、JSON的解析

將JSON轉換成需要的數據格式的過程

2.1 Java中解析JSON

將一個字符串格式的JOSN轉換成對象

String json = "{\"id\":1001, \"name\": \"張三豐\", \"gender\":\"男\"}";class Student{private Integer id;private String name;private String gender; }Student student = ?student->JSON 將對象轉換成jsonjson -> student 將json轉成java對象

2.1.1 FastJSON解析

• FastJSON是一個Java庫，可以將Java對象轉換成JSON格式，當然也可以將一個JSON字符串轉換成Java對象。
• 提供了toJSONString()和parseObject()方法來將Java對象與JSON相互轉換
  • toJSONString()：將Java對象轉換JSON格式字符串
  • parseObject():將JSON格式字符串轉換成Java對象

toJSONString():將Java對象轉換成JSON格式字符串

添加依賴

<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.54</version> </dependency> @Data public class Employee {private Integer id;private String name;//在FastJson中處理日期格式的@JSONField(format = "yyyy-MM-dd HH:mm:ss")private Date hireDate;private String gender;private Double salary; } public class FastJSONDemo {public static void main(String[] args) {Employee emp = new Employee();emp.setId(1001);emp.setName("張大炮");emp.setHireDate(new Date());emp.setSalary(2000);emp.setGender("女");//{"id":1001, "name":"張大炮", "hireDate":"2020-7-9","salary": 2000, "gender":"女"}String json = JSON.toJSONString(emp);System.out.println(json);List<Employee> list = new ArrayList<>();list.add(new Employee(1002, "張小炮", 1000, new Date(), "女"));list.add(new Employee(1003, "張中炮", 3000, new Date(), "男"));list.add(new Employee(1004, "張偉炮", 5000, new Date(), "女"));String json2 = JSON.toJSONString(list);System.out.println(json2);} }

parseObject()將字符串解析成對象

public class FastJSONDemo {public static void main(String[] args) {String json = "{\"gender\":\"女\",\"hireDate\":1594276557421,\"id\":1001,\"name\":\"張大炮\",\"salary\":2000}";Employee employee = JSON.parseObject(json, Employee.class);System.out.println(employee);String json2 = "[\"上海\",\"重慶\",\"天津\",\"北京\"]";List<String> list = JSON.parseArray(json2, String.class);System.out.println(list);String json3 = "[{\"gender\":\"女\",\"hireDate\":1594276557616,\"id\":1002,\"name\":\"張小炮\",\"salary\":1000},{\"gender\":\"男\",\"hireDate\":1594276557616,\"id\":1003,\"name\":\"張中炮\",\"salary\":3000},{\"gender\":\"女\",\"hireDate\":1594276557616,\"id\":1004,\"name\":\"張偉炮\",\"salary\":5000}]";List<Employee> list3 = JSON.parseArray(json3, Employee.class);System.out.println(list3);} }

2.1.2 Jackson

• Jackson是一個能夠將Java對象轉換成JSON字符串，也能夠將JSON字符串解析成Java對象
• readValue和writeValue實現的

通過writeValueAsString()將對象轉換成JSON字符串

<dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.11.3</version> </dependency> public class JacksonDemo {public static void main(String[] args) {Employee emp = new Employee();emp.setId(1001);emp.setName("張大炮");emp.setHireDate(new Date());emp.setSalary(2000);emp.setGender("女");ObjectMapper objectMapper = new ObjectMapper();try {String json = objectMapper.writeValueAsString(emp);System.out.println(json);} catch (JsonProcessingException e) {e.printStackTrace();}List<Employee> list = new ArrayList<>();list.add(new Employee(1002, "張小炮", 1000, new Date(), "女"));list.add(new Employee(1003, "張中炮", 3000, new Date(), "男"));list.add(new Employee(1004, "張偉炮", 5000, new Date(), "女"));try {String json2 = objectMapper.writeValueAsString(list);System.out.println(json2);} catch (JsonProcessingException e) {e.printStackTrace();}} }

將字符串解析成Java對象

public class JacksonDemo {public static void main(String[] args) throws IOException {String json = "{\"gender\":\"女\",\"hireDate\":1594276557421,\"id\":1001,\"name\":\"張大炮\",\"salary\":2000}";ObjectMapper objectMapper = new ObjectMapper();Employee employee = objectMapper.readValue(json, Employee.class);System.out.println(employee);String json2 = "[\"上海\",\"重慶\",\"天津\",\"北京\"]";List<String> list = objectMapper.readValue(json2, new TypeReference<List<String>>() {});System.out.println(list);String json3 = "[{\"gender\":\"女\",\"hireDate\":1594276557616,\"id\":1002,\"name\":\"張小炮\",\"salary\":1000},{\"gender\":\"男\",\"hireDate\":1594276557616,\"id\":1003,\"name\":\"張中炮\",\"salary\":3000},{\"gender\":\"女\",\"hireDate\":1594276557616,\"id\":1004,\"name\":\"張偉炮\",\"salary\":5000}]";List<Employee> list3 = objectMapper.readValue(json3, new TypeReference<List<Employee>>(){});System.out.println(list3);} }

2.2 JavaScript中解析JSON

• 字符串轉換JSON:JSON.parse()

var json="{\"gender\":\"女\",\"hireDate\":1594276557421,\"id\":1001,\"name\":\"張大炮\",\"salary\":2000}"; var jsonObj = JSON.parse(json); alert(jsonObj.name);

• JSON對象轉換成字符串：JSON.stringify();

var jsonObj2 = {"id":1001,"name":"張二炮", "age":20}; //alert(typeof jsonObj2); var jsonStr = JSON.stringify(jsonObj2); alert(jsonStr);

總結：

• 后端
  • fastjson:
    • json-》object JSON.parseObject
    • object->json JSON.toJsonString()
  • jackson
    • json->object objectMapper.readValue
    • object->json objectMapper.writerValueAsString()
• 前端
  • json-》object JSON.parse()
  • object-》json JSON.stringify()

3、Ajax的基本使用

3.1 什么是Ajax

• Ajax是一種無須重新加載整個頁面的情況下，實現更新部分網頁數據的技術。
• Ajax = Asynchronous Javascript And XML異步JavaScript andXML
• 可以實現部分數據與服務器進行交互
• 傳統的方式必須提交頁面（銷毀），獲取響應結果后重新加載整個頁面。而AJAX可以實現局部數據的提交，不需要銷毀整個頁面，所有體驗更好！

3.2 Ajax的工作原理

• ajax發送請求和接收的請求過程也是符合WEB規范
• XMLHttpRequest對象（異步對象，是與服務器進行交互的對象）
• JavaScript中的DOM實現處理結果和更新數據
• XML(數據的交互格式)\JSON

3.3 Ajax的過程

案例：判斷一個用戶名是否可用！

1、創建XMLHttpRequest對象

var req= null; if(window.XMLHttpRequest){//IE7+ F...req = new XMLHttpRequest(); }else{//IE5,IE6req = new ActiveXObject("Microsoft.XMLHTTP"); } alert(req);

MIME：文件格式

2、設置發送方式

xmlhttp.open(請求方式, 服務器接收的地址， true) - 請求方式， GET POST - 服務器接收的地址： 接收請求并進行相關業務處理 - boolean: true表示異步操作， false同步操作//發送GET方式 xmlhttp.open("GET", "http://xxxx/xxxx/xxx", true) //發送GET方式，并傳遞參數 xmlhttp.open("GET", "http://xxxx/xxxx/xxx?username=admin&age=20", true)//發送POST方式 xmlhttp.open("POST","http://xxxx/xxxx/xxx", true) xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//設置HTTP的頭信息，表示當前是以表單的方式發送請求到服務器

3、定義回調結果

xmlhttp.onreadystatechange=回調方法xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4 && xmlhttp.status == 200){//服務器端執行成功了} }

readyState:表示ajax的狀態碼：從0到4的過程

• 0：請求未初始化
• 1：已建立連接
• 2：請求已接收
• 3：請求中
• 4：請求已完成

status：http響應的狀態碼

responseText： 服務器返回的結果

4、發送請求

xmlhttp.send();//GET方式，該方法不需要設置任何內容 xmlhttp.send();//POST方式，如果需要傳遞參數則可以在該方法中拼接字符串xmlhttp.send("key=value&key=value&key=value")

Ajax基本流程

//1.創建ajax對象 var req = null; if(window.XMLHttpRequest) {//IE7+ F...req = new XMLHttpRequest(); } else {//IE5,IE6req = new ActiveXObject("Microsoft.XMLHTTP"); }//2.定義發送方式 req.open("get", "http://localhost:8080/day22/check?name=admin", true); //3.定義回調 req.onreadystatechange = function() {if(req.readyState == 4 && req.status == 200) {alert("Yes")} }//4.發送 req.send();

4、結合JavaWeb使用Ajax

案例：三級聯動

安徽-》合肥-》瑤海

1 安徽 0 1

2 上海 0 1

3 合肥 1 2

4 蕪湖 1 2

5 瑤海 3 3

1、整理數據結構

2.設計界面

省：<select id="province"><option value="-1">==請選擇==</option> </select> 市：<select id="city"><option value="-1">==請選擇==</option> </select> 區：<select id="area"><option value="-1">==請選擇==</option> </select>新聞國內新聞財經新聞體育新聞CBA足球娛樂新聞國際新聞 電影 id title pid level isleaf 1 新聞 0 1 0 2 國內新聞 1 2 0 3 國際新聞 1 2 1 4 體育新聞 2 3 1 5 財經新聞 2 3 1 6 電影 0 1 1新聞》國內新聞》上海新聞》財經新聞

3.服務器端接口的開發

package com.itluma.servlet;import com.fasterxml.jackson.databind.ObjectMapper; import com.itluma.dao.AddressDAO; import com.itluma.domain.Address;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.List;/*** @author 飛鳥* @create 2020-07-10 10:41*/ @WebServlet("/address") public class AddressServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {Integer pid = null;try {pid = Integer.parseInt(req.getParameter("pid"));} catch (NumberFormatException e) {}if (pid != null) {AddressDAO dao = new AddressDAO();List<Address> list = dao.findByPid(pid);ObjectMapper objectMapper = new ObjectMapper();String json = objectMapper.writeValueAsString(list);resp.setContentType("text/json;charset=utf-8");//設置輸出json數據格式resp.getWriter().print(json);}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }

4、窗體加載后發送ajax請求，查詢所有的省

<script type="text/javascript">window.onload = function () {//1.查詢所有省/*var list = [{"id": 1, "name": "安徽", "pid": 0, "level": 1},{"id": 2, "name": "上海", "pid": 0, "level": 1},{"id": 3, "name": "湖北", "pid": 0, "level": 1}];*/var province = document.getElementById("province");var city = document.getElementById("city");var req = new XMLHttpRequest();req.open("GET", "/day23/address?pid=0", true);req.onreadystatechange = function () {if (req.readyState == 4 && req.status == 200) {var list = req.responseText;//默認返回的是一個字符串類型的json串//將字符串類型的json轉換成json對象var json = JSON.parse(list);//2.遍歷list數組，并生成對應的option對象，然后將該option對象放到select中for (var i = 0; i < json.length; i++) {var opt = new Option(json[i].name, json[i].id);//<option value="list[i].id">list[i].name</option>province.options.add(opt);}}}req.send();//2.查詢算中的省份對應的市province.onchange = function () {city.options.length = 1;if (this.value != -1) {req.open("GET", "/day23/address?pid=" + this.value, true);req.onreadystatechange = function () {if (req.readyState == 4 && req.status == 200) {var list = req.responseText;//默認返回的是一個字符串類型的json串//將字符串類型的json轉換成json對象var json = JSON.parse(list);//2.遍歷list數組，并生成對應的option對象，然后將該option對象放到select中for (var i = 0; i < json.length; i++) {var opt = new Option(json[i].name, json[i].id);//<option value="list[i].id">list[i].name</option>city.options.add(opt);}}}req.send();}}}</script>

總結

以上是生活随笔為你收集整理的Ajax!从入门到入土的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。