Ajax!從入門(mén)到入土

• • • Ajax
    • 1、JSON
    • • 1.1 什么是JSON
      • 1.2 JSON語(yǔ)法
    • 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的過(guò)程
    • 4、結(jié)合JavaWeb使用Ajax

Ajax

BOM：window/screen/location/history/

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

表單提交：存在“整個(gè)頁(yè)面刷新”過(guò)程

Ajax:可以實(shí)現(xiàn)“局部刷新”

1、JSON

1.1 什么是JSON

JSON(JavaScript Object Notation)是一種輕量級(jí)的數(shù)據(jù)交互格式。它基于ECMAScript(W3C指定的JS規(guī)范)的一個(gè)子集，采用完成獨(dú)立的格式，不依賴(lài)與任何編程語(yǔ)言。

1.2 JSON語(yǔ)法

• [] 表示數(shù)組
• {} 表示對(duì)象
• “” 屬性名或字符類(lèi)型的值
• : 屬性名和值之間的一個(gè)分隔符
• , 多個(gè)屬性之間的一個(gè)分隔符

一個(gè)JSON對(duì)象

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

JSON數(shù)組

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

2、JSON的解析

將JSON轉(zhuǎn)換成需要的數(shù)據(jù)格式的過(guò)程

2.1 Java中解析JSON

將一個(gè)字符串格式的JOSN轉(zhuǎn)換成對(duì)象

String json = "{\"id\":1001, \"name\": \"張三豐\", \"gender\":\"男\(zhòng)"}";class Student{private Integer id;private String name;private String gender; }Student student = ?student->JSON 將對(duì)象轉(zhuǎn)換成jsonjson -> student 將json轉(zhuǎn)成java對(duì)象

2.1.1 FastJSON解析

• FastJSON是一個(gè)Java庫(kù)，可以將Java對(duì)象轉(zhuǎn)換成JSON格式，當(dāng)然也可以將一個(gè)JSON字符串轉(zhuǎn)換成Java對(duì)象。
• 提供了toJSONString()和parseObject()方法來(lái)將Java對(duì)象與JSON相互轉(zhuǎn)換
  • toJSONString()：將Java對(duì)象轉(zhuǎn)換JSON格式字符串
  • parseObject():將JSON格式字符串轉(zhuǎn)換成Java對(duì)象

toJSONString():將Java對(duì)象轉(zhuǎn)換成JSON格式字符串

添加依賴(lài)

<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()將字符串解析成對(duì)象

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\":\"男\(zhòng)",\"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是一個(gè)能夠?qū)ava對(duì)象轉(zhuǎn)換成JSON字符串，也能夠?qū)SON字符串解析成Java對(duì)象
• readValue和writeValue實(shí)現(xiàn)的

通過(guò)writeValueAsString()將對(duì)象轉(zhuǎn)換成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對(duì)象

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\":\"男\(zhòng)",\"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

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

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

• JSON對(duì)象轉(zhuǎn)換成字符串：JSON.stringify();

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

總結(jié)：

• 后端
  • 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是一種無(wú)須重新加載整個(gè)頁(yè)面的情況下，實(shí)現(xiàn)更新部分網(wǎng)頁(yè)數(shù)據(jù)的技術(shù)。
• Ajax = Asynchronous Javascript And XML異步JavaScript andXML
• 可以實(shí)現(xiàn)部分?jǐn)?shù)據(jù)與服務(wù)器進(jìn)行交互
• 傳統(tǒng)的方式必須提交頁(yè)面（銷(xiāo)毀），獲取響應(yīng)結(jié)果后重新加載整個(gè)頁(yè)面。而AJAX可以實(shí)現(xiàn)局部數(shù)據(jù)的提交，不需要銷(xiāo)毀整個(gè)頁(yè)面，所有體驗(yàn)更好！

3.2 Ajax的工作原理

• ajax發(fā)送請(qǐng)求和接收的請(qǐng)求過(guò)程也是符合WEB規(guī)范
• XMLHttpRequest對(duì)象（異步對(duì)象，是與服務(wù)器進(jìn)行交互的對(duì)象）
• JavaScript中的DOM實(shí)現(xiàn)處理結(jié)果和更新數(shù)據(jù)
• XML(數(shù)據(jù)的交互格式)\JSON

3.3 Ajax的過(guò)程

案例：判斷一個(gè)用戶(hù)名是否可用！

1、創(chuàng)建XMLHttpRequest對(duì)象

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

MIME：文件格式

2、設(shè)置發(fā)送方式

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

3、定義回調(diào)結(jié)果

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

readyState:表示ajax的狀態(tài)碼：從0到4的過(guò)程

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

status：http響應(yīng)的狀態(tài)碼

responseText： 服務(wù)器返回的結(jié)果

4、發(fā)送請(qǐng)求

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

Ajax基本流程

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

4、結(jié)合JavaWeb使用Ajax

案例：三級(jí)聯(lián)動(dòng)

安徽-》合肥-》瑤海

1 安徽 0 1

2 上海 0 1

3 合肥 1 2

4 蕪湖 1 2

5 瑤海 3 3

1、整理數(shù)據(jù)結(jié)構(gòu)

2.設(shè)計(jì)界面

省：<select id="province"><option value="-1">==請(qǐng)選擇==</option> </select> 市：<select id="city"><option value="-1">==請(qǐng)選擇==</option> </select> 區(qū)：<select id="area"><option value="-1">==請(qǐng)選擇==</option> </select>新聞國(guó)內(nèi)新聞財(cái)經(jīng)新聞體育新聞CBA足球娛樂(lè)新聞國(guó)際新聞 電影 id title pid level isleaf 1 新聞 0 1 0 2 國(guó)內(nèi)新聞 1 2 0 3 國(guó)際新聞 1 2 1 4 體育新聞 2 3 1 5 財(cái)經(jīng)新聞 2 3 1 6 電影 0 1 1新聞》國(guó)內(nèi)新聞》上海新聞》財(cái)經(jīng)新聞

3.服務(wù)器端接口的開(kāi)發(fā)

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 飛鳥(niǎo)* @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");//設(shè)置輸出json數(shù)據(jù)格式resp.getWriter().print(json);}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }

4、窗體加載后發(fā)送ajax請(qǐng)求，查詢(xún)所有的省

<script type="text/javascript">window.onload = function () {//1.查詢(xún)所有省/*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;//默認(rèn)返回的是一個(gè)字符串類(lèi)型的json串//將字符串類(lèi)型的json轉(zhuǎn)換成json對(duì)象var json = JSON.parse(list);//2.遍歷list數(shù)組，并生成對(duì)應(yīng)的option對(duì)象，然后將該option對(duì)象放到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.查詢(xún)算中的省份對(duì)應(yīng)的市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;//默認(rèn)返回的是一個(gè)字符串類(lèi)型的json串//將字符串類(lèi)型的json轉(zhuǎn)換成json對(duì)象var json = JSON.parse(list);//2.遍歷list數(shù)組，并生成對(duì)應(yīng)的option對(duì)象，然后將該option對(duì)象放到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>

總結(jié)

以上是生活随笔為你收集整理的Ajax!从入门到入土的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。