劉意老師整理

AJAX

概念： ASynchronous JavaScript And XML 異步的JavaScript 和 XML

異步和同步：客戶端和服務器端相互通信的基礎上

客戶端必須等待服務器端的響應。在等待的期間客戶端不能做其他操作。
客戶端不需要等待服務器端的響應。在服務器處理請求的過程中，客戶端可以進行其他的操作。

Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術
通過在後臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。

作用：提升用戶的體驗

實現方式：

1. 原生的JS實現方式（瞭解）

//1.創建核心對象
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

//2. 建立連接
/*
    參數：
        1. 請求方式：GET、POST
            * get方式，請求參數在URL後邊拼接。send方法爲空參
            * post方式，請求參數在send方法中定義
        2. 請求的URL：
        3. 同步或異步請求：true（異步）或 false（同步）

 */
xmlhttp.open("GET", "ajaxServlet?username=tom", true);

//3.發送請求
xmlhttp.send();

//4.接受並處理來自服務器的響應結果
//獲取方式 ：xmlhttp.responseText
//什麼時候獲取？當服務器響應成功後再獲取

//當xmlhttp對象的就緒狀態改變時，觸發事件onreadystatechange。
xmlhttp.onreadystatechange = function () {
    //判斷readyState就緒狀態是否爲4，判斷status響應狀態碼是否爲200
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        //獲取服務器的響應結果
        var responseText = xmlhttp.responseText;
        alert(responseText);
    }
}

2. JQeury實現方式

$.ajax()

語法：$.ajax({鍵值對});

//使用$.ajax()發送異步請求
$.ajax({
	url:"ajaxServlet1111" , // 請求路徑
	type:"POST" , //請求方式
	//data: "username=jack&age=23",//請求參數
	data:{"username":"jack","age":23},
	success:function (data) {
		alert(data);
	},//響應成功後的回調函數
	error:function () {
		alert("出錯啦...")
	},//表示如果請求響應出現錯誤，會執行的回調函數

	dataType:"text"//設置接受到的響應數據的格式
});

$.get()：發送get請求

語法：$.get(url, [data], [callback], [type])

參數：

url：請求路徑
data：請求參數
callback：回調函數
type：響應結果的類型

$.get("ajaxServlet",{"username":"zhangsan"},function(data){
    alert(data)
},"text");

$.post()：發送post請求

語法：$.post(url, [data], [callback], [type])

參數：

url：請求路徑
data：請求參數
callback：回調函數
type：響應結果的類型

$.post("ajaxServlet",{"username":"zhangsan"},function(data){
    alert(data)
},"text");

JSON：

概念： JavaScript Object Notation JavaScript對象表示法

json現在多用於存儲和交換文本信息的語法
進行數據的傳輸
JSON 比 XML 更小、更快，更易解析。

語法：

基本規則

數據在名稱/值對中：json數據是由鍵值對構成的
鍵用引號(單雙都行)引起來，也可以不使用引號

值得取值類型：

數字（整數或浮點數）
字符串（在雙引號中）
邏輯值（true 或 false）
數組（在方括號中） {"persons":[{},{}]}
對象（在花括號中） {"address":{"province"："陝西"....}}
null

數據由逗號分隔：多個鍵值對由逗號分隔
花括號保存對象：使用{}定義json 格式
方括號保存數組：[]

獲取數據:

json對象.鍵名

var person = {"name": "張三", age: 23, 'gender': true};

var name = person.name;
alert(name);

json對象["鍵名"]

var person = {"name": "張三", age: 23, 'gender': true};

var name = person["name"];
alert(name);

數組對象[索引]

var persons = {
    "persons": [
        {"name": "張三", "age": 23, "gender": true},
        {"name": "李四", "age": 24, "gender": true},
        {"name": "王五", "age": 25, "gender": false}
        ]
};
var name1 = persons.persons[2].name;
alert(name1);

遍歷

 //1.定義基本格式
var person = {"name": "張三", age: 23, 'gender': true};

var ps = [{"name": "張三", "age": 23, "gender": true},
	{"name": "李四", "age": 24, "gender": true},
	{"name": "王五", "age": 25, "gender": false}];




//獲取person對象中所有的鍵和值
//for in 循環
/* for(var key in person){
	//這樣的方式獲取不行。因爲相當於  person."name"
	//alert(key + ":" + person.key);
	alert(key+":"+person[key]);
}*/

//獲取ps中的所有值
for (var i = 0; i < ps.length; i++) {
	var p = ps[i];
	for(var key in p){
		alert(key+":"+p[key]);
	}
}

JSON數據和Java對象的相互轉換

JSON解析器：

常見的解析器：Jsonlib，Gson，fastjson，jackson

1. JSON轉爲Java對象

導入jackson的相關jar包
創建Jackson核心對象 ObjectMapper
調用ObjectMapper的相關方法進行轉換

//1.初始化JSON字符串
String json = "{\"gender\":\"男\",\"name\":\"張三\",\"age\":23}";

//2.創建ObjectMapper對象
ObjectMapper mapper = new ObjectMapper();
//3.轉換爲Java對象 Person對象
Person person = mapper.readValue(json, Person.class);

System.out.println(person);

2. Java對象轉換JSON

導入jackson的相關jar包
創建Jackson核心對象 ObjectMapper
調用ObjectMapper的相關方法進行轉換

轉換方法：writeValue(參數1，obj):

參數1：

File：將obj對象轉換爲JSON字符串，並保存到指定的文件中
Writer：將obj對象轉換爲JSON字符串，並將json數據填充到字符輸出流中
OutputStream：將obj對象轉換爲JSON字符串，並將json數據填充到字節輸出流中

//1.創建Person對象
Person p = new Person();
p.setName("張三");
p.setAge(23);
p.setGender("男");

//2.創建Jackson的核心對象  ObjectMapper
ObjectMapper mapper = new ObjectMapper();
//3.轉換
/*

    轉換方法：
        writeValue(參數1，obj):
            參數1：
                File：將obj對象轉換爲JSON字符串，並保存到指定的文件中
                Writer：將obj對象轉換爲JSON字符串，並將json數據填充到字符輸出流中
                OutputStream：將obj對象轉換爲JSON字符串，並將json數據填充到字節輸出流中
        writeValueAsString(obj):將對象轉爲json字符串

 */
String json = mapper.writeValueAsString(p);
//{"name":"張三","age":23,"gender":"男"}
//System.out.println(json);//{"name":"張三","age":23,"gender":"男"}


//writeValue，將數據寫到d://a.txt文件中
//mapper.writeValue(new File("d://a.txt"),p);

//writeValue.將數據關聯到Writer中
mapper.writeValue(new FileWriter("d://b.txt"), p);

writeValueAsString(obj):將對象轉爲json字符串

//1.創建Person對象
Person p = new Person();
p.setName("張三");
p.setAge(23);
p.setGender("男");
p.setBirthday(new Date());

//2.轉換
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(p);
System.out.println(json);

註解：

@JsonIgnore：排除屬性。
@JsonFormat：屬性值得格式化

@JsonFormat(pattern = "yyyy-MM-dd")

//@JsonIgnore //忽略該屬性
@JsonFormat(pattern = "yyyy-MM-dd")
private Date birthday;

//1.創建Person對象
Person p = new Person();
p.setName("張三");
p.setAge(23);
p.setGender("男");
p.setBirthday(new Date());

//2.轉換
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(p);
System.out.println(json);

複雜java對象轉換

List：數組

//1.創建Person對象
Person p = new Person();
p.setName("張三");
p.setAge(23);
p.setGender("男");
p.setBirthday(new Date());

Person p1 = new Person();
p1.setName("張三");
p1.setAge(23);
p1.setGender("男");
p1.setBirthday(new Date());

Person p2 = new Person();
p2.setName("張三");
p2.setAge(23);
p2.setGender("男");
p2.setBirthday(new Date());

//創建List集合
List<Person> ps = new ArrayList<Person>();
ps.add(p);
ps.add(p1);
ps.add(p2);

//2.轉換
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(ps);
// [{},{},{}]
System.out.println(json);

Map：對象格式一致

//1.創建map對象
Map<String,Object> map = new HashMap<String,Object>();
map.put("name","張三");
map.put("age",23);
map.put("gender","男");
//2.轉換
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(map);
//{"name":"張三","age":23,"gender":"男"}
System.out.println(json);//{"gender":"男","name":"張三","age":23}

案例：校驗用戶名是否存在

regits.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>註冊頁面</title>
    <script src="js/jquery-3.3.1.min.js"></script>


    <script>
        //在頁面加載完成後
        $(function () {
            //給username綁定blur事件
            $("#username").blur(function () {
                //獲取username文本輸入框的值
                var username = $(this).val();
                //發送ajax請求
                //期望服務器響應回的數據格式：{"userExsit":true,"msg":"此用戶名太受歡迎,請更換一個"}
                //                         {"userExsit":false,"msg":"用戶名可用"}
                $.get("findUserServlet", {username: username}, function (data) {
                    //判斷userExsit鍵的值是否是true

                    // alert(data);
                    var span = $("#s_username");
                    if (data.userExsit) {
                        //用戶名存在
                        span.css("color", "red");
                        span.html(data.msg);
                    } else {
                        //用戶名不存在
                        span.css("color", "green");
                        span.html(data.msg);
                    }
                });

            });
        });

    </script>
</head>
<body>


<form>

    <input type="text" id="username" name="username" placeholder="請輸入用戶名">
    <span id="s_username"></span>
    <br>
    <input type="password" name="password" placeholder="請輸入密碼"><br>
    <input type="submit" value="註冊"><br>

</form>

</body>
</html>

FindUserServlet.java


import com.fasterxml.jackson.databind.ObjectMapper;

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.HashMap;
import java.util.Map;


@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.獲取用戶名
        String username = request.getParameter("username");

        //2.調用service層判斷用戶名是否存在

        //期望服務器響應回的數據格式：{"userExsit":true,"msg":"此用戶名太受歡迎,請更換一個"}
        //                         {"userExsit":false,"msg":"用戶名可用"}

        //設置響應的數據格式爲json
        response.setContentType("application/json;charset=utf-8");
        Map<String, Object> map = new HashMap<String, Object>();

        if ("tom".equals(username)) {
            //存在
            map.put("userExsit", true);
            map.put("msg", "此用戶名太受歡迎,請更換一個");
        } else {
            //不存在
            map.put("userExsit", false);
            map.put("msg", "用戶名可用");
        }

        //將map轉爲json，並且傳遞給客戶端
        //將map轉爲json
        ObjectMapper mapper = new ObjectMapper();
        //並且傳遞給客戶端
        mapper.writeValue(response.getWriter(), map);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

服務器響應的數據，在客戶端使用時，要想當做json數據格式使用。有兩種解決方案：

$.get(type):將最後一個參數type指定爲"json"
在服務器端設置MIME類型
response.setContentType("application/json;charset=utf-8");

AJAX&JSON01

劉意老師整理

AJAX

實現方式：

1. 原生的JS實現方式（瞭解）

2. JQeury實現方式

$.ajax()

$.get()：發送get請求

$.post()：發送post請求

JSON：

語法：

基本規則

獲取數據:

JSON數據和Java對象的相互轉換

JSON解析器：

1. JSON轉爲Java對象

2. Java對象轉換JSON

註解：

案例：校驗用戶名是否存在

Mybatis的dao層實現原理

Spring簡介和配置

javaScript之本地存儲

toDoList開發實例

CSS3開發案例

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結