前端玩家之JSON/Ajax速通指南

作者: 赛博剑仙_李玄器 | 来源:发表于2019-10-15 11:14 被阅读0次

前端玩家之JSON/Ajax速通指南
Spring MVC Ajax Json交互配置
Spring MVC 接收参数整理(2)-接收来自Ajax的请求
前端性能优化指南
ajax传字符串数字springmvc接收
速通前端
axious
前端路由
axios
Ajax的跨域请求

JSON 是一种数据格式，不是编程语言，很多编程语言都有JSON 的解析器和序列化器。
JSON 里有1种简单，2种复杂数据类型的值：简单值和对象、数组

简单值：
- number、string、boolen、null
- JS字符串与JSON字符串最大的区别是，JSON字符串必须使用双引号，单引号会引发语法错误。
对象：
- 大括号末尾没有分号
- JSON中对象的属性名任何时候，都必须加双引号
- 与JS对象字面量比，没有声明变量（JSON中没有变量的概念）
数组：
- 对象和数组通常是JSON数据结构的最外层形式，利用它们可以创造出各种各样的数据结构。
- 无变量声明，无分号结尾，双引号字符串，undefined不识别

与XML数据结构要解析成DOM文档然后提取数据比，JSON可以解析成JavaScript对象，更方便。

JSON通常用于客户端和服务器交换数据。
接收到的服务器数据，一般是字符串格式。

JSON.parse( ) , 将JSON字符串解析为JavaScript值。
语法：JSON.parse(text[, reviver])
参数说明：
text：必须，一个有效的JSON字符串。
reviver：可选，一个转换结果的函数，将为对象每个成员调用此函数。

JSON.stringify( ),将JavaScript对象序列化为JSON字符串。
语法：JSON.stringify(value[, replacer [, space] ])
参数说明：
value：必须，将要序列化成一个JSON字符串的值
replacer：可选，过滤器作用，可以是数组也可以是函数
space：可选，表示是否保留缩进，如果是数值表示每个缩进有几个空格，最大为10.若是字符串，则用字符串替换缩进

AJAX的技术核心是XMLHttpRequest对象（简称XHR），XHR为向服务器发送请求和解析服务器响应，提供了流畅的接口，能以异步的方式从服务器获得更多信息。用户单击后，可以不必刷新页面也能获取新数据。即用XHR对象获取新数据，再通过DOM将新数据插入到页面中。
说白了，AJAX就是浏览器提供的一套API，可以通过JS调用，从而实现通过代码控制请求与响应，实现网络编程。

熟练使用XHR对象已经成为Web开发人员必须掌握的技能之一。

AJAX用法快速上手:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX 的快速上手（发送请求）</title>
</head>
<body>
    <script>
        //AJAX的技术核心是XMLHttpRequest对象
        
        //1. 安装浏览器（用户代理，帮助用户发送请求）
            //就类似于浏览器的作用，发送请求，接收响应。
        var xhr = new XMLHttpRequest()
        //2. 打开浏览器，输入网址
        xhr.open('GET', 'https://www.runoob.com/markdown/md-lists.html');
        //3. 敲回车，开始请求，等待响应
        xhr.send()
        //4. 看结果
    </script>
</body>
</html>
</html>

首先创建一个xhr对象，
var xhr = new XMLHttpRequest();

使用XHR对象时，调用的第一个方法是open( )，语法如下：
xhr.open("GET", "example.php", false);
接收三个参数，要发送的请求类型（"GET"、"POST"等），请求的URL，是否异步发送请求的布尔值。关于这行代码有2点注意：1、调用open()方法并不会真正发送请求，只是启动一个请求以备发送。2、只能向同一个域中，使用相同端口和协议的URL发送请求，如果URL与启动请求的页面有任何差别，都会引发安全错误。

要发送特定请求，必须调用send( )方法
xhr.open("GET", "example.txt", false);
xhr.send(null);
这里的send方法接收一个参数，即作为请求方发送的数据，如果不需要通过请求主体发数据，则需要传入null，因为这个参数对有些浏览器来说是必须的。调用send( )后，请求就会被分派到服务器。

XHR对象属性

如需要获取服务器的响应，请使用XHR对象的属性：
responseText: 获得字符串形式的响应数据。
可以这样使用：document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
responseXML: 获得XML形式的响应数据。

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性：
onreadystatechange：存储函数（或函数名）每当 readyState 属性改变时，就会调用该函数。

readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status：当 readyState 等于 4 且status为 200 时，表示响应已就绪：

200: "OK"
404: 未找到页面

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   }
}

同源策略是对XHR（HMLHttpRequest对象）的一个主要约束，“相同的域（域名），相同端口（http默认端口80），相同协议（http/https...）”。访问限制之外的资源，都会引发安全错误，除非采用被认可的跨域方法。解决方法有：CORS、图像Ping、JSONP。

strict adj.严格的
'use strict'; // 使用严格模式