（22）HTML5-web应用基础_html5 web应用-CSDN博客

本文链接：https://blog.csdn.net/zsc2014030403015/article/details/52423361

在HTML5游戏设计的web应用中，经常通过AJAX和JSON实现服务器与客户端的数据交换。现在举行一个结合AJAX和JSON应用于网上商城的范例：

玩家点击网上商城宝物的缩略图。

javascript通过AJAX将宝物ID传送给服务器端。

服务器收到ID，将产品数据（例如价格，功能）编码成JSON格式。

把JSON数据回传给客户端。

javascript收到数据，解码（decode）后将数据显示在网页上。

{XMLHttpReques}

XMLHttp是AJAX传输技术的核心，他是一组API函数，也是实现对网页某部分进行更新的关键方法，因此在使用AJAX是必须先声明XMLHttpRequest对象。

<html>
 <head>
     <meta charset="utf-8"/>
     <style>
     </style>
 </head>
 <body>
    <script >
        var xmlhttp;
        if(window.XMLHttpRequest){
            //code for IE7+,Firefox.Chrome,Opera,Safari
            xmlhttp=new XMLHttpRequest();
        }
        else {
            //code for IE6,IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
     </script>
 </body>
</html>

成功声明了XMLHttpRequest对象后，就可以调用对象的方法向服务器发出数据传输的请求，该请求由open（），send（）两个方法完成。

{open}

方法open的功能是用来初始化传输方式，也就是先设置传输过程所要使用的方式（method），存取文件的网址（url）以及同步或异步方式（async）。方法open的指令如下：

open（method，url，async）；

method：方式

方式的参数可选“GET”和“POST”两种，GET的使用方式简单，速度也较快，但在传输大量数据（POST没有传输量的限制）以及传输未知字符时，POST的表现更稳定。

url：目标网址

目标网址用来指定服务器上的文件位置，也就是数据所要传输的目标。其文件格式包括txt，xml，asp和php等。

async：同步或异步方式

同步或异步方式可输入bool值来确定，true代表异步方式，若要使用AJAX方式传输，则此参数必须设置为true；若使用同步传输方式，则设置为false。

{send}

当使用方法open将所有传输参数设置完成后，就可以通过方法send启动数据传送，方法send仅有一个参数“string”，只能使用POST传输才会用到，若使用GET传输则不需要填入任何参数。

send（string）；

当服务器请求送往服务器后，服务器会检测当前的请求处理状态，并且用readyState和status两个属性来指示出当前处理的进度。每次readyState的状态改变都会调用onreadystatechange中的函数。

{readyState}

存储XMLHttpRequest的处理状态，数值从0-5.

（0：请求未初始化，1：服务器连接已建立，2：请求已接收，3：请求处理中，4：请求已经完成且已经准备响应数据）

{staatus}

数值200（准备完成）及404（未找到页面）两种。

{onreadystatechange}

每次readyState状态改变就会执行此函数一次，可配合判断语句来处理每个状态所要执行的操作。

xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//服务器准备好响应数据后所要处理的操作
}
}

当前服务器准备好响应数据后，可以使用responseText或responseXML两种属性来获取服务器返回的信息。若是服务器的数据是以纯文本方式编码的，就使用responseText；若是以XML方式编码的，则使用responseXML。

结合服务器响应状态（readyState和status）的判断，编写的程序代码可以是：当服务器准备就绪时，获得服务器响应的文本数据然后显示在网页上。

xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

JSON属于数据以纯文本格式存储的一种方式，类似我们熟悉的XML，在XML中通过许多标签来结构化一连串的文本数据，而JSON只是简单通过中括号，大括号，逗号来区别数据结构，但是其小巧及易读的特性，非常适用于网络数据传输的领域。

冒号（键：值）

”姓名 “： “小陈”

“英文 “： 75

”数学 ”： 80

大括号（对象）

{”“姓名 “：”小陈“，” 英文 “：75，” 数学 “：80}

中括号（数组）

【20，30，40】

【小陈，75，80】

【{”姓名 “：”小陈“，“ 英文 ”：75，” 数学 “：80}，

{” 姓名 “：“ 小刘 ”，“ 英文 ”：88，“ 数学 ”：91}】

然而与对象不同的地方，数组内以逗号隔开的部分无法放入“键：值”的格式。也就是说我们不能用数组声明这样的字符串。

【“姓名”：“小陈”，“英文”：75，“数学”：91】

学会如何编辑JSON格式之后，接着就要使用javascript中的指令来声明JSON对象。

{JSON。stringify（）}

即使在javascript中以JSON格式声明了一个包含信息的字符串，javascript仍然只会把该字符串认作为一般的文本数据，因此必须通过JSON。stringify的转换，将字符串声明成JSON对象。

建立JSON对象的方法很简单。首先声明一个普通的字符串，字符串内容以JSON格式排列，如变量“info”。这里请特别注意，声明JSON格式字符串时，每一行要用“单引号”括起来“，代表纯文本变量，并在每一行的最后一个位置使用”+“号串连每个被换行的字符串；接着再生明一个变量json使用JSON。stringify来转换变量info，如此一来变量json就被生明成一个JSON格式对象，可通过AJAX方法执行传送到服务器的操作。

var info='{'+
"姓名":"小陈",' +
'"英文":75,'+
'"数学 ":80‘+
’}‘;
var json =JSON.stringify(info);

反过来说，当程序从服务器端收到JSON格式的对象，只能通过JSON。parse进行解析，就可以让jiavascript读懂JSON格式所保留下来的数据结构，之后就能像是读取XML标签一样，自由读取结构中任意一数值。

var json='{'+
'"姓名":"小陈",'+
'"英文“:75,'+
'"数学":80'+
'}';
var json = JSON.stringify(info);

经过JSON。parse的解析，虽然变量info已经是javascript的一个字符串，但是因为数据结构的特性已经被保留下来，所以我们可以通过以下指令来读取结构任一位置的数值。

info。姓名//小陈

info。英文//75

info。数学//80