JSON和Ajax基础

Posted 2021-04-15 WR小问号

JSON

JSON 是纯文本

JSON 具有"自我描述性"（人类可读）

JSON 具有层级结构（值中存在值）

JSON 可通过 javascript 进行解析

JSON 数据可使用 AJAX 进行传输

JSON 对象使用在大括号({})中书写。

对象可以包含多个 key/value（键/值）对。

key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

key 和 value 中使用冒号(:)分割。

每个 key/value 对使用逗号(,)分割。

JSON对象

访问JSON对象

var myObj, x;myObj = { "name":"runoob", "alexa":10000, "site":null };x = myObj.name;//可以使用点号（.）来访问 JSON 对象的值：x = myObj["alexa"];//可以使用中括号([])来访问对象的值document.getElementById("demo").innerhtml = x;

循环对象

使用for-in来循环对象的属性

var myObj={"name":"runoob","alexa":1000,"site":null};for(x in my myObj)  document.getElementById("demo").innerHTML+=x+"<br>"

namealexasite

在for-in循环对象的属性时，使用中括号([])来访问属性的值

var myObj={"name":"runoob","alexa":1000,"site":null};for(x in myObj){  document.getElementById("demo").innerHTML+=myObj[x]+"<br>";}

嵌套JSON对象

myObj = {  "name":"runoob",  "alexa":1000,  "sites":{      "site1":"www.runoob.com",      "site2":"m.runoob.com",      "site3":"c.runoob.com" }}

使用点号(.)或者中括号([])来访问嵌套的JSON对象

x=myObj.sites.site1;//或者x=myObj.sites["site1"];

修改值

可以使用点号(.)和中括号([])来修改JSON对象的值

myObj.sites.site1 = "www.google.com";myObj.sites["site1"] = "www.google.com";

删除对象属性

可以使用delete关键字来删除JSON对象的属性

detele myObj.sites["site1"];

JSON数组

数组作为JSON对象

["Google","Runoob","Taobao"]

JSON对象中的数组

{"name":"网站",  "num":3,  "sites":["Google","Runnoob"]}x = myObj.sites[0];//我们可以用索引值来访问数组

循环数组

使用for-in来访问数组

for(i in myObj.sites){ x+=myObj.sites[i]+"<br>";}

嵌套JSON对象中的数组

JSON对象中数组可以包含另外一个数组，或者另外一个JSON对象

myObj = { "name":"网站", "num":3, "sites": [ { "name":"Google", "info":[ "android", "Google 搜索", "Google 翻译" ] }, { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] }, { "name":"Taobao", "info":[ "淘宝", "网购" ] } ]}

使用for-in来循环访问每个数组

for(i in myObj.sites){   x+="<h1>"+ myObj.sites[i].name +"</h1>";   for(j in myObj.sites[i].info){    x+=myObj.sites[i].info[j]+"<br>";   }}

修改数组值

使用索引值来修改数组值

myObj.sites[1]="Github";

删除数组元素

delete myObj.sites[1];

JSON和JS对象互转

JSON通常用于与服务器交换数据

在接收服务器数据时一般是字符串

我们可以使用JSON.parse()方法将数据转换为JavaScript对象

解析前要确保你的数据是标准的 JSON 格式，否则会解析出错。

要实现从JSON字符串转换为JS对象，使用JSON.parse()方法

var obj=JSON.parse('{"a":"hello","b":"world"}');

var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;

从服务端接收JSON数据

我们可以使用AJAX从服务器请求JSON数据，并解析为JS对象

<script>var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function(){ if(this.readyState ==4 &&this.status == 200)  myObj = JSON.parse(this.responseText);  document.getElementById("demo").innerHTML = myObj.name;}xmlhttp.open("get","/try/ajax/json_demo.txt",ture);xmlhttp.send();</script>

<p>查看JSON文件数据<a href="/try/ajax/json_demo.txt" target="_blank">json</a></p>

从服务端接收数组JSON数据

var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myArr = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myArr[1]; }};xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);xmlhttp.send();

<p>查看服务端数据 <a href="/try/ajax/json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>

异常

解析数据

JSON不能存储Date对象

如果需要存储Date对象，需要将其转换为字符串

之后再将字符串转换为Date对象

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';var obj = JSON.parse(text);obj.initDate = new Date(obj.initDate);
document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;

Runoob创建日期: Sat Dec 14 2013 08:00:00 GMT+0800 (中国标准间)

可以启用JSON.parse的第二个参数reviver，一个转换结果的函数，对象的每个成员调用此函数

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';var obj = JSON.parse(text, function (key, value) { if (key == "initDate") { return new Date(value); } else { return value;}});
document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;//结果同上

要实现从JS对象转换为JSON字符串，使用JSON.stringify()方法

var json=JSON.stringify({a:'hello',b:"world");//json为字符串  我们可以将json发送到服务

JavaScript对象转换

var obj = {"name":"runoob","alexa":1000,"site":"www.runoob.com"};var myJSON = JSON.stringify(obj);document.getElementById('demo').innerHTML = myJSON;

JavaScript数组转换

可以将来JavaScript数组转换为JSON字符串

var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];var myJSON = JSON.stringify(arr);document.getElementById("demo").innerHTML = myJSON;//结果为["Google","Runoob","Taobao","Facebook"]

异常

解析数据

var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};var myJSON = JSON.stringify(obj);document.getElementById("demo").innerHTML = myJSON;//结果为{"name":"Runoob","initDate":"2020-05-23T14:28:20.962Z","site":"www.runoob.com"}

解析函数

JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。

我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来保留函数。

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};obj.alexa = obj.alexa.toString();var myJSON = JSON.stringify(obj);document.getElementById("demo").innerHTML = myJSON;//{"name":"Runoob","alexa":"function () {return 10000;}","site":"www.runoob.com"}

Ajax的应用场景

1. 页面上拉加载更多数据
   

2. 列表数据无刷新分页

3. 表单项离开焦点数据验证

4. 搜索框提示文字下拉列表

Ajax的运行环境

Ajax技术需要运行在网站环境中

Ajax的工作原理

服务器端响应的数据格式

在真实的项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面中。

在http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

JSON.parse()//将json字符串转换为json对象

请求报文

在http请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式

请求参数格式

1. application/x-www-form-urlencoded

name=zhangsan&age=20&sex=男

2.application/json

{name:'zhangsan',age:'20',sex:'男'}

在请求头中指定Content-Type属性的值是application/json，告诉服务器端当前请求参数的格式是json

JSON.stringify();//将json对象转换为json字符串

注意:get请求时不能提交json对象数据格式的，传统网站的表单提交也是不支持json对象数据格式的

获取服务器端的响应

Ajax状态码

在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码

():请求未初始化(还没有调用open())

1:请求已经建立，但是还没有发送(还没有调用send())

2:请求已经发送

3:请求正在处理中，通常响应中已经有部分数据可以用了、

4:响应已经完成，可以获取并使用服务器的响应了

xhr.readState//获取Ajax状态码

onreadystatechange事件

当Ajax状态码发生变化时将自动触发该事件