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>"
name
alexa
site
在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的应用场景
页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表
Ajax的运行环境
Ajax技术需要运行在网站环境中
Ajax的工作原理
服务器端响应的数据格式
在真实的项目中,服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时要将JSON数据和HTML字符串进行拼接,然后将拼接的结果展示在页面中。
在http请求与响应的过程中,无论是请求参数还是响应内容,如果是对象类型,最终都会被转换为对象字符串进行传输。
JSON.parse()//将json字符串转换为json对象
请求报文
在http请求和响应的过程中传递的数据块就叫报文,包括要传送的数据和一些附加信息,这些数据和信息要遵守规定好的格式
请求参数格式
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功能。