码迷,mamicode.com
首页 > Web开发 > 详细

Ajax加载json与序列化

时间:2018-04-14 00:36:19      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:seo   ntb   eval   title   文件   http   asc   bsp   表示   

  json其实是JavaScript对象表示法,数据可以使用json来表示。它看起来非常像对象字面量语法,但它并不是对象。

  当json在服务和web浏览器之间传输的时候是以字符串形式来传送的,在将json对象转换成json字符串发送给服务器叫做序列化,在接受服务器发送过来的json字符串并且将其转换成json对象叫做反序列化。

  在JavaScript中有两种转换成json的方法:

  第一 eval()方法

var json = ‘[ { "name" : "卫庄", "age" : 20},{ "name" : "盖聂", "age" : 20},{ "name" : "谭慧东", "age" : 23}]‘; 
var box = eval(json);

  第二 JSON内建对象,但IE并不兼容,不过有大佬写了json2.js可以兼容IE,https://github.com/douglascrockford/JSON-js

  序列化方法: stringify()

var json = [ { name : "卫庄", age : 20},{ name : "盖聂", age : 20},{ name : "谭慧东", age : 23}];    //模拟json对象
var box = JSON.stringify(json);     //stringify 将JavaScript原生值转换为json格式值

  反序列化方法:parse()

var json = ‘[ { "name" : "卫庄", "age" : 20},{ "name" : "盖聂", "age" : 20},{ "name" : "谭慧东", "age" : 23}]‘;  //模拟获取json格式
var box = JSON.parse(json);      //parse 将json转换为JavaScript原生值。

  下面是ajax加载json

// json文件text.json
{
"events" : [ { "location" : "San Francisco, CA", "date" : "May 1", "map" : "img/001.jpg" }, { "location" : "Austin, TX", "date" : "May 15", "map" : "img/002.jpg" }, { "location" : "New York, NY", "date" : "May 30", "map" : "img/003.jpg" } ] }
//js代码
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘);  //获取ajax对象 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200){  //响应成功后 var responseObject = JSON.parse(xhr.responseText);  //获取的json字符串转换成json对象 var content = ‘<div class="header">‘;  //将对象结合标签对 转换HTML格式 for (var i = 0; i < responseObject.events.length; i++){ content += ‘<div class="date">‘; content += ‘<div class="image">‘; content += ‘<img src="‘ + responseObject.events[i].map + ‘" class="image‘ + (i+1) + ‘">‘; content += ‘</div>‘; content += ‘<p>‘ + responseObject.events[i].location + ‘</p>‘; content += ‘<span>‘ + responseObject.events[i].date + ‘</span>‘; content += ‘</div>‘; } content += ‘<div>‘; document.getElementById(‘container‘).innerHTML = content;  //使用innerHTML的赋值方式,将其添加到页面中。 } } xhr.open(‘get‘,‘json/text.json‘,true);    //准备请求 xhr.send(null);  //发送请求

 

Ajax加载json与序列化

标签:seo   ntb   eval   title   文件   http   asc   bsp   表示   

原文地址:https://www.cnblogs.com/tanhuidong/p/8824784.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!