简介

image-20200516180438430

Web1.0时代

web1.0时代是一个群雄并起，逐鹿网络的时代，虽然各个网站采用的手段和方法不同，但第一代互联网有诸多共同的特征，表现在技术创新主导模式、基于点击流量的盈利共通点、门户合流、明晰的主营兼营产业结构、动态网站。在WEB1.0上做出巨大贡献的公司有Netscape，Yahoo和Google。 Netscape研发出第一个大规模商用的浏览器，Yahoo的杨致远提出了互联网黄页， 而Google后来居上，推出了大受欢迎的搜索服务。

早期网站进行登陆操作，如果登陆失败，必须要刷新整个页面才能重新登陆，不点击提交按钮就不知道自己的密码输错了。

Web2.0时代

Web2.0是相对于Web1.0的新的时代。指的是一个利用Web的平台，由用户主导而生成的内容互联网产品模式，为了区别传统由网站雇员主导生成的内容而定义为第二代互联网，web2.0是一个新的时代。 [1] 抛开纷繁芜杂的Web 2.0现象，进而将其放到科技发展与社会变革的大视野下来看，Web 2.0可以说是信息技术发展引发网络革命所带来的面向未来、以人为本的创新2.0模式在互联网领域的典型体现，是由专业人员织网到所有用户参与织网的创新民主化进程的生动注释。

Web2.0，最重要的一个因素就是 Ajax，通过 Ajax，网站可以实现局部刷新。

JSON

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在 JS 语言中，一切皆对象

要求和语法格式

  • 对象表示为键值对
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组

JSON 和 JS对象

  • 实例：
1
2
3
4
//这是一个JS对象
var obj = {a: 'hello', b: 'world'};
//这是一个Json字符串，本质是一个字符串
var json = '{"a": "hello", "b": "world"}';
  • 相互转化
1
2
3
4
//使用JSON.parse()将JSON字符串转化为JS对象
var obj = JSON.parse('{"a": "hello", "b": "world"}');
//使用JSON.stringify()将JS对象转化为JSON字符串
var json = JSON.stringify({a: 'hello', b: 'world'});

@ResponseBody

在 SpringMVC 的使用中，我们经常会用到注解 @ResponseBody

@ResponseBody 注解的作用是 将 controller 的方法返回的对象通过适当的转换器转化为指定的格式之后，写入到 response 对象的 body 区，通常用来返回 JSON数据 或者是 XML，在使用此注解之后不会再走视图处理器。

简单来说，**@ResponseBody** 注解就是将后台的对象转换成 JSON字符串，返回到页面

  • 实例：

    1
    2
    3
    4
    5
    @RequestMapping("/login")
    @ResponseBody
    public User login(User user){
    	return user;
    }

    前台收到的数据:

    1
    '{"userName":"xxx","pwd":"xxx"}'

Ajax

简介

Ajax（Asynchronous JavaScript and XML，异步的 JavaScript 和 XML）

Ajax 是在无需重新加载整个网页的情况下，能够更新部分网页的技术。

  • 实例：

    image-20200517092228344

    在搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器返回一个搜索建议的列表

  • 传统的网页，想要更新内容或者提交表单，都需要重新加载整个页面。

  • 使用 Ajax 技术的网页，通过与后台服务器进行少量数据交互，就可以实现异步局部更新

使用 Ajax ，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的 Web 用户界面。

伪造Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script>
    window.onload = function(){
      let myDate = new Date();
      document.getElementById('currentTime').innerText = myDate.getTime();
    }

    function loadPage () {
      let targetURL = document.getElementById('url').value;
      document.getElementById('myFrame').src = targetURL;
    }
  </script>

</head>
<body>

<div>
  <p>请输入想要加载的地址：<span id="currentTime"></span></p>
  <p>
    <input type="text" id="url" value="http://www.baidu.com">
    <input type="button" value="提交" onclick="loadPage()">
  </p>
</div>

<div>
  <iframe id="myFrame" style="width: 100%;height: 500px">

  </iframe>
</div>

</body>
</html>

效果：

image-20200517094747102

jQuery 中的 Ajax

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

提示：如果没有 jQuery，AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

1
2
3
//URL：Controller请求（待载入页面的url）
//callback：回调函数
$.get(URL,callback);
jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

1
2
3
4
//URL：Controller请求（待载入页面的url）
//data：发送的数据，供后端接收
//callback：回调函数
$.post(URL,data,callback);
实例

实时监测用户名输入有误（不用点击提交）

1
2
3
4
5
6
7
8
9
10
11
12
13
@RequestMapping("/ajax")
@ResponseBody
public String ajax(String name, String pwd) {
    String msg = "";
    if (name != null) {
        if ("admin".equals(name)) {
            msg = "ok";
        } else {
            msg = "用户名有误";
        } 
    }
    return msg;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script>
    function f () {
      $.post({
        url: 'localhost:8080/ajax',
        data: {'name': $('#name').val()},
        success: function (data) {
          if (data.toString() == 'ok') {
            $('#userInfo').css('color', 'green')
          } else {
            $('#userInfo').css('color', 'red')
          }
          $('#userInfo').innerHTML = data
        }
      })
    }
  </script>

</head>
<body>
<p>
  用户名：
  <input type="text" id="name" onblur="f()">
  <span id="userInfo"></span>
</p>
<p>
  密码：
  <input type="text" id="pwd">
</p>

</body>
</html>

参考

狂神说Java：https://www.bilibili.com/video/BV1Pt411u7R3?t=34

百度百科：https://baike.baidu.com/item/web1.0

百度百科：https://baike.baidu.com/item/web2.0

百度百科：https://baike.baidu.com/item/JSON/2462549