当前位置: 首页 > 科技观察

浅谈JSON在Ajax中的使用

时间:2023-03-18 13:23:53 科技观察

JSON是一种轻量级的数据交换格式。便于人类阅读和编写,也便于机器解析和生成。AJAX是一种用于创建更好、更快和更具交互性的Web应用程序的技术。之前也介绍过PHP语言中使用JSON的文章,大家也可以阅读参考。虽然XML在Ajax操作中发挥了关键作用,但JavaScript开发人员很快就对它失去了兴趣。在JavaScript中操作XML存在严重的跨浏览器问题,从XML结构中提取数据还涉及遍历DOM文档,这些操作需要编写大量代码。DouglasCrockford发明了一种称为JSON(JavaScript对象表示法)的数据格式,但可以创建与XML相同的数据结构。JSON基于JavaScript语法的一个子集,特别是对象和数组文字。JSON的设计意图是在将数据发送到浏览器之前在服务器上构建格式化数据。由于JSON相当于JavaScript中的对象和数组,转换速度快,在JavaScript代码中易于访问,因此JSON在Ajax通信中越来越受到开发者的追捧。Web开发社区已经为几乎所有主流语言开发了JSON解析器和序列化器,使得通过服务器输出和使用JSON数据变得极其容易。DouglasCrockford自己维护了一个JavaScript的JSONserializer/parser,下载地址是http://www.json.org/js.html,可以下载JavaScript文件,该文件在所有浏览器都可以正常使用。此外,IE8还包含原生版本的Crockford解析器。在这个来自Crockford的JSON库中,有一个全局对象有两个方法:parse()和stringify()。其中,parse()方法接受两个参数:JSON文本和一个可选的过滤函数。在传入文本是有效JSON的情况下,parse()方法返回传入数据的对象表示。以下是使用parse()方法的示例:varobject=JSON.parse("()");与直接使用eval()不同,不需要在传入文本中添加括号。第二个参数是一个以JSON键和值作为参数的函数。该函数必须为作为参数传入的键返回一个值,以显示在现有结果对象中。它的返回值将是与结果对象中指定键关联的值,从而使我们有机会覆盖默认的解析机制。换句话说,在此函数中为键返回undefined将从结果对象中删除该键。如下例所示:varjsontext="{"\name\":\"WangGang\",\"age\":29,\"author\":true}";varobject=JSON.parse(jsontext,function(key,value){switch(key){case"age":returnvalue+1;case"author":returnundefined;default:returnfalse;}});alert(object.age)//30alert(object.author)//undefined上面代码中,filter函数会将每个“age”键的值加1,去掉数据中的“author”键,并且按原样返回其他值。因此结果对象中的age属性值变成了30,但是没有author属性。该解析函数常用于处理服务器返回的数据。假设addressbook.php会返回如下格式的JSON数据:{{"name":"WangMeng","email":"wangmeng@some-domain-name.com"},{"name":"LinTao","email":"linTao@some-domain-name.com"},{"name":"Jim","email":"jim@some-domain-name.com"}}可以发送Ajax请求获取上面的数据,然后在客户端使用下面的代码生成对应的

    元素:varxhr=createXHR();xhr.onreadystatechange=function(){if(xhr.readyState==4){if((xhr.status>=200&&xhr.status<300)||xhr.status==304){varcontacts=JSON.parse(xhr.响应文本);varlist=document.getElementById("联系人");for(vari=0,len=contacts.length;i"+contacts[i].name+"";list.appendChild(li);}}xhr.open("get","addressbook.php",true);xhr.发送(空);}};以上代码服从服务器获取JSON字符串,然后将其解析为JavaScript数组。拿到数组后,遍历其中的每一个对象,就很容易将对应的值插入到DOM中。具体来说,
      元素将包含一些
    • 元素,每个
    • 元素将包含一个链接,单击该链接可以向某人发送电子邮件。JSON也是向服务器发送数据的浏览器格式。发送数据时,一般会将JSON放入POST元素的请求体中,JSON对象的stringify()方法就是为此设计的。此方法接受3个参数:要序列化的对象、一个可选的替换函数(用于替换不接受的JSON值)和一个可选的缩进说明符(可以是每个级别缩进的空格数,或用于缩进的字符)。默认情况下,stringify()返回未缩进的JSON字符串,这里是一个例子:varcontact={name:"WangMeng",email:"wangmeng@some-domain.com"};varjsontext=JSON.stringify(联系人);警报(jsontext);此示例中的警告框将显示以下未缩进的字符串:(\"name\":\"wangmeng\",\"email\":\"wangmeng\":\wangment@some-domain.com\)因为不是所有JavaSrcipt值都可以用JSON表示,只有那些官方支持的值才会包含在结果中。例如,函数和未定义的值不能用JSON表示,任何包含它们的键都会被默认移除。要更改此默认行为,可以将函数作为第二个参数传入。每当在序列化过程中遇到不支持的数据类型时,都会在被序列化对象的范围内调用该函数,其参数是对应的键和值。对于JSON支持的数据类型,在序列化过程中不会调用该函数,这些类型包括:String、Number、Boolean、null、Object、Array和Date。看下面的例子:varjsontext=JSON.stringify([newFunction()],function(key,value){if(valueinstanceofFunction){return"(function)";}else{returnvalue;}});alert(jsontext);//"(function)"此示例尝试序列化包含函数的数组。当遇到函数值时,第二个参数(过滤函数)会将其转换为字符串“(function)”,该字符串将出现在最终结果中。可以使用POST请求将JSON数据发送到服务器,并将JSON文本传递给send()方法。看下面的例子:varxhr=createXHR();varcontact={name:"wangmeng",email:"wangmeng@some-domain.com"};xhr.onreadystatechange=function(){if(xhr.readyState==4){if((xhr.status<=200&&xhr.status<300)||xhr.status==304){alert(xhr.responseText);}}};xhr.open("post","addcontact.php",true);xhr.send(JSON.stringify(联系人));本例是将新的联系人信息保存到服务器,所以要将数据发送到addcontact.php文件中。根据新的联系人信息构造联系人对象后,将其序列化为JSON数据传递给send()方法。服务器上的PHP页面负责将接收到的JSON数据解析回其原始格式,以便服务器端代码能够理解它,同时也向浏览器发送响应。本文地址:http://www.yiiyaa.net/1378【编者推荐】理解JSON:3分钟课程轻松搞定JSONP跨域原理及jQuery.getJSON用法使用PHP中的JSONJackson框架轻松实现转换JSONAjax和WEB服务数据格式:JSONJSONP