Zephon Blog
0%

Ajax学习笔记

发表于 更新于 分类于
本文字数： 9.2k 阅读时长 ≈ 8 分钟

Ajax学习笔记

什么是Ajax

Ajax全称“Asynchronous JavaScript and XML"，是一种创建交互式网页应用的网页开发技术。是一种异步刷新技术，用来在当前页面内响应不同的请求内容。

为什么需要Ajax

因为有的时候我们需要将本次的响应结果和前面的响应结果内容在同一个页面中展现给用户。

如果不用Ajax，就需要在后台服务器端将多次响应内容重新拼接成一个jsp页面，响应。但这样会造成很多响应内容被重复的响应，造成资源浪费

使用Ajax

Ajax访问原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。本质上就是JS操作文档结构，使之变成动态的。

Ajax的基本使用流程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Test</title>
    <script type="text/javascript">
        function c() {
            //1.创建ajax引擎对象
                var ajax;
                if(window.XMLHttpRequest){
                    ajax = new XMLHttpRequest();
                }else if(window.ActiveXObject){
                    ajax = new ActiveXObject("Msxm12.XMLHTTP");//旧版本IE
                }
            //2.复写onreadystatement函数
                ajax.onreadystatechange = function (ev) {
                    //判断Ajax状态码
                    if(ajax.readyState==4){
                        //判断响应状态码
                        if(ajax.status==200){
                            //获取响应内容
                            var result = ajax.responseText;
                            //获取元素对象
                            var d = document.getElementById("d");
                            d.innerHTML=result;
                        }else if(ajax.status==404){
                            document.getElementById("d").innerHTML="请求页面不存在";
                        }else if(ajax.status==500){
                            document.getElementById("d").innerHTML="服务器繁忙";
                        }
                    }
                }
            //3.发送对象
            ajax.open("get","ajax");
            ajax.send(null);
        }
    </script>
</head>
    <input type="button" id="bt" onclick="c()" value="按钮"/>
    <div style="width: 100px; height: 100px; background-color: red " id="d"></div>
</body>
</html>

Ajax的状态码

readState值 含义
0 表示XMLHttpRequest已建立，但还未初始化，这里尚未调用open方法
1 表示open方法已经调用，但未调用send方法(已创建，未发送)
2 表示send方法已经调用，其它数据未知
3 表示请求已经成功发送，正在接受数据
4 表示数据已经成功接收

Ajax的异步和同步

ajax.open(method,url,async)中async为true时，代表异步，默认为异步，false为同步

Ajax的请求

get请求：get请求实体拼接在URL后面，用？隔开，键值对

1
2
3
//get方式：请求实体拼接在URL后面
ajax.open("get","ajax?name=张三&pwd=123");
ajax.send(null);

post请求：有单独的请求实体

1
2
3
4
5
//post方式：
ajax.open("post","ajax");
//后面的charset=utf-8解决中文乱码
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
ajax.send("name=张三&pwd=123");

Ajax的响应数据类型

后台用Java代码，前端用JS代码，Java中数据库读入的List无法直接转成JS中的数据类型，所以需要引入一种转换方式，即可以使用XML或Json(重点)

XML数据:responseXML返回document对象，通过document对象将数据从xml中获取出来

1
2
3
4
5
6
7
8
9
10
11
12
@WebServlet("/ajaxServlet")
public class ajaxServlet extends HttpServlet {
    ajaxService as = new ajaxServiceImp();
    @Override
    public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
        res.setCharacterEncoding("utf-8");
        //res.setContentType("text/html;charset=utf-8");
        res.setContentType("text/xml;charset=utf-8");
        //使用XML
        res.getWriter().write("<user><uid>1</uid><name>张三</name></user>");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Check</title>
    <script type="text/javascript">
        function s() {
            var ajax = new XMLHttpRequest();
            ajax.onreadystatechange = function () {
                if(ajax.readyState==4){
                    if(ajax.status == 200){
                        //var result = ajax.responseText;
                        var result = ajax.responseXML;
                        console.log(result.getElementsByTagName("name"))
                        alert(result.getElementsByTagName("name")[0].innerHTML);
                    }
                }
            }
            ajax.open("post","ajaxServlet");
            console.log("name="+document.getElementById("name").value)
            ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
            ajax.send("name="+document.getElementById("name").value);
        }
    </script>
</head>
<body>
    <h3>欢迎访问英雄商店</h3>
    <hr>
    名称<input type="text" name="name" id="name" value="">
        <input type="button" id="bt" value="搜索" onclick="s()">
    <hr>
    <table border="1px" id="ta">

    </table>
</body>
</html>

json:其实就是讲述数据按照json的格式拼接好的字符串，方便使用eval方法，将接收的字符串数据直接转换为js对象

json格式：

1
2
3
4
5
var 对象名 = {
    属性名：属性值，
    属性名：属性值，
    ...
}

案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/**
 * Copyright (C), 2015-2019, XXX有限公司
 * FileName: ajaxServlet
 * Author:   zephon
 * Date:     19-4-1 下午12:54
 * Description:
 * History:
 * <author>          <time>          <version>          <desc>
 * 作者姓名           修改时间           版本号              描述
 */
package com.zephon.servletImp;

import com.google.gson.Gson;
import com.zephon.pojo.User;
import com.zephon.service.ajaxService;
import com.zephon.serviceImp.ajaxServiceImp;

import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import java.io.IOException;

/**
 * 〈一句话功能简述〉<br> 
 * 〈〉
 *
 * @author zephon
 * @create 19-4-1
 * @since 1.0.0
 */
@WebServlet("/ajaxServlet")
public class ajaxServlet extends HttpServlet {
    ajaxService as = new ajaxServiceImp();
    @Override
    public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
        res.setCharacterEncoding("utf-8");
        res.setContentType("text/html;charset=utf-8");

        String name = req.getParameter("name");
        System.out.println("name"+name);

        User u = as.getUserInfoService(name);
        System.out.println(u.getUid()+"-"+u.getUname()+"-"+u.getPrice()+"-"+u.getLocation()+"-"+u.getDetail());
        //json处理
        //原始方式（太麻烦)
        //res.getWriter().write("{name:'"+u.getUname()+"'}");
        //使用gson
        //此处gson报错500 但没输出，因为对于ajax.state=500没有处理，解决方案是将gson.jar拷贝一份到web-inf中的lib中或tomcat的lib中
        res.getWriter().write(new Gson().toJson(u));

    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商店</title>
    <script type="text/javascript">
        function s() {
            var ajax = new XMLHttpRequest();
            ajax.onreadystatechange = function () {
                if(ajax.readyState==4){
                    if(ajax.status == 200){
                        var result = ajax.responseText;
                        //js操作表格
                        console.log("result:"+result)
                        eval("var u ="+result)
                        console.log(u);
                        var ta = document.getElementById("ta");
                        ta.innerHTML=""
                        var tr = ta.insertRow(0);
                        tr.insertCell(0).innerHTML = "编号";
                        tr.insertCell(1).innerHTML = "名称";
                        tr.insertCell(2).innerHTML = "价格";
                        tr.insertCell(3).innerHTML = "位置";
                        tr.insertCell(4).innerHTML = "描述";
                        var tr = ta.insertRow(1);
                        var cell0 = tr.insertCell(0);
                        cell0.innerHTML = u.uid;
                        var cell1 = tr.insertCell(1);
                        cell1.innerHTML = u.uname;
                        var cell2 = tr.insertCell(2);
                        cell2.innerHTML = u.price;
                        var cell3 = tr.insertCell(3);
                        cell3.innerHTML = u.location;
                        var cell4= tr.insertCell(4);
                        cell4.innerHTML = u.detail;
                    }
                }
            }
            ajax.open("post","ajaxServlet");
            console.log("name="+document.getElementById("name").value)
            ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
            ajax.send("name="+document.getElementById("name").value);
        }
    </script>
</head>
<body>
    <h3>欢迎访问英雄商店</h3>
    <hr>
    名称<input type="text" name="name" id="name" value="">
        <input type="button" id="bt" value="搜索" onclick="s()">
    <hr>
    <table border="1px" id="ta">
    </table>
</body>
</html>

Ajax的封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function getAjax() {
    //创建ajax引擎对象
    var ajax;
    if(window.XMLHttpRequest){
        ajax = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        ajax = new ActiveXObject("Msxm12.XMLHTTP");//旧版本IE
    }
    return ajax;
}

function myAjax(method,url,data,deal200,deal404,deal500,async) {
    var ajax = getAjax();
    //复写onreadystatement函数
    ajax.onreadystatechange = function () {
        //判断Ajax状态码
        if(ajax.readyState==4){
            //判断响应状态码
            if(ajax.status==200){
                if(deal200){
                    deal200(ajax);
                }
            }else if(ajax.status==404){
                if(deal404){
                    deal404();
                }
            }else if(ajax.status==500){
                if(deal500){
                    deal500();
                }
            }
        }
    }
    if(method.toLowerCase()=="get"){
        ajax.open("get",url+(data==null?"":("?"+data)),async);
        ajax.send(null);
    }else if(method.toLowerCase()=="post"){
        ajax.open("post",url,async);
        ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
        ajax.send(data);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">


    function a() {
        console.log(document.getElementById("name").value)
        myAjax("get", "ajaxServlet", "name=" + document.getElementById("name").value, function (a) {
            var result = a.responseText
            console.log(result);
        });
    }

</script>