Ajax筆記

Ajax

（asynchronous javascript and xml[異步請求 javascript xml])

傳統請求

發起傳統請求的方式

i.地址欄
ii.超級鏈接
iii.表單
iiii.javascript:location.href 函數

傳統請求的問題

需要刷新頁面才能等待結果進行後續操作。

異步請求

異步請求的特點

響應的內容不是新的頁面,是一個頁面的局部（字符串信息），所以用戶在使用異步請求時，不需要等待響應，直接可以進行後續的操作

傳統請求與異步請求的區別

響應內容

傳統請求響應：新的頁面 刷新頁面
異步請求響應：頁面的局部，字符串的信息

對於用戶的操作

傳統的請求：等待響應
異步的請求：不需要等待響應，用戶可以直接進行後續操作

異步請求的開發

異步請求對象

javascript:XmlHttpRequest 對象 xhr
針對不同系列瀏覽器創建方式不同
Chrom|FF|safari

Var xhr = new XmlHttpRequest();

IE系

Var xhr = new ActionXObject(“Microsoft.XMLHTTP”);

xhr對象使用

i.創建xhr對象
ii.發送請求

xhr.open("get | post", url);

iii.如何傳遞數據

xhr.send(數據);

iiii.監聽響應
xhr.readystate //檢測是否完成

狀態碼	狀態
0	xhr對象被創建，並沒有調用send()方法
1	xhr對象調用了send方法，但沒有響應
2	xhr對象調用了send方法，響應已經返回客戶端
3	響應解析
4	響應解析完成可以使用

xhr.status //響應是否正確

狀態碼	狀態
404	xhr對象被創建，並沒有調用send()方法
500	xhr對象調用了send方法，但沒有響應
405	xhr對象調用了send方法，響應已經返回客戶端
200	正確

xhr.onreadystatechange = function() {
    if (xhr.readystate == 4 && xhr.status == 200) {
        xhr.responseTest  //獲得響應文本
        //Javascript中的DOM編程展示在頁面中
    }
}

用戶名校驗開發實例：

<script type="text/javascript">
    function test1() {
        //獲取用戶名
        var input = document.getElementById("username");
        var username = input.value;
        //發送AJAX請求
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //發送請求
        xhr.open("GET", "${pageContext.request.contextPath}/check/checkusername1?username="    + username);
        xhr.send(null);
        //監聽響應

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //獲取校驗結果
                var message = xhr.responseText;
                //DOM提示信息
                var m = document.getElementById("message");
                m.innerHTML = message;
            }
        }
    }
</script>

<form action="">
用戶名<input type="text" id="username" name="username" onblur="test1()" value="username">
<span id="message"></span>
<br /> 
密碼<input type="password" name="password">
<br /> 
年齡<input type="text" name="age">
<br />
</form>

JSON協議串

本質

字符串

作用

在異構的編程體系中，進行數據的傳輸和交互

核心

對象形式

User {
    id = 1;
    userName = "hibiscidai";
    age = 20;
}

{"id":1,"userName":"hibiscidai","age":18}

集合形式

數組：

String [] names = {"xiaoming", "xiaozhu", "xiaogou"}

["xiaoming","xiaozhu","xiaogou"]

含有對象的集合

List <User>

[{"id":1,"userName":"hibiscidai","age":18},{"id":2,"userName":"xiaoming","age":20}]

內嵌對象

User {
    id = 1;
    userName = "hibiscidai";
    Address address;
    List<String> phone;
}
Address {
    city = "zhengzhou";
    street = "wenhualu";
}

{"id":1,"userName":"hibiscidai",{"city":"zhengzhou","street":"wenhualu"},["11111","2222","3333"]}

Map類型與對象的轉換形式是一致的

Map<String, String> m = new HashMap<String, String>();
m.put("name1", "hibiscidai1");
m.put("name2", "hibiscidai2");

{"name2":"hibiscidai2","name1":"hibiscidai1"}

JSON協議串解析

異構體系中對象和集合與JSON串之間的轉換
針對於java有jsonlib/gson(Google)/fastjson(ali)/jakenson(springmvc)
需要提前引入對應jar包

實際測試
用於本測試的對象
User.java | 省略setter和getter與構造方法

public class User {
    public String name;
    String phone;
    public int age;
    public Address address;
}

Address.java | 同User.java

public class Address {
    public String city;
    public String Street;
}

GSON(google)

java中的對象==》JSON串

@Test
    // java中的對象==》JSON串
    public void test1() {
        User user = new User("hibiscidai", "123456", 18, null);

        Gson gson = new Gson(); // 創建GSON對象
        String string = gson.toJson(user);
        System.out.println(string);
    }

{"name":"hibiscidai","phone":"123456","age":18}

java中的集合==》JSON串

@Test
    // java中的集合==》JSON串
    public void test2() {
        User user1 = new User("hibiscidai1", "1234561", 181, null);
        User user2 = new User("hibiscidai2", "1234562", 182, null);
        User user3 = new User("hibiscidai3", "1234563", 183, null);

        List<User> listUser = new ArrayList<User>(); // 創建List集合
        listUser.add(user1);
        listUser.add(user2);
        listUser.add(user3);

        Gson gson = new Gson(); // 創建GSON對象
        String string = gson.toJson(listUser);
        System.out.println(string);
    }

[{"name":"hibiscidai1","phone":"1234561","age":181},{"name":"hibiscidai2","phone":"1234562","age":182},{"name":"hibiscidai3","phone":"1234563","age":183}]

java中的內嵌對象==》JSON

@Test
    // java中的內嵌對象==》JSON
    public void test3() {
        Address addre = new Address("zhengzhou", "wenhualu");
        User user = new User("hibiscidai1", "1234561", 181, addre);

        Gson gson = new Gson(); // 創建GSON對象
        String string = gson.toJson(user);
        System.out.println(string);
    }

{"name":"hibiscidai1","phone":"1234561","age":181,"address":{"city":"zhengzhou","Street":"wenhualu"}}

java中的Map對象==》JSON

@Test
    // java中的Map對象==》JSON
    public void test4() {
        Map<String, String> maps = new HashMap<String, String>();
        maps.put("1", "hibiscidai");
        maps.put("2", "hibiscidai2");

        Gson gson = new Gson(); // 創建GSON對象
        String string = gson.toJson(maps);
        System.out.println(string);
    }

{"2":"hibiscidai2","1":"hibiscidai"}

JSON==》java中對象

@Test
    // JSON==》java中對象
    public void test5() {
        User user = new User("hibiscidai", "123456", 18, null);

        Gson gson = new Gson(); // 創建GSON對象
        String string = gson.toJson(user);

        User user2 = gson.fromJson(string, User.class); // json轉對象
        System.out.println(user2);
    }

User [name=hibiscidai, phone=123456, age=18, address=null]

fastjson(ali)

對象>int>string

java中的對象==》JSON串

@Test
    // java中的內嵌對象==》JSON
    public void test3() {
        Address addre = new Address("zhengzhou", "wenhualu");
        User user = new User("hibiscidai1", "1234561", 181, addre);

        String string = JSON.toJSONString(user);
        System.out.println(string);
    }

{"age":18,"name":"hibiscidai","phone":"123456"}

java中的集合==》JSON串

@Test
    // java中的集合==》JSON串
    public void test2() {
        User user1 = new User("hibiscidai1", "1234561", 181, null);
        User user2 = new User("hibiscidai2", "1234562", 182, null);
        User user3 = new User("hibiscidai3", "1234563", 183, null);

        List<User> listUser = new ArrayList<User>(); // 創建List集合
        listUser.add(user1);
        listUser.add(user2);
        listUser.add(user3);

        String string = JSON.toJSONString(listUser);// 創建GSON對象
        System.out.println(string);
    }

[{"age":181,"name":"hibiscidai1","phone":"1234561"},{"age":182,"name":"hibiscidai2","phone":"1234562"},{"age":183,"name":"hibiscidai3","phone":"1234563"}]

java中的內嵌對象==》JSON

@Test
    // java中的內嵌對象==》JSON
    public void test3() {
        Address addre = new Address("zhengzhou", "wenhualu");
        User user = new User("hibiscidai1", "1234561", 181, addre);

        String string = JSON.toJSONString(user);
        System.out.println(string);
    }

{"address":{"Street":"wenhualu","city":"zhengzhou","street":"wenhualu"},"age":181,"name":"hibiscidai1","phone":"1234561"}

java中的Map對象==》JSON

@Test
    // java中的Map對象==》JSON
    public void test4() {
        Map<String, String> maps = new HashMap<String, String>();
        maps.put("1", "hibiscidai");
        maps.put("2", "hibiscidai2");

        String string = JSON.toJSONString(maps);
        System.out.println(string);
    }

{"2":"hibiscidai2","1":"hibiscidai"}

JSON==》java中對象

@Test
    // JSON==》java中對象
    public void test5() {
        User user = new User("hibiscidai", "123456", 18, null);

        Gson gson = new Gson(); // 創建GSON對象
        String string = gson.toJson(user);

        User user2 = JSON.parseObject(string, User.class); // json轉對象
        System.out.println(user2);
    }

User [name=hibiscidai, phone=123456, age=18, address=null]

DOM編程

<script type="text/javascript">
    function test1() {
        //創建異步請求對象
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //發送異步請求
        //Struts2請求
        xhr.open("GET", "${pageContext.request.contextPath}/user/selectAll");
        xhr.send(null);
        //監聽響應
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //把JSON串轉化爲JS數組
                var users = JSON.parse(xhr.responseText);
                //獲取table標籤對象
                var table = document.getElementById("table");
                for ( var i = 0; i < users.length; i++) {
                    //DOM編程
                    //創建行
                    var tr = document.createElement("tr");
                    //創建第一個單元格
                    var td = document.createElement("td");

                    //文本填充第一個單元格(列)
                    var id = document.createTextNode(users[i].id);
                    td.appendChild(id);//第一個單元格填充內容
                    tr.appendChild(td);//第一個單元行填充單元格

                    //第二個單元格(列)
                    var td1 = document.createElement("td");
                    var username = document.createTextNode(users[i].username);
                    td1.appendChild(username);
                    tr.appendChild(td1);

                    //第二個單元格(列)
                    var td2 = document.createElement("td");
                    var password = document.createTextNode(users[i].password);
                    td2.appendChild(password);
                    tr.appendChild(td2);

                    //將行列接入表格
                    table.appendChild(tr);
                }
            }
        }
    }
</script>

對於前臺操作的表格

<body onload="test1()">
<table id="table" border="1px" cellspading="0px" cellpadding="0px"
        width="80%">
        <tr bgcolor="red">
            <td>用戶ID</td>
            <td>用戶名</td>
            <td>密碼</td>
        </tr>
</table>
</body>

JSON轉js對象或數組

（瀏覽器內置Jquery，Ext，vue，angluar js）瀏覽器內置對象，後續使用js框架

JSON.parse(jsonString)
–>js對象
–>ja數組

function test1() {
    /*
    //定義JSON串
    var u = '{"username":"hibiscidai","age":18}';
    //吧json串轉化爲js對象
    var user = JSON.parse(u);
    alert(user.username);
    alert(user.age);
    */
    //定義JSON串
    var s = '["hibiscidai","dai","mujin"]';
    var ss = JSON.parse(s);
    for (var i = 0; i < ss.length; i++) {
        alert(ss[i]);
    }
}

AJAX+Struts2+Mybatis整合

案例：顯示所有用戶的信息

selectAllAction

public String selectAll() {
    // 調用業務
    UserService us = new UserServiceImpl();
    List<User> users = us.selectAllUsers();
    // JSON串的轉換
    String jsonString = JSON.toJSONString(users);
    HttpServletResponse response = ServletActionContext.getResponse();
    response.setCharacterEncoding("UTF-8");
    PrintWriter out = null;
    try {
        out = response.getWriter();
        out.print(jsonString);
    } catch (IOException e) {
        e.printStackTrace();
    }
    out.close();
    return null;
}

前臺表單

<body onload="test1()">
    <table id="table" border="1px" cellspading="0px" cellpadding="0px" width="80%">
        <tr bgcolor="red">
            <td>用戶ID</td>
            <td>用戶名</td>
            <td>密碼</td>
        </tr>
    </table>
</body>

Ajax函數

<script type="text/javascript">
    function test1() {
        //創建異步請求對象
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //發送異步請求
        xhr.open("GET", "${pageContext.request.contextPath}/user/selectAll");
        xhr.send(null);
        //監聽響應
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //把JSON串轉化爲JS數組
                var users = JSON.parse(xhr.responseText);
                //獲取table標籤對象
                var table = document.getElementById("table");
                for ( var i = 0; i < users.length; i++) {
                    //DOM編程
                    //創建行
                    var tr = document.createElement("tr");
                    //創建第一個單元格
                    var td = document.createElement("td");
                    //文本填充第一個單元格
                    var id = document.createTextNode(users[i].id);
                    td.appendChild(id);
                    tr.appendChild(td);

                    var td1 = document.createElement("td");

                    var username = document.createTextNode(users[i].username);
                    td1.appendChild(username);
                    tr.appendChild(td1);

                    var td2 = document.createElement("td");

                    var password = document.createTextNode(users[i].password);
                    td2.appendChild(password);
                    tr.appendChild(td2);

                    table.appendChild(tr);
                }
            }
        }
    }
</script>