Ajax详解

最新推荐文章于 2021-08-07 01:35:27 发布

发芽的枫叶

最新推荐文章于 2021-08-07 01:35:27 发布

阅读量272

点赞数

分类专栏： javaweb 文章标签： ajax javascript 异步

本文链接：https://blog.csdn.net/sunfengye/article/details/77468191

版权

javaweb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Ajax简介
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

下面通过代码来演示，看之前如果有点js，jquery，java基础，比较容易懂，，如果不懂java,jquery,js的我会编写注释

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<title>Insert title here</title>

<script type="text/javascript">

    function getValue() {
        $.get("AjaxShow",function(data,status){
            $('#t1').val(data);
          });
    }

</script>


</head>
<body>


    <%
    /*  统计访问次数 ，每次刷新就在原来的基础上加1  */
        Integer num = (Integer) application.getAttribute("num");
        if (num == null) {
            num = new Integer(1);
        } else {
            num++;
        }
        application.setAttribute("num", num);
        out.print("第" + num + "次访问");
    %>


    <div id="a" name="a">
        <input type="text" id="t1"> <input type="button"
            onclick="getValue()" value="ajax获取值">
    </div>

</body>
</html>

代码解释

<%
    /*  统计访问次数 ，每次刷新就在原来的基础上加1  */
        Integer num = (Integer) application.getAttribute("num");
        if (num == null) {
            num = new Integer(1);
        } else {
            num++;
        }
        application.setAttribute("num", num);
        out.print("第" + num + "次访问");
    %>

这段代码的含义是统计访问次数，每次刷新就在原来的基础上加1 ，并显示在页面中，当然可以把上面的jsp页面放置一个web项目中，然后再发布到tomcat中去演示
会发现每次页面刷新都会在原来的第” + num + “次访问基础上+1 ，现在看下面段代码

<input type="text" id="t1"> <input type="button"
            onclick="getValue()" value="ajax获取值">

这段代码的函数是点击按钮触发getValue()js函数，然后我们来看下getValue()函数的内容

function getValue() {
        $.get("AjaxShow",function(data,status){
            $('#t1').val(data);
          });
    }

这段代码是通过jquery来实现get请求，当然是通过Ajax方式实现,AjaxShow是请求的地址这里表示的是相对地址，data是响应的数据，status是响应的状态。我们来看服务器的代码是如果实现：

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.print("admin");
        out.flush();
        out.close();
    }

如上代码表示，直接返回admin文本

大致思路是

当我们点击按钮就会发起get请求向服务器要数据（ajax方式）
服务器接受请求响应文本是admin
在getValue函数接收到数据然后通过 $(‘#t1’).val(data);代码给赋值，在整个过程中服务器的数据到浏览器段，但是第” + num + “次访问的值，并没有+1,也就是体现Ajax不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

应用的案例比较多比如说，当光标离开输入框时，验证用户名是否存在，级联加载数据等。。

发芽的枫叶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax详解

Ajax简介 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。下面通过代码来演示，
复制链接

扫一扫