AJAX

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

AJAX 是什么？

AJAX是一种异步提交的技术

AJAX = Asynchronous JavaScript and XML

AJAX 是一种用于创建快速动态网页的技术

AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新，这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面

AJAX 基于因特网标准

AJAX 基于因特网标准，并使用以下技术组合：

XMLHttpRequest 对象（与服务器异步交互数据）
JavaScript/DOM（显示/取回信息）
CSS（设置数据的样式）
XML（常用作数据传输的格式）

lamp AJAX 应用程序与浏览器和平台无关的！

AJAX - 创建 XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：


xxxxxxxxxx
1
1
variable = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：


xxxxxxxxxx
1
1
variable = new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject：


xxxxxxxxxx
12
1
var xmlhttp; 
2
if (window.XMLHttpRequest) {
3

4
//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码   
5
    xmlhttp=new XMLHttpRequest(); 
6

7
} else {    
8

9
// IE6, IE5 浏览器执行代码    
10
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
11

12
}

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）


xxxxxxxxxx
2
1
xmlhttp.open("GET","ajax_info.txt",true);
2
xmlhttp.send();

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
`responseText`	获得字符串形式的响应数据。
`responseXML`	获得 XML 形式的响应数据。

`onreadystatechange` 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
`onreadystatechange`	存储函数（或函数名），每当 `readyState` 属性改变时，就会调用该函数。
`readyState`	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

后端进行一个简单的用户伪校验


xxxxxxxxxx
20
1
@Override
2
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
3

4
    request.setCharacterEncoding("utf-8");
5
    response.setContentType("html/text;charset=utf-8");
6

7
    String username = request.getParameter("username");
8
    String password = request.getParameter("password");
9

10
    if (username.equals("jack001") && password.equals("123456")){
11

12
        response.getWriter().print("1");
13

14
    }else {
15

16
        response.getWriter().print("2");
17

18
    }
19

20
}

Ajax(JS)

一个基于JS原生Ajax的用户数据后端校验


xxxxxxxxxx
63
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>原生js的ajax</title>
6
</head>
7

8
<script>
9

10
    //测试Ajax的函数
11
    function testAjax(){
12

13
        let xmlHttp;
14

15
        //判断是不是ie浏览器
16
        if(window.XMLHttpRequest){
17

18
            xmlHttp = new XMLHttpRequest();
19

20
        }else {
21

22
            xmlHttp = ActiveXObject("Microsoft.XMLHTTP");
23

24
        }
25

26
        let usernameEl = document.getElementById("username");
27

28
        let passwordEl = document.getElementById("password");
29

30
        let username = usernameEl.value;
31

32
        let password = passwordEl.value;
33

34
        //设置参数
35
        xmlHttp.open("GET","http://localhost:8080/jQuery/test?username="+username+"&password="+password,true);
36

37
        //访问具体的服务，发送请求
38
        xmlHttp.send();
39

40
        //绑定监听事件
41
        xmlHttp.onreadystatechange = function (){
42

43
            //判断服务器和网页的状态
44
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
45

46
                //获取服务器响应的数据
47
                alert(xmlHttp.responseText);
48

49
            }
50

51
        }
52

53
    }
54

55
</script>
56

57
<body>
58
请输入用户名：<input type="text" id="username" value=""><br>
59
请输入用户名密码：<input type="password" id="password" value=""><br>
60
<input type="button" value="ajax监听事件按钮" onclick="testAjax()">
61

62
</body>
63
</html>

Ajax(JQuery)

一个基于Ajax的用户登录校验


xxxxxxxxxx
93
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>jQuery的ajax</title>
6
</head>
7
<script src="../jQuery/jquery-1.7.2.js"></script>
8
<script>
9

10
   $(function (){
11

12
       $("[value=提交]").click(function (){
13

14
           //获取用户名和密码的值
15
           let username = $("#username").val();
16

17
           let password = $("#password").val();
18

19
           //调用ajax函数
20
           $.ajax({
21

22
               //提交到后端的地址
23
               url:"http://localhost:8080/jQuery/test",
24

25
               //提交的方式
26
               type:"POST",
27

28
               //提交到后端的数据
29
               data:{
30
                   username:username,
31
                   password:password
32
               },
33

34
               //请求成功之后的回调函数，监听事件
35
               success:function (obj){
36

37
                   if (obj == "1"){
38

39
                       alert("登陆成功");
40

41
                       //跳转到页面
42
                       location.href = "http://www.baidu.com";
43
                   }else {
44

45
                       alert("登陆失败");
46

47
                   }
48

49
               },
50

51
               //服务端返回的数据类型text,html,json,xml
52
               dataType:"text"
53

54
           })
55

56

57
       })
58

59
   })
60

61
</script>
62

63
<body>
64
<table align="center" border="1px">
65
    <tr align="center">
66
        <td colspan="2"><h3>用户登录</h3></td>
67
    </tr>
68
    <tr>
69
        <td>
70
            请输入用户名
71
        </td>
72
        <td>
73
            <input type="text" id="username" value=""><br>
74
        </td>
75
    </tr>
76
    <tr>
77
        <td>
78
            请输入密码
79
        </td>
80
        <td>
81
            <input type="password" id="password" value=""><br>
82
        </td>
83
    </tr>
84
    <tr align="center">
85
        <td colspan="2">
86
            <input type="button" value="提交">
87
        </td>
88
    </tr>
89
</table>
90

91

92
</body>
93
</html>

jQuery中封装的ajax以JSON串的形式存值

一些关键的key与value：

KEY	VALUE
url	后端资源地址
type	"GET"、"POST"...
data	提交到后端的数据（JSON串）{username : username, password : password}
success	服务器反馈数据成功后执行的方法 function (object接收后端的参数){方法体}
dataType	服务端返回的数据类型text,html,json,xml "text"

注：如果后端返回“true”或者“false”字符串，前端ajax会自动识别为布尔类型

将集合类型转成JSON串传输给前端


xxxxxxxxxx
14
1
//获取到集合
2
List<Clazz> clazzList = studentDao.getClazzList();
3

4
//将集合转换成JSON串
5
String toJSONStringClazz = JSON.toJSONString(clazzList);
6

7
try {
8

9
    //向前端传输数据
10
    response.getWriter.print(toJSONStringClazz);
11

12
} catch (IOException e) {
13
    e.printStackTrace();
14
}

在前端ajax回调函数中为列表添加数据


xxxxxxxxxx
9
1
success : function(obj){
2

3
    for (let i in obj){
4
        
5
        $("[name='cid']").append("<option value="+obj[i].cid+">"+obj[i].className+"</option>")
6
        
7
    }
8

9
}

通过ajax提交表单项内容


xxxxxxxxxx
40
1
$(function (){
2

3
    //完成对班级下拉列表的回显
4

5
    <c:forEach items="${clazzList}" var="clazz">
6
    //给下拉列表追加option
7
    $("#clazz").append("<option value='${clazz.cid}'>--${clazz.clazzName}--</option>")
8
    </c:forEach>
9

10
    $("input[value='添加']").click(function (){
11

12

13
        $.ajax({
14

15
            url:"http://localhost:8080/servlet/student?flag=addStudent",
16

17
            type:"post",
18

19
            //提交到后端的数据  serialize()表单序列化的方法，将表单数据拼接成JSON格式
20
            data:$("form").serialize(),
21

22
            //回调函数
23
            success:function (obj){
24

25
                if (obj == "1"){
26

27
                    location.href = "http://localhost:8080/servlet/student?flag=studentList";
28

29
                }
30

31
            },
32

33
            dataType:"text"
34

35

36
        })
37

38
    })
39

40
})