Ajax学习笔记

最新推荐文章于 2022-11-25 21:51:29 发布

Mr__欢先生

最新推荐文章于 2022-11-25 21:51:29 发布

阅读量427

点赞数

分类专栏： Java EE学习文章标签： url 异步 xml javascript ajax

本文链接：https://blog.csdn.net/Mr_Huan/article/details/70533764

版权

Java EE学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一.什么是Ajax?

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术.不通过刷新页面既可以与服务器进行通信。

1.XMLHttpRequest

1)open(“method”,”url”) 建立对服务器的调用
2)send(content)向服务器发送请求
3)onreadystatechange 每个状态改变都会触发这一事件，通常调用一个函数
4)readyState请求状态：0-未初始化，1-正在加载，2-已经加载，3-交互中，4-完成
5)responseTest：服务器响应
6)status:服务器的Http状态码

实例练习：

实现点击姓名链接显示链接到的文本内容到原页面，不跳转页面。

huan.html内容

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
姓名：马小欢
年龄：21
学历：大学本科
</body>
</html>

ming.html内容

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
姓名：小明
年龄：22
学历：大学本科
</body>
</html>

yun.html内容

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
姓名：赵云
年龄：25
学历：研究生
</body>
</html>

1.用原生方法实现：index_1.jsp代码：

<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 17-4-21
  Time: 下午12:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type='text/javascript' src='./js/jquery.min.js' charset='utf-8'></script>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {
            $("a").click(function () {
                var request = new XMLHttpRequest();
                var method = "GET";
                var url = this.href;

                request.open(method, url);
                request.send(null);
                request.onreadystatechange = function () {
                    if (request.readyState === 4) {
                        if (request.status === 200 || request.status === 304) {
                            $(".html_").html("");
                            $(".html_").append(request.responseText);
                        }
                    }
                }
                return false;
            });
        });
    </script>
    <title>Title</title>
</head>
<body>
<h1>学生信息：</h1>
<ul>
    <li><a href="./html_a/huan.html">马小欢</a></li>
    <li><a href="./html_a/yun.html">赵云</a></li>
    <li><a href="./html_a/ming.html">小明</a></li>
</ul>
<h1 class="html_"></h1>
</body>
</html>

结果：

点击小明名称

2.load方法：

load(url,[data],[callback]) 将远程的HTML插入到DOM中
url:请求页面的url地址
data:发送到key/value数据
callback:请求完成时的回调函数

2.load方法实现：index_1.jsp代码：

<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 17-4-21
  Time: 下午12:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type='text/javascript' src='./js/jquery.min.js' charset='utf-8'></script>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {
            $("a").click(function () {
              var url = this.href;
                var time ={"time":new Date()}
              $(".html_").load(url,time);
                return false;
            });
        });
    </script>
    <title>Title</title>
</head>
<body>
<h1>学生信息：</h1>
<ul>
    <li><a href="./html_a/huan.html">马小欢</a></li>
    <li><a href="./html_a/yun.html">赵云</a></li>
    <li><a href="./html_a/ming.html">小明</a></li>
</ul>
<h1 class="html_"></h1>
</body>
</html>

2. $.get$ .post方法：

2.get方法 .post方法实现：index_1.jsp代码：

<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 17-4-21
  Time: 下午12:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type='text/javascript' src='./js/jquery.min.js' charset='utf-8'></script>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {
            $("a").click(function () {
                var url = this.href;
                var time = {"time": new Date()}
                $.post(url, time, function (data) {
                    var name = $(data).find("name").text();
                    var age = $(data).find("age").text();
                    var email = $(data).find("email").text();
                    $(".html_").html("");
                    $(".html_").append("<h2>姓名：" + name + "性别：" + age + "邮箱：" + email);
                });
                return false;
            });
        });
    </script>
    <title>Title</title>
</head>
<body>
<h1>学生信息：</h1>
<ul>
    <li><a href="./xml_ajax/huan.xml">马小欢</a></li>
    <li><a href="./xml_ajax/yun.xml">赵云</a></li>
    <li><a href="./xml_ajax/ming.xml">小明</a></li>
</ul>
<h1 class="html_"> </h1>
</body>
</html>