关于AJAX与JSON的杂记

　　一、当网页需要有多个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来获取数据的。

　　四、XMLHttpRequest对象的属性与方法

　　属性：

onreadystatechange	制定readyState属性改变时的时间处理句柄，只写。
readyState	返回当前请求的状态，只读。
responseBody	将回应信息正文以unsigned byte未经解码的数组形式返回，只读。
responseStream	以Ado Stream对象的形式返回相应信息，只读。
responseText	将响应信息作为字符串返回，只读。
responseXML	将相应信息格式化为Xml Document对象并返回，只读。
status	返回当前请求的http状态码，只读。
statusText	返回当前请求的响应行状态，对应状态码，只读。

　　方法：

abort	取消当前请求
getAllResponseHeaders()	获取响应的所有http头，每个http头名称和值用冒号分割，并以\r\n结束。
getResponseHeader(bstrHeader)	从相应信息中获取指定的http头。
open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)	创建一个新的http请求，并指定此请求的方法，URL以及验证。最后两个用于填写服务器用户名和密码。
send(varBody)	发送请求到http服务器并接受回应。
setRequestHeader(bstrHeader, bstrValue)	单独指定请求的某个http头。

　　详解：

　　readyState的五种状态：

0: 请求未初始化，对象已建立，但是尚未初始化（尚未调用open方法）
1: 对象已建立，尚未调用send方法
2: send方法已调用，但是当前的状态及http头未知
3: 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误
4: 请求已完成，且响应已就绪，数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

　　status的所有代码

100:Continue
101:Switching protocols
200:OK
201:Created
202:Accepted
203:Non-Authoritative Information
204:No Content
205:Reset Content
206:Partial Content
300:Multiple Choices
301:Moved Permanently
302:Found
303:See Other
304:Not Modified
305:Use Proxy
307:Temporary Redirect
400:Bad Request
401:Unauthorized
402:Payment Required
403:Forbidden
404:Not Found
405:Method Not Allowed
406:Not Acceptable
407:Proxy Authentication Required
408:Request Timeout
409:Conflict
410:Gone
411:Length Required
412:Precondition Failed
413:Request Entity Too Large
414:Request-URI Too Long
415:Unsupported Media Type
416:Requested Range Not Suitable
417:Expectation Failed
500:Internal Server Error
501:Not Implemented
502:Bad Gateway
503:Service Unavailable
504:Gateway Timeout
505:HTTP Version Not Supported

posted @ 2015-01-06 17:46 光闪阅读(350) 评论(0) 编辑收藏举报

刷新页面返回顶部

光闪

关于AJAX与JSON的杂记

公告