Json格式和Ajax总结

Json格式和Ajax总结

JSON

Json可以理解成js对象的字符串表示法，它只是一种数据格式，不是编程语言，很多编程语言都有针对JSON的解析器

语法（可以表示3种类型的值）

• 简单值：eg:5 “Hello”,此时要注意JSON字符串必须使用双引号（单引号会导致语法错误）
• 对象：（要求给属性加“”）

var person = {
name: "Nicholas",
age: 29
};//JS
{
"name": "Nicholas",
"age": 29
}//JSON

与 JavaScript 的对象字面量相比，JSON 对象有两个地方不一样。

• 1、没有声明变量（JSON 中没有变量的概念）。
• 2、没有末尾的分号（因为这不是 JavaScript 语句，所以不需要分号）

• 数组：与js数组字面量形式一样，只是没有变量和分号,当然数组和对象也可以结合起来，如下例：

[
{
"title": "Professional JavaScript",
"authors": [
"Nicholas C. Zakas"
],
edition: 3,
year: 2011
},
{
"title": "Professional JavaScript",
"authors": [
"Nicholas C. Zakas"
],
edition: 2,
year: 2009
}
]

对象和数组通常是 JSON 数据结构的最外层形式，利用它们能够创造出各种各样的数据结构

解析与序列化

与XML 数据结构要解析成 DOM 文档而且从中提取数据
极为麻烦相比，JSON 可以解析为 JavaScript 对象的优势极其明显

• JSON对象（两个方法）

早期用eval()

• 两个方法
  • stringify()：用于把
    JavaScript 对象序列化为 JSON 字符串
  • parse()//有点像python爬虫编写时的解析器，parse本身就是解析的意思//：把 JSON 字符串解析为原生 JavaScript 值
• 例子：

var book = {
title: "Professional JavaScript",
authors: [
"Nicholas C. Zakas"
],
edition: 3,
year: 2011
};
var jsonText = JSON.stringify(book);

保存在 jsonText 中的字符串结果：
{"title":"Professional JavaScript","authors":["Nicholas C. Zakas"],"edition":3,
"year":2011}

同样，可以使用
var bookCopy = JSON.parse(jsonText);
来创建与上面book类似的对象

• 序列化选项

（ JSON.stringify() 除了要序列化的 JavaScript 对象外，还可以接收另外两个参数，这两
个参数用于指定以不同的方式序列化 JavaScript 对象。第一个参数是个过滤器，可以是一个数组，也可
以是一个函数；第二个参数是一个选项，表示是否在 JSON 字符串中保留缩进。单独或组合使用这两个
参数，可以更全面深入地控制 JSON 的序列化——引用于《JavaScript高级语言程序设计》）

+ 过滤结果
	+ 如果过滤器参数是`数组`，那么 JSON.stringify() 的结果中将`只包含数组中列出的属性`
	+ 如果第二个参数是`函数`传入的函数接收两个参数，`属性（键）名和属性值`,这种情况如果函数返回`undefined`那么结果就不会包含该属性（见下面第二个例子），<font color="blue" >因此可以通过返回 undefined 删除某个属性</font>

var book = {
"title": "Professional JavaScript",
"authors": [
"Nicholas C. Zakas"
],
edition: 3,
year: 2011
};
var jsonText = JSON.stringify(book, ["title", "edition"]);

var book = {
"title": "Professional JavaScript",
"authors": [
"Nicholas C. Zakas"
],
edition: 3,
year: 2011
};
var jsonText = JSON.stringify(book, function(key, value){
switch(key){
case "authors":
return value.join(",")
case "year":
return 5000;
case "edition":
return undefined;
default:
return value;
}
});

• 字符串缩进(JSON.stringify()方法的第三个参数)
  • 1、如果参数是个数字，表示的是每个级别缩进的空格数
  • 2、如果参数是一个字符串，则这个字符串会被作为缩进字符

var jsonText = JSON.stringify(book, null, " - -");

{
--"title": "Professional JavaScript",
--"authors": [
----"Nicholas C. Zakas"
--],
--"edition": 3,
--"year": 2011
}

• 假设把一个对象传
  入 JSON.stringify() ，序列化该对象的顺序如下:
  

其中的toJson()方法 在JSON.stringify() 还是不能满足对某些对象进行自定义序列化的需求，所以toJSON() 可以作为函数过滤器的补充

• 解析选项
  • JSON.parse() 方法也可以接收另一个参数，该参数是一个函数，将在每个键值对儿上调用，这个函数叫做还原函数

同JSON.stringify()的函数相似，如果还原函数返回 undefined ，则表示要从结果中删除相应的键；如果返回其他值，则将该值插入到结果中

Ajax

先总结一下自己学的知识点，细讲看后面

• ajax的应用场景：
  + 1、页面上拉加载更多数据
  + 2、列表数据无刷新分页（即局部更新其他地方不刷新）
  + 3、表单项离开焦点数据验证（例如填写完一个空以后立马验证是否被注册过，避免界面跳转用户重新填写表单的情况）
  + 4、搜索框提示文字下拉列表

• ajax运行环境

  • 虽然是客户端js代码，但是需要运行在网站环境中才能生效，以localhost域名方式打卡页面,不能双击直接运行，将ajax卸写在html中，html放在静态资源文件夹中

• ajax实现步骤

  • 1、创建ajax对象：
    • eg:var xhr=new XMLHttpRequest();

  XMLHttpRequest()是内置构造函数，XML是服务器端和客户端传输数据的格式，现在将XML换成了json格式，httprequest是http请求的意思

  • 2、告诉Ajax请求地址及请求方式
    • xhr.open(请求方式,请求地址)
  • 3、发送请求
  • 4、获取服务器端给客户端的相应数据（要先添加事件处理函数）
    

• 服务器响应的数据格式

  • 在真实项目中，服务器端大多数情况下会以Json对象作为响应数据的格式，当客户端拿到响应数据时，要将JSon数据和HTML字符串进行拼接（在客户端做），然后将拼接结果显示在页面中
  • 在http请求与响应过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输，所以要调用JSON.parse()
    方法将json字符串转换成json对象，之后和html进行拼接，之后再用DOM方法将其显示到页面上
    

Ajax细讲

XMLHttpRequest 对象

• XHR的用法
  • open(发送的请求的类型
    （ “get” 、 “post” 等）,请求的 URL,表示是否异步发送请求的布尔值)
  • send() :接收一个参数即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入 null

xhr.open("get", "example.php", false);//启动一个针对 example.php 的 GET 请求

1、 URL
相对于执行代码的当前页面
2、调用 open() 方法并不会真正发送请求，而只是启动一个请求以备发送，send才是发送请求
3、ajax同步异步：异步处理呢就是通过事件触发到 ajax，请求服务器，在这个期间无论服务器有没有响应，客户端的其他代码一样可以运行。
同步处理：在上面同样处理的期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。

• 同步在收到响应后，响应的数据会自动填充 XHR 对象的属性:
  

要检查status属性，确认响应返回

• 异步则可以检测 XHR 对象的 readyState 属性，该属性表示请求响应过程的当前活动阶段。这个属性有一些可取的值：
  

只要 readyState 属性的值由一个值变成另一个值，都会触发一次 readystatechange 事件,上图也可以看到readyState 值为 4s时，所有数据已经准备好了

• HTTP头部信息（在发送 XHR 请求的同时，还会发送下列头部信息）
  

（可以在network点击事件可以看到headers头部信息）

• GET请求（所有名-值对
  儿都必须由和号（&）分隔）

xhr.open("get", "example.php?name1=value1&name2=value2", true);
function addURLParam(url, name, value) {
url += (url.indexOf("?") == -1 ? "?" : "&");
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}

下面是他的实例
var url = "example.php";
//添加参数
url = addURLParam(url, "name", "Nicholas");
url = addURLParam(url, "book", "Professional JavaScript");
//初始化请求
xhr.open("get", url, false);

• POST请求(与 GET 请求相比， POST 请求消耗的资源会更多一些。从性能角度来看，以发送
  相同的数据计， GET 请求的速度最多可达到 POST 请求的两倍)

以下情况中，请使用 POST 请求：
(1) 无法使用缓存文件（更新服务器上的文件或数据库）
(2) 向服务器发送大量数据（POST 没有数据量限制）
(3) 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

XMLHttpRequest 2 级

• FormData（可以参考https://blog.csdn.net/weixin_40979567/article/details/80407093）

使用 FormData 的方便之处体现在不必明确地在 XHR 对象上设置请求头部。XHR 对象能够识别传入的数据类型是 FormData 的实例，并配置适当的头部信息——《JavaScript高级程序设计》

• 创建了 FormData 的实例后，可以直接传给 XHR 的 send() 方法：

var xhr = createXHR();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("post","postexample.php", true);
var form = document.getElementById("user-info");
xhr.send(new FormData(form));

• 超时设定( timeout 属性，表示请求在等待响应多少毫秒之后就终止)
• overrideMimeType() 方法

用于重写 XHR 响应的 MIME 类型,通过调用 overrideMimeType() 方法，可以保证把响应当作 XML 而非纯文本来处理,不过调用它要在send()方法之前，才能保证重写

var xhr = createXHR();
xhr.open("get", "text.php", true);
xhr.overrideMimeType("text/xml");
xhr.send(null);

进度事件

本文地址：https://blog.csdn.net/Phoebe4/article/details/107549005