作者声明：本博客中所写的文章，都是博主自学过程的笔记，参考了很多的学习资料，学习资料和笔记会注明出处，所有的内容都以交流学习为主。有不正确的地方，欢迎批评指正。

本节课学习视频来自于：https://www.bilibili.com/video/av21373626

AJAX学习

1 概念

什么是Ajax？

Ajax(Asynchronous JavaScript and XML),允许浏览器与服务器通信而无须刷新当前页面的技术。

出现服务器配置问题：https://www.cnblogs.com/greenteaone/p/7929571.html

　　　　　　　　　　https://blog.csdn.net/testcs_dn/article/details/36455669

示例代码：亲测有效

1<script>
2    window.onload = function(){
3        //1.获取a节点，并为其添加onclick响应函数
4        document.getElementsByTagName("a")[0].onclick = function(){
5            //3.创建一个XMLHttpRequest 对象
6            var request = new  XMLHttpRequest();
7            
8            //4.准备发送请求数据：url
9            var url = this.href;
10            var method = "GET";
11            //5.调用  XMLHttpRequest 对象的open方法
12            request.open(method,url);
13            //6。调用XMLHttpRequest 对象的send方法
14            request.send(null);
15            //7.为   XMLHttpRequest 对象添加  onreadystatechange 响应函数
16            request.onreadystatechange = function(){
17                //8.判断响应是否完成： XMLHttpRequest 对象的readState 属性值为4的时候
18                if(request.readyState == 4){
19                    //9.再判断响应是否可用：XMLHttpRequest 对象 status 属性值为200
20                    if(request.status == 200 || request.status == 304){
21                        //10.打印响应结果 :responseText    
22                        alert(request.responseText);
23                    }
24                }
25            }
26            
27            
28            //2.取消a节点的默认行为
29            return false;
30        }
31    } 
32</script>

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6     <script>
7        window.onload = function () {
8            var aNodes = document.getElementsByTagName("a");
9            for (var i=0;i < aNodes.length;i++){
10                aNodes[i].onclick = function(){
11                    var request = new XMLHttpRequest();
12                    var method = "GET";
13                    var url = this.href;
14
15                    request.open(method,url);
16                    request.send(null);
17
18                    request.onreadystatechange = function () {
19                        if(request.readyState == 4){
20                            if(request.status ==200 || request.status ==304){
21                                document.getElementById("details").innerHTML = request.responseText;
22                            }
23                        }
24
25                    }
26
27
28
29
30                    return false;
31                }
32            }
33        }
34    </script>
35</head>
36<body>
37    <h1>People</h1>
38    <ul>
39        <li><a href=" files/andy.html">andy</a></li>
40        <li><a href=" files/jeremy.html">jeremy</a></li>
41        <li><a href=" files/richard.html">richard</a></li>
42    </ul>
43    <div id="details"></div>
44</body>
45</html>

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6      <script>
7        window.onload = function () {
8                var aNodes = document.getElementsByTagName("a");
9                for (var i=0;i < aNodes.length;i++){
10                    aNodes[i].onclick = function(){
11                        var request = new XMLHttpRequest();
12                        var method = "GET";
13                        var url = this.href;
14
15                        request.open(method,url);
16                        request.send(null);
17
18                        request.onreadystatechange = function () {
19                            if(request.readyState == 4){
20                                if(request.status ==200 || request.status ==304){
21                                   //1结果为xml格式，须要通过responseXML来获取
22                                    var result = request.responseXML;
23                                    //2 结果不能直接使用，必须先创建对应的接地节点，再把节点加到 #details
24                                    //目标格式是
25                                    //<h2><a href = "mailto:andy@clearleft.com">Andy Budd</a></h2>
26                                    // <a href = "http://andybudd.com">http://andybudd.com</a>
27                                    var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
28                                    var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
29                                    var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
30                                    
31                                    //alert(name);
32                                    //alert(website);
33                                    //alert(email);
34                                    var aNode = document.createElement("a");
35                                    aNode.appendChild(document.createTextNode(name));
36                                    aNode.href = "mailto:" +  email;
37                                    
38                                    var h2node = document.createElement("h2");
39                                    h2node.appendChild(aNode);
40                                    
41                                    var aNode2 = document.createElement("a");
42                                    aNode2.appendChild(document.createTextNode(website));
43                                    aNode2.href = website;
44                                    
45                                    var detailsNode = document.getElementById("details");
46                                    detailsNode.innerHTML = "";
47                                    detailsNode.appendChild(h2node);
48                                    detailsNode.appendChild(aNode2);
49                                }
50                            }
51
52                        }
53                        return false;
54                    }
55                }
56            }
57    </script>
58</head>
59<body>
60    <h1>People</h1>
61    <ul>
62        <li><a href=" files/andy.xml">andy</a></li>
63        <li><a href=" files/jeremy.xml">jeremy</a></li>
64        <li><a href=" files/richard.xml">richard</a></li>
65    </ul>
66    <div id="details"></div>
67</body>
68</html>

1<script>
2        window.onload = function () {
3            var aNodes = document.getElementsByTagName("a");
4            for (var i=0;i < aNodes.length;i++){
5                aNodes[i].onclick = function(){
6                    var request = new XMLHttpRequest();
7                    var method = "GET";
8                    var url = this.href;
9
10                    request.open(method,url);
11                    request.send(null);
12
13                    request.onreadystatechange = function () {
14                        if(request.readyState == 4){
15                            if(request.status ==200 || request.status ==304){
16                                //1结果为xml格式，须要通过responseXML来获取
17                                var result = request.responseText;
18                                var object = eval("("+ result +")");
19                                //2 结果不能直接使用，必须先创建对应的接地节点，再把节点加到 #details
20                                //目标格式是
21                                //<h2><a href = "mailto:andy@clearleft.com">Andy Budd</a></h2>
22                                // <a href = "http://andybudd.com">http://andybudd.com</a>
23                                var name = object.person.name;
24                                var website = object.person.name;
25                                var email = object.person.email;
26
27                                var aNode = document.createElement("a");
28                                aNode.appendChild(document.createTextNode(name));
29                                aNode.href = "mailto:" +  email;
30
31                                var h2node = document.createElement("h2");
32                                h2node.appendChild(aNode);
33
34                                var aNode2 = document.createElement("a");
35                                aNode2.appendChild(document.createTextNode(website));
36                                aNode2.href = website;
37
38                                var detailsNode = document.getElementById("details");
39                                detailsNode.innerHTML = "";
40                                detailsNode.appendChild(h2node);
41                                detailsNode.appendChild(aNode2);
42                            }
43                        }
44
45                    }
46                    return false;
47                }
48            }
49        }
50    </script>

1<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
2    pageEncoding="ISO-8859-1"%>
3<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4<html>
5<head>
6<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
7<title>Insert title here</title>
8<script src = "scripts/jquery-3.3.1.js"></script>
9<script>
10    $(function(){
11        $("a").click(function(){
12            //使用load 方法处理ajax
13            var url = this.href;
14            var args = {"time":new Date()};
15            $("#content").load(url,args);
16            
17            return false;
18        });
19    })
20</script>
21<body>
22</head>
23
24    <a href = "helloAjax.txt">HelloAjax</a>
25    <div id = "content"></div>
26</body>
27</html>

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6    <script type = "text/javascript" src="../scripts/jquery-3.3.1.js"></script>
7     <script>
8        $(function(){
9            $("a").click(function(){
10                var url = this.href + " h2 a";//选择器 第一个空格 第二个空格代表的意义
11                　　　　　　　　　　//任何一个 html 节点都可以使用load 方法来加载ajax 结果将直接插入html节点中　　　　　　　　　　var args = {"time":new Date()};
12                $("#details").load(url,args);
13                
14                return false;
15            });
16        })
17    </script>
18</head>
19<body>
20    <h1>People</h1>
21    <ul>
22        <li><a href=" files/andy.html">andy</a></li>
23        <li><a href=" files/jeremy.html">jeremy</a></li>
24        <li><a href=" files/richard.html">richard</a></li>
25    </ul>
26    <div id="details"></div>
27</body>
28</html>
29
30<!DOCTYPE html>
31<html lang="en">
32<head>
33    <meta charset="UTF-8">
34    <title>Title</title>
35      <script type = "text/javascript" src="../scripts/jquery-3.3.1.js"></script>
36     <script>
37        $(function(){
38            $("a").click(function(){
39                var url = this.href ;
40                var args = {"time":new Date()};
41                //url:
42                //args:json格式
43                //function:回调函数 当响应函数结束的时候，回调函数被触发，响应结果在data中
44                $.get(url,args,function(data){
45                        var name = $(data).find("name").text();
46                        var email = $(data).find("email").text();
47                        var website = $(data).find("website").text();
48                    });
49                    
50                    $("#details").empty()
51                                 .append("<h2><a href = "mailto:"+ email +"">"+ name +"</a></h2>")
52                                 .append("<a href = ""+ website +"">"+ website +"</a>");
53                return false;
54            });
55        })
56    </script>
57</head>
58<body>
59    <h1>People</h1>
60    <ul>
61        <li><a href=" files/andy.xml">andy</a></li>
62        <li><a href=" files/jeremy.xml">jeremy</a></li>
63        <li><a href=" files/richard.xml">richard</a></li>
64    </ul>
65    <div id="details"></div>
66</body>
67</html>
68
69<!DOCTYPE html>
70<html lang="en">
71<head>
72    <meta charset="UTF-8">
73    <title>Title</title>
74    <style>
75        div {
76            height: 100px;
77            width:500px;
78        }
79    </style>
80    <script type = "text/javascript" src="../scripts/jquery-3.3.1.js"></script>
81     <script>
82        $(function(){
83            $("a").click(function(){
84                var url = this.href ;
85                var args = {"time":new Date()};
86                //url:
87                //args:json格式
88                //function:回调函数 当响应函数结束的时候，回调函数被触发，响应结果在data中
89                $.getJSON(url,args,function(data){
90                    
91                        var name = data.person.name;
92                        var email = data.person.email;
93                        var website = data.person.website;
94                        
95                        $("#details").empty()
96                         .append("<h2><a href = 'mailto:"+ email +"'>"+ name +"</a></h2>")
97                         .append("<a href = ' "+ website +" '>"+ website +"</a>");
98                        
99                        });
100
101                
102                             
103                return false;
104            });
105        })
106    </script>
107</head>
108<body>
109    <h1>People</h1>
110    <ul>
111        <li><a href=" files/andy.json">andy</a></li>
112        <li><a href=" files/jeremy.json">jeremy</a></li>
113        <li><a href=" files/richard.json">richard</a></li>
114    </ul>
115    <div id="details"></div>
116</body>
117</html>

总结一下：

1.什么是Ajax？不用刷新页面，但可以和服务器进行通信的方式，使用Ajax的主要方式是XMLHttpRequest 对象。

2.使用 XMLHttpRequest 对象实现 Ajax（了解）

3.Ajax传输数据的三种方式

　　1）xml：笨重解析困难但是xml是通用的数据交换格式

　　2）html：不需要解析，可以直接接受到文档中。若仅仅更新一部分区域，可以考虑使用html，但是传输的数据有限不是很方便。且html代码须要拼接完成。

　　3）json：小巧，有面向对象的忒正，且有很多第三方的jar包可以把Java对象或者集合转化为json字符串。

4.使用 jQuery 完成 ajax 操作

　　1）load方法：可以用于html文档的元素节点，把结果直接加为对应节点的子元素，通常而言，load方法加载后的数据是一个html片段。

　　var $obj = ...

　　var url = ...

　　var args =( key , value )

　　$obj.load(url,args);

　　2)$.get ,$.post ,$.getJSON ：更加灵活，除去使用load方法的情况，大部分时候使用这三个方法。　　　　

　　基本的使用：

　　　　//url:ajax 请求的目标url

　　　　//args:传递的参数：JSON类型

　　　　//data:ajax 响应后的数据　可能是xml html json　

　　　　$.get( url , args , function(data){

　　　　} );

　　请求json数据

　　　　$.get( url , args , function( data ){

　　　　},"JSON")

　　　$.post( url , args , function( data ){

　　　　},"JSON")

　　$.getJSON( url , args , function( data ){

　　　　})

未完待续

AJAX学习

AJAX学习

评论区

相关推荐