关于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
关于AJAX与JSON的杂记的更多相关文章
- ASP.NET 5 - $.ajax post JSON.stringify(para) is null
JavaScript 代码: var para = {}; para.id = $("#ad-text-id").val(); para.title = $("#ad-t ...
- qt qml ajax 获取 json 天气数据示例
依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...
- ajax将json写到table中去
查询条件: <table style="width: 100%;border-collapse: collapse;" > <tr> <th styl ...
- ajax获取json对象
ajax获取json对象 ajax获取json数据,都是一个原理,设置response 的Content-Type:application/json,这样浏览器自动会解析为json对象 $result ...
- Ajax与json在前后端中的细节解惑
ajax请求JSON Thinkphp中对是否为Ajax的判断,在TP3.2开发手册中有这么一段:“需要注意的是,如果使用的是ThinkAjax或者自己写的Ajax类库的话,需要在表单里面添加一个隐藏 ...
- Ajax与Json的一些总结
Ajax与Json AJAX=异步javaScript 和XML AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不 ...
- ajax返回JSON时的处理方式
JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). json_encode() 该函数主要用来将数组和对象, ...
- JQuery处理json与ajax返回JSON实例
一.JSON的一些基础知识. JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). “[]”,标识数组,数组内 ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
随机推荐
- 微信H5支付 EasyWechat
其中如果想在一个laravel中使用多个不同主题的支付账户,可以在方法实例对象时,将对应的参数进行修改配置. 其中小程序支付,已得到验证. 1.公众号支付等资格申请 2.公众号对应的支付商户主体申请 ...
- emqtt 3 (我要subscribe 这个topic)
这一次,主要分析client subscribe 某个topic 的处理流程. 由protocol开始 是的,还是要从protocol开始,至于为什么,之前就说过了. subscribe 类型的pac ...
- FPGA应用及ARM-FPGA架构举例
FPGA的应用非常广泛,通信领域,视频图像处理领域,汽车电子领域,消费电子领域,工业领域,数据处理领域等,都能看到FPGA的身影. 在设计中,FPGA通常和其他处理IC架构,完成整个设计.FPGA-A ...
- 【转】使用Jmeter对Websocket进行压力测试
前段时间本着练习angularJS+requireJS的目的写了一个基于nodeJS和socket.io的聊天室,github地址为:https://github.com/towersxu/node- ...
- Excel开发学习笔记：根据工作表worksheet内容控制按钮的状态
开发环境基于VSTO,具体配置:visual studio 2010,VB .Net,excel 2007,文档级别的定制程序. 在Ribbon工具栏中有2个功能按钮,它们是否可用取决于workshe ...
- Cassandra学习五 使用Key的正确姿势
NoSQL一般是反范式的,比如提倡数据冗余,使得不至于写出非常复杂的SQL语句. Cassandra之中一共包含下面5中Key: Primary Key: 用来获取某一行的数据,可以是一列或多列 ...
- 第三章 深入分析Java Web中的中文编码问题
3.1 几种常见的编码格式 3.1.1 为什么要编码 一个字节 byte只能表示0~255个符号,要表示更多的字符,需要编码. 3.1.2 如何翻译 ASCII码:有128个,用一个字节的低7位表示. ...
- U-boot分析与移植（2）----U-boot stage1分析
我们要生成u-boot.bin文件,它首先依赖于很多.o文件和.lds链接脚本文件 我们只要找到对应的.lds链接脚本文件就可以分析u-boot的启动流程. 1.打开u-boot-1.1.6\u-bo ...
- Centos6.6安装Python3.5笔录
1.CentOS6.6 安装Python3.5 的依赖包 yum groupinstall "Development tools" yum install zlib-devel b ...
- Apache配置中ProxyPass与ProxyPassReverse及ProxyPassMatch的概述
apache中的mod_proxy模块主要作用就是进行url的转发,即具有代理的功能.应用此功能,可以很方便的实现同tomcat等应用服务器的整合,甚者可以很方便的实现web集群的功能. 例如使用ap ...