欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Json格式和Ajax总结

程序员文章站 2022-06-28 13:17:47
Json格式和Ajax总结JSON Json可以理解成js对象的字符串表示法,它只是一种数据格式,不是编程语言,很多编程语言都有针对JSON的解析器语法(可以表示3种类型的值)简单值:eg:5 “Hello”,此时要注意JSON字符串必须使用双引号(单引号会导致语法错误)对象:(要求给属性加“”)var person = {name: "Nicholas",age: 29};//JS{"name": "Nicholas","age": 29}//JSON与 Java...

Json格式和Ajax总结

JSON

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

语法(可以表示3种类型的值)

Json格式和Ajax总结

  • 简单值: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() ,序列化该对象的顺序如下:
    Json格式和Ajax总结

其中的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格式和Ajax总结
  • 服务器响应的数据格式

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

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 对象的属性:
    Json格式和Ajax总结

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

  • 异步则可以检测 XHR 对象的 readyState 属性,该属性表示请求响应过程的当前活动阶段。这个属性有一些可取的值:
    Json格式和Ajax总结

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

  • HTTP头部信息(在发送 XHR 请求的同时,还会发送下列头部信息)
    Json格式和Ajax总结

(可以在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);
进度事件

Json格式和Ajax总结

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

相关标签: javascript