JSON

lovesaxphone的专栏(2)

字号+ 作者:H5之家 来源:H5之家 2015-10-20 13:55 我要评论( )

将 JSON 数据发给服务器的最简单方法是将其转换成文本,然后以名称/值对的值的方式进行发送。请务必注意,JSON 格式的数据是相当长的一个对象,看起来可能会如清单 1 所示: 清单 1. JSON 格式的简单 JavaScript 对

将 JSON 数据发给服务器的最简单方法是将其转换成文本,然后以名称/值对的值的方式进行发送。请务必注意,JSON 格式的数据是相当长的一个对象,看起来可能会如清单 1 所示:
清单 1. JSON 格式的简单 JavaScript 对象
               
var people =  { "programmers": [    { "firstName": "Brett", "lastName":"McLaughlin",
"email": "brett@newInstance.com" },    { "firstName": "Jason", "lastName":"Hunter",
"email": "jason@servlets.com" },    { "firstName": "Elliotte", "lastName":"Harold",
"email": "elharo@macfaq.com" }   ],  "authors": [    { "firstName": "Isaac",
"lastName": "Asimov", "genre": "science fiction" },    { "firstName": "Tad",
"lastName": "Williams", "genre": "fantasy" },    { "firstName": "Frank",
"lastName": "Peretti", "genre": "christian fiction" }   ],  "musicians": [   
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },  
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }   ]  }
 
如果要以名称/值对将其发送到服务器端,应该如下所示:

var url = "organizePeople.aspx?people=" + people.toJSONString();
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updatePage;
xmlHttp.send(null);

存在一个问题:在 JSON 数据中会有空格和各种字符,Web 浏览器往往要尝试对其继续编译。要确保这些字符不会在服务器上(或者在将数据发送给服务器的过程中)引起混乱,需要在 JavaScript escape() 函数中做如下添加:

var url = "organizePeople.aspx?people=" + escape(people.toJSONString());
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);

该函数可以处理空格、斜线和其他任何可能影响浏览器的内容,并将它们转换成 Web 可用字符(比如,空格会被转换成 %20,浏览器并不会将其视为空格处理,而是不做更改,将其直接传递到服务器)。之后,服务器会(通常自动)再把它们转换回它们传输后的本来 “面目”。

这种做法的缺点有两个:
在使用 GET 请求发送大块数据时,对 URL 字符串有长度限制。虽然这个限制很宽泛,但对象的 JSON 字符串表示的长度可能超出您的想象,尤其是在使用极其复杂的对象时更是如此。
在跨网络以纯文本发送所有数据的时候,发送数据面临的不安全性超出了您的处理能力。
简言之,以上是 GET 请求的两个限制,而不是简单的两个与 JSON 数据相关的事情。在想要发送用户名和姓之外的更多内容,比如表单中的选择时,二者可能会需要多加注意。若要处理任何机密或极长的内容,可以使用 POST 请求。

----利用 POST 请求发送 JSON 数据

当决定使用 POST 请求将 JSON 数据发送给服务器时,并不需要对代码进行大量更改,如下所示:

var url = "organizePeople.php?timeStamp=" + new Date().getTime();
request.open("POST", url, true);
request.onreadystatechange = updatePage;
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send(people.toJSONString());

使用 POST 而非 GET 打开,Content-Type 头被设置为让服务器预知它能得到何种数据。在这种情况下,即为 application/x-www-form-urlencoded,它让服务器知道现在发送的是文本,正如它从常规的 HTML 表单中得到的一样。
另一个简单提示是 URL 的末尾追加了时间。这就确保了请求不会在它第一次被发送后即缓存,而是会在此方法每次被调用后重新创建和重发;此 URL 会由于时间戳的不同而稍微有些不同。这种技巧常被用于确保到脚本的 POST 每次都会实际生成新请求且 Web 服务器不会尝试缓存来自服务器的响应。

 

 

 

 

 

处理的最后一步是把在客户端把 JSON 数据变成 JavaScript 对象。这可以通过对 eval() 的简单调用实现,这个函数可以即时地解释包含 JavaScript 表达式的字符串。清单 11 把 JSON 响应转变成 JavaScript 对象图

var jsonExpression = "(" + req.responseText + ")";
var customer = eval(jsonExpression);
// Find name of first item in customer's last order
var lastOrder = customer.orders[customer.orders.length-1];
var name = lastOrder.items[0].name;

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 常见的java代码转换成json

    常见的java代码转换成json

    2016-01-27 17:01

  • xiaohui的专栏

    xiaohui的专栏

    2016-01-16 16:26

  • 聊聊前端和后台的数据交互与协议

    聊聊前端和后台的数据交互与协议

    2016-01-03 12:25

  • harryxlb的专栏

    harryxlb的专栏

    2015-11-16 15:56

网友点评