JSON在Ajax中有什么用-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

JSON在Ajax中有什么用

这篇文章主要介绍了JSON在Ajax中有什么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联公司专注于前锋企业网站建设,响应式网站,电子商务商城网站建设。前锋网站建设公司,为前锋等地区提供建站服务。全流程定制网站制作,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务

虽然XML在Ajax运行中具有举足轻重的地位,但JavaScript开发人员很快就对它失去了兴趣。在JavaScript中操作XML存在严重的跨浏览器问题,而且从XML结构中提取数据也需要涉及遍历DOM文档,而这些操作都需要编写大量的代码。Douglas Crockford发明了一种叫JSON(JavaScript Object Notation)的数据格式却能够创建与XML相同的数据结构。JSON的基础是JavaScript语法中一个子集,特别是对象和数组字面量。JSON的设计意图是在服务器构建格式化数据,然后再将数据发送给浏览器。

由于JSON在JavaScript中相当于对象和数组,转换速度快,而且便于在JavaScript代码中访问,JSON在Ajax通信中越来越受开发人员的追捧。Web开发社区已经为几乎所有主流的语言都开发了JSON解析器和序列化器,使得通过服务器输出和使用JSON数据变得极为容易。

Douglas Crockford自己也维护着一个针对JavaScript的JSON序列化器/解析器,下载地址为http://www.json.org/js.html,可以去下载那个JavaScript文件,且该文件在所有浏览器都能正常使用。此外,IE8中包含了Crockford解析器的原生版本。

在Crockford的这个JSON库中,有一个全局对象,这个对象有两个方法:parse()和stringify()。其中,parse()方法接受两个参数:JSON文本和一个可选的过滤函数。在传入的文本是有效的JSON的情况下,parse()方法会返回传入数据的一个对象表示。下面是使用parse()方法的示例:

var object=JSON.parse("()");

与直接使用eval()不同的是这里不需要为传入的文本加圆括号。

第二个参数是一个函数,这个函数以一个JSON键和值作为参数。要想让作为参数传入的的键出现有结果对象中,该函数必须返回一个值。它的返回值将成为结果对象中与指定键关联的值,因此也就为我们重写默认的解析机制提供了机会。换句话说,在这个函数中针对某个键返回undefined,就会从结果对象中移除该键。如下面的例子所示:

var jsontext="{"\name\":\"WangGang\",\"age\":29,\"author\":true }";  var object=JSON.parse(jsontext,function(key,value){  switch(key){  case "age": return value+1;  case "author": return undefined;  default: return false;  }  });  alert(object.age) //30  alert(object.author) //undefined

在以上代码中,过滤函数会为每个"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请求取得以上数据,然后在客户端使用下列代码生成相应的

    元素:

    var xhr=createXHR();  xhr.onreadystatechange=function(){  if(xhr.readyState == 4){  if((xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304){  var contacts=JSON.parse(xhr.responseText);  var list=document.getElementById("contacts");  for(var i=0,len=contacts.length;i" + contacts[i].name + "";  list.appendChild(li);  }  }  xhr.open("get","addressbook.php",true);  xhr.send(null);  }  };

    以上代码从服务器取得了JSON字符串,然后将它解析成了JavaScript数组,得到数组后,通过迭代遍历其中的每个对象,很容易就可以将相应的值插入到DOM中。具体来说,

      元素会包含一些
    • 元素,而每个
    • 元素则会包含一个链接,点击可以向一个人发送电子邮件。

      JSON同样也是向服务器发送数据的浏览格式。发送数据时,一般会把JSON放到POST元素请求主体中,而JSON对象的stringify()方法正是为此而设计的。这个方法接受3个参数:要序列化的对象,可选的替换函数(用于替换未接受的JSON值)和可选的缩进说明符(可以是每个级别缩进的空格数,也可是用来缩进的字符)。默认情况下,stringify()返回未经缩进的JSON字符串,下面是一个例子:

      var contact={  name:"WangMeng",  email:"wangmeng@some-domain.com" };  var jsontext=JSON.stringify(contact);  alert(jsontext);

      这个例子中的警告框会显示下列未经缩进的字符串:
      (\"name\":\"wangmeng\",\"email\":\"wangmeng\":\wangment@some-domain.com\)

      由于并不是所有JavaSrcipt值都可以使用JSON表示,因此结果中只会包含那些正式得到支持的值。例如,函数和undefined值无法通过JSON表示,包含它们的任何键默认都将被移除。要改变这个默认的行为,可以在第二个参数的位置传入一个函数。在序列化过程 中每当遇到一个不支持的数据类型时,该函数就会在被序列化的对象中作用域中运用,其参数是相应的键和值。

      对于JSON支持的数据类型,序列化过程中不会调用这个函数,这些类型包括:字符串、数值、布尔值、null、对象、数组和Date。来看下面的例子:

      var jsontext=JSON.stringify([new Function()],function(key,value){  if(value instanceof Function){  return "(function)";  }else{  return value;  }  });  alert(jsontext); //"(function)"

      这个例子试图序列化一个包含函数的数组。当遇到函数值时,第二个参数(即过滤函数)会将它转换为字符串"(function)",该字符串将出现在最终结果中。

      使用POST请求并将JSON文本传递给send()方法,可以将JSON数据发送给服务器。来看下面的例子:

      var xhr=createXHR();  var contact={  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(contact));

      这个例子是要将新联系人信息保存到服务器,因此要将数据发送给addcontact.php文件。在根据新联系人信息构建好contact对象后,又将它序列化为JSON数据并传递给send()方法。服务器上的PHP页面负责将接受到的JSON数据解析回原来的格式,以便服务器端代码能够理解,同时还会向浏览器发送响应。

      感谢你能够认真阅读完这篇文章,希望小编分享的“JSON在Ajax中有什么用”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


      当前文章:JSON在Ajax中有什么用
      链接地址:http://kswsj.cn/article/pipiee.html

其他资讯