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

关于AJAX与JSON的杂记

时间:2015-01-06 19:42:05      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

  一、当网页需要有多个XMLHttpRequest对象时,可以使用Callback 函数,callback 函数是一种以参数形式传递给另一个函数的函数。

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/ajax/test1.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通过 AJAX 改变内容</button>

</body>
</html>

  上例中,在myFunction()中调用loadXMLDoc函数,传递两个参数,一个是请求用的网址,另外一个是callback函数,用于在该XMLRequest响应状态改变时调用。该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同)。

  二、JSON: JavaScript Object Notation(JavaScript 对象表示法)

  JSON 是存储和交换文本信息的语法。类似 XML。

  JSON 比 XML 更小、更快,更易解析。JSON 是轻量级的文本数据交换格式。JSON 独立于语言,JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。JSON 具有自我描述性,更易理解。

  JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval() 函数,用 JSON 数据来生成原生的 JavaScript 对象。

  eval()函数可计算某个字符串,并执行其中的的 JavaScript 代码。

  一个简单的示例,读取创建JSON对象以及读取JSON对象中的数据。

<html>
<body>
<h2>在 JavaScript 中创建 JSON 对象</h2>

<p>
Name: <span id="jname"></span><br />
Age: <span id="jage"></span><br />
Address: <span id="jstreet"></span><br />
Phone: <span id="jphone"></span><br />
</p>

<script type="text/javascript">
var JSONObject= {
"name":"Bill Gates",
"street":"Fifth Avenue New York 666",
"age":56,
"phone":"555 1234567"};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jage").innerHTML=JSONObject.age
document.getElementById("jstreet").innerHTML=JSONObject.street
document.getElementById("jphone").innerHTML=JSONObject.phone
</script>

</body>
</html>
与XML相同处 与XML不同处
JSON 是纯文本 没有结束标签
JSON 具有“自我描述性”(人类可读) 更短
JSON 具有层级结构(值中存在值) 读写的速度更快
JSON 可通过 JavaScript 进行解析 能够使用内建的 JavaScript eval() 方法进行解析
JSON 数据可使用 AJAX 进行传输 使用数组,不使用保留字

  对于 AJAX 应用程序来说,JSON 比 XML 更快更易使用:

  使用 XML步骤:读取 XML 文档、使用 XML DOM 来循环遍历文档、读取值并存储在变量中。

  使用 JSON步骤:读取 JSON 字符串、用 eval() 处理 JSON 字符串。

  JSON 语法是 JavaScript 对象表示法语法的子集。JSON 语法规则:数据在名称/值对中、数据由逗号分隔、花括号保存对象、方括号保存数组。

  JSON 数据的书写格式是:名称/值对。

  名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值:"firstName" : "John",等价于javascript的:firstName = "John"。

  JSON 值可以是:数字(整数或浮点数)、字符串(在双引号中)、逻辑值(true 或 false)、数组(在方括号中)、对象(在花括号中)、null。

  JSON 对象在花括号中书写,对象可以包含多个名称/值对:{ "firstName":"John" , "lastName":"Doe" },等价于javascript的firstName = "John";lastName = "Doe"。

  在javascript中,创建JSON数组对象并访问数组对象的方式如下:

<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>First Name: <span id="fname"></span></p> 

<script>
var employees = [
{ "firstName" : "John" , "lastName" : "Doe" }, 
{ "firstName" : "Anna" , "lastName" : "Smith" }, 
{ "firstName" : "Peter" , "lastName" : "Jones" }, ];
employees[1].firstName="Jonatan";
document.getElementById("fname").innerHTML=employees[1].firstName;
</script>

</body>
</html>    

  JSON中包括数组的写法:

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

  JSON 文件的文件类型是 ".json",JSON 文本的 MIME 类型是 "application/json"。

  JSON的使用:JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 JSON 数据转换为 JavaScript 对象,然后在网页中使用该数据。

  下面通过解析一个JSON对象字符串来演示如何使用JSON对象。

  一个JSON字符串对象:

var txt = ‘{ "employees" : [‘ +
‘{ "firstName":"Bill" , "lastName":"Gates" },‘ +
‘{ "firstName":"George" , "lastName":"Bush" },‘ +
‘{ "firstName":"Thomas" , "lastName":"Carter" } ]}‘;

  单引号用于嵌套双引号。

  由于 JSON 语法是 JavaScript 语法的子集,JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中,这样才能避免语法错误:

  var obj = eval ("(" + txt + ")");

  在网页中使用 JavaScript 对象:

<html>
<body>
<h2>通过 JSON 字符串来创建对象</h3>
<p>
First Name: <span id="fname"></span><br /> 
Last Name: <span id="lname"></span><br /> 
</p> 
<script type="text/javascript">
var txt = {"employees":[ +
{"firstName":"Bill","lastName":"Gates" }, +
{"firstName":"George","lastName":"Bush" }, +
{"firstName":"Thomas","lastName":"Carter" }]};

var obj = eval ("(" + txt + ")");

document.getElementById("fname").innerHTML=obj.employees[1].firstName 
document.getElementById("lname").innerHTML=obj.employees[1].lastName 
</script>
</body>
</html>

  JSON 解析器:使用javascript中的eval() 函数,可编译并执行任何 JavaScript 代码。但是这隐藏了一个潜在的安全问题。

  使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本,而不会编译脚本。

  在浏览器中,这提供了原生的 JSON 支持,而且 JSON 解析器的速度更快。

  较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。

  JSON解析器用法:

<html>
<body>
<h2>通过 JSON 字符串来创建对象</h3>
<p>
First Name: <span id="fname"></span><br /> 
Last Name: <span id="lname"></span><br /> 
</p> 
<script type="text/javascript">
var txt = {"employees":[ +
{"firstName":"Bill","lastName":"Gates" }, +
{"firstName":"George","lastName":"Bush" }, +
{"firstName":"Thomas","lastName":"Carter" }]};

obj = JSON.parse(txt);

document.getElementById("fname").innerHTML=obj.employees[1].firstName 
document.getElementById("lname").innerHTML=obj.employees[1].lastName 
</script>
</body>
</html>

  三、JSONP 

  Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

  为什么我们从不同的域(网站)访问数据需要一个特殊的技术(JSONP )呢?这是因为同源策略。

  同源策略,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略。

  如客户想访问 : http://www.w3cschool.cc/try/ajax/jsonp.php?jsonp=callbackFunction。

  假设客户期望返回JSON数据:["customername1","customername2"]。

  真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

  在客户端是需要实现callbackFunction来获取数据的。

关于AJAX与JSON的杂记

标签:

原文地址:http://www.cnblogs.com/guangshan/p/4206646.html

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