java中json和ajax,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`那么结果就不会包含该属性(见下面第二个例子)，因此可以通过返回 undefined 删除某个属性

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