关于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  光闪  阅读(280)  评论(0编辑  收藏  举报