文章目录
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>
2.4 测试
浏览器异步得到了数据!