【Ajax入门】01、Ajax概述与使用jQuery发送AJAX请求的示例

最新推荐文章于 2023-03-03 16:46:51 发布

MSC419

最新推荐文章于 2023-03-03 16:46:51 发布

阅读量817

点赞数

分类专栏： # Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/qq_38939822/article/details/121458015

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了AJAX的基本概念、应用场景、XML与JSON的关系以及AJAX的特点。通过示例展示了如何使用jQuery发送AJAX请求，包括创建JSON字符串、控制器处理和静态页面的实现，并提供了测试步骤。此外，还讨论了AJAX的优缺点，如无刷新通信、跨域问题和SEO不友好等。

摘要由CSDN通过智能技术生成

1 Ajax概述

https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX
https://www.w3school.com.cn/js/js_ajax_intro.asp

1.1 Ajax简介

AJAX 全称为Asynchronous JavaScript And XML，就是异步的JS 和XML
通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

1.2 Ajax应用

1.搜索引擎关键字提醒
在这里插入图片描述
2.注册页面提醒

3.京东页面按需加载

4.页面滚动条滚动到底之后加载新内容

1.3 XML

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和HTML 类似，不同的是HTML 中都是预定义标签，而XML 中没有预定义标签，
全都是自定义标签，用来表示一些数据。

比如说我有一个学生数据：
name = “孙悟空” ; age = 18 ; gender = “男” ;
用XML 表示：

<student>
	<name>孙悟空</name>
	<age>18</age>
	<gender>男</gender>
</student>

现在已经被JSON 取代了。

{"name":"孙悟空","age":18,"gender":"男"}

1.4 Ajax的特点

1.AJAX 的优点

可以无需刷新页面而与服务器端进行通信
允许根据用户事件来更新部分页面内容
例如：鼠标事件、键盘事件、表单事件、文档事件
有了这个特性，我们可以在用户的特定行为下发送请求

2.AJAX 的缺点

没有浏览历史，不能回退
存在跨域问题(同源)
默认不可以从a.com向b.com发送请求
SEO（搜索引擎优化）不友好
爬虫爬不到页面的数据

2 示例：使用jQuery发送AJAX请求

2.1 写getJSONString方法

虽然Ajax里的x代表xml，但是由于xml比较复杂，现在已经被JSON取代，异步请求的数据一般都是JSON（方便前端取值），我们要写一个方法把数据包装成JSON对象
1.导包

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.78</version>
</dependency>

2.写工具类的工具方法

//将数据包装成JSON对象
    public static String getJSONString(int code, String msg, Map<String,Object> map){
        JSONObject json = new JSONObject();
        json.put("code", code);
        json.put("msg", msg);
        if(map!=null){
            for(String key:map.keySet()){
                json.put("key", map.get(key));
            }
        }
        return json.toJSONString();
    }

    public static String getJSONString(int code, String msg){
        return getJSONString(code, msg, null);
    }

    public static String getJSONString(int code){
        return getJSONString(code, null, null);
    }

3.测试工具方法

@Test
    public void testGetJSONString(){
        String s1=CommunityUtil.getJSONString(0);
        System.out.println(s1);
        String s2=CommunityUtil.getJSONString(0,"操作成功");
        System.out.println(s2);
        Map<String, Object> map = new HashMap<>();
        map.put("name", "张三");
        map.put("age", 25);
        String s3=CommunityUtil.getJSONString(0,"操作成功",map);
        System.out.println(s3);
    }

在这里插入图片描述
成功将数据转成JSON字符串了！

2.2 Controller方法

//ajax示例
    @RequestMapping(path = "/ajax",method = RequestMethod.POST)
    @ResponseBody
    public String testAjax(String name,int age){
        System.out.println("name:"+name+";age:"+age);//代表处理数据的过程
        //异步返回
        return CommunityUtil.getJSONString(0, "操作成功！");
    }

2.3 静态页面

static/html下的demo-ajax.html
三个参数：1.要访问的路径；2.提交给服务器的数据；3.回调函数，当浏览器得到响应后调用该方法，data就是服务器返回的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试ajax</title>
</head>
<body>
    <input type="button" value="提交" onclick="send();">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script>
        function send(){
            $.post(
                "/community/demo/ajax",
                {"name":"张三","age":"25"},
                function (data){
                    console.log(typeof(data));
                    console.log(data);

                    data = $.parseJSON(data);
                    console.log(typeof(data));
                    console.log(data.code);
                    console.log(data.msg);
                }
            )
        }
    </script>
</body>
</html>