JSON和Ajax基础

Posted WR小问号

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JSON和Ajax基础相关的知识,希望对你有一定的参考价值。

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状态码发生变化时将自动触发该事件


以上是关于JSON和Ajax基础的主要内容,如果未能解决你的问题,请参考以下文章

html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

[vscode]--HTML代码片段(基础版,reactvuejquery)

JSON和Ajax基础

AJAX相关JS代码片段和部分浏览器模型

AJAX基础

ajax基础