Ajax (原理 +实践)

最新推荐文章于 2022-05-10 10:48:10 发布

码_小萌新

最新推荐文章于 2022-05-10 10:48:10 发布

阅读量173

点赞数

分类专栏： JAVAWeb

本文链接：https://blog.csdn.net/qq_40606330/article/details/108208047

版权

JAVAWeb 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Ajax (原理 +实践)

Asynchronous javaScript And Xml: 异步的javaScript 和 XML
AJAX是一种交互方式，异步加载，客户端和服务器的数据交互更新在局部页面的技术，不需要刷新整个页面

优点:
1、局部刷新，效率更高
2、用户体验更好

基于jQuery的Ajax

<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){//该函数默认最后执行即该页面对应的标签都包含
            var btn = $("#btn");
            btn.click(function(){
                $.ajax({
                    url:"/Ajax",
                    type:'post',//相当于用post提交
                    dataTyp:'text',
                    success:function(data){
                        alert(data);
                        var text = $('#t1');
                        text.before(data+"<br/>");
                    }//还有error，complete
                })
            });
        })
    </script>
</head>
<body>
<input id="t1" type="text" />
<input id = "btn" type="button" >
</body>
</html>

不能用表单提交请求，改用jQuery方式动态绑定事件来提交

Servlet不能跳转到Jsp(若跳转Ajax中获取的data就为跳转的页面)，只能用数据进行返回。

package com.Chase.My_Ajax;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/Ajax")
public class Ajax extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.getWriter().write("Hello world");
    }
}

传统的Web数据交互与 Ajax数据交互的区别:

客户端请求的方式不同:
传统：浏览器发送同步请求(form 、a)
Ajax：异步引擎对象(由js创建)发送异步请求
服务器响应的方式不同:
传统：响应一个完整Jsp页面(试图)
Ajax：局部响应
客户端处理方式不同
传统：需要等待服务器完成响应并且重新加载整个页面之后，用户才能进行后续的操作。
Ajax：动态更新页面中的局部内容，不影响用户的其他操作。

Ajax原理

在这里插入图片描述

基于jQuery的Ajax语法

$.ajax({属性})
常用的属性参数:
url：请求的后端服务地址
type：请求方式，默认get
data：请求参数(xxxx/login.jsp ?name=Chase)
dataType：服务器返回的数据类型，text/json(实际开发中用的最多的两个)
success：请求成功的回调函数
error：请求失败的回调函数
complete：请求完成的回调函数(无论成功或者失败，都会调用)

JSON
JavaScript Object Notation，一种轻量级数据交互格式，完成js与java等后端开发语言对象数据之间的转换。
客户端和服务端之间传递数据对象，需要JSON格式

对象实体（User）

package entity;

public class User {
    private  Integer id;
    private  String name;
    private  Double score;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Double getScore() {
        return score;
    }

    public void setScore(Double score) {
        this.score = score;
    }

    public User(Integer id, String name, Double score) {
        this.id = id;
        this.name = name;
        this.score = score;
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script>
        console.log($)
        $(function(){
            var btn = $("#btn");
            btn.click(function(){
                $.ajax({

                    url:"/test",
                    type:'post',
                    dataType:'json',//改为JSON格式
                    success:function(data){
                        alert(data.id);
                        var text = $('#t1');
                        text.before(data+"<br/>");
                    },
                    error:function(){
                        alert("xxx");
                    }
                })
            });
        })
    </script>
</head>
<body>
<input id="t1" type="text" />
<input id = "btn" type="button" >
</body>
</html>

Json_Servlet

@WebServlet("/test")
public class TestServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        User user = new User(555,"看啥",150.0);
        JSONObject jsonObject = JSONObject.fromObject(user); //json对象，需要导入json包
        resp.getWriter().write(jsonObject.toString());
    }
}