AJAX：Asynchronous Javascript And XML（异步JavaScript和XML）

作用：可以使前端页面在发送请求时不刷新整个页面，实现局部刷新的效果。

异步：AJAX请求可以设置是否是异步的，当是异步请求时，多个AJAX请求之间不需要等待，是并发的。

 

XMLHttpRequest对象

创建：var xhr = new XMLHttpRequest();

 

基本代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            //1. 创建AJAX核心对象
            var xhr = new XMLHttpRequest();
            //2. 注册回调函数
            xhr.onreadystatechange = function(){
                if (this.readyState == 4) {
                    if (this.status == 200) {                      
                        document.getElementById("mydiv").innerHTML = this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            //3. 开启通道
            xhr.open("GET", "/ajax/ajaxrequest2", true)
            //4. 发送请求
            xhr.send()
        }<br>　　}<br></script><br>

　　

AJAX的GET请求也是以url?key=value&key=value的形式提交数据

 

当发送POST请求时，需要对请求头进行设置，然后在send()中添加数据key=value&key=value进行提交。

基本代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            //1. 创建AJAX核心对象
            var xhr = new XMLHttpRequest();
            //2. 注册回调函数
            xhr.onreadystatechange = function(){
                if (this.readyState == 4) {
                    if (this.status == 200) {                      
                        document.getElementById("mydiv").innerHTML = this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            //3. 开启通道
            xhr.open("GET", "/ajax/ajaxrequest2", true)
            //4. 发送请求            xhr.send()
        }
　　}
</script>

　　　　　　　　xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") 
　　　　　　　　var username = document.getElementById("username").value;
　　　　　　　　var password = document.getElementById("password").value;
　　　　　　　　xhr.send("username="+username+"&password="+password)

　　

 

数据交换

后端除了返回基本的HTML格式的代码，还可以使用JSON或XML进行数据交换。

JSON：

前端可以使用var jsonObj = JSON.parse(jsonStr)将json字符串转化为json对象。

后端可以使用fastjson组件，将java对象转化成json格式的字符串。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
List<Student> studentList = new ArrayList<>();
while (rs.next()) {
    // 取出数据
    String name = rs.getString("name");
    int age = rs.getInt("age");
    String addr = rs.getString("addr");
    // 将以上数据封装成Student对象
    Student s = new Student(name, age, addr);
    // 将Student对象放到List集合
    studentList.add(s);
}
// 将List集合转换成json字符串
jsonStr = JSON.toJSONString(studentList);

　　

XML：

后端需要将相应格式设置为response.setContentType("text/xml;charset=UTF-8");

 

对Tomcat9及之前版本存在乱码问题，需要进行设置：

?
1
2
//响应乱码<br>response.setContentType("text/html;charset=UTF-8");<br>//POST请求乱码
request.setCharacterEncoding("UTF-8");