JavaScript异步Ajax与json

一 　　JSON

　　JSON的全称是JavaScript Object Notation（js对象表示法），它是一种存储和交换文本信息的语法，主要用于序列化对象、数组、字符串、Boolean、数字和null。JSON以纯文本形式存储数据。

 

　　1，  JSON语法和数据类型

　　JSON可以支持以下六种数据类型：对象、数组、字符串、Boolean、数字和null。

　　JSON采用JavaScript语法，所以JSON表示数组，对象等和JavaScript完全一样。大括号保存对象，方括号保存数组。

唯一的区别是JSON只支持双引号，所以在JSON文件中表示字符串必须使用双引号，并且对象的键也需要用双引号包裹。

　　JSON文件的后缀名是.json。

 

2，  JSON对象的方法

　　在JavaScript中，你可以给JSON对象外添加一对单引号，以字符串形式来表示JSON对象。

　　JSON.parse方法：将JSON数据转化为JavaScript对象。

1 var myJson = '{"name" : "ren","age" : 12}';

2 var myObj = JSON.parse(myJson);

3 console.log(myObj);//{name:"ren",age:12}

　　JSON.stringify方法：将JavaScript对象转换成JSON字符串。

1 var myObj = {

2     name:'ren',

3     age:12

4 };

5 var myJson = JSON.stringify(myObj);

6 console.log(myJson);//"{"name":"ren","age":12}"

 

　　注意：如果服务器返回的是字符串类型数据，JavaScript可以用一个变量接受它，并且能直接使用它。如果服务器返回的是JSON类型数据，请务必使用parse方法把它转换成JavaScript标准对象再对其进行操作。当然，要向服务器发送JSON数据，也应该使用stringify方法把JavaScript对象转换成JSON字符串再发送。

 

 

二 　　AJAX

　　1，  简介

　　1 var httpRequest = new XMLHttpRequest();

　　AJAX通过XMLHttpRequest对象与服务器进行通信。它可以发送和接受各种数据，包括文本文件，XML，HTML，JSON。这都不是它最吸引人的地方，AJAX迷人的地方在于它可以是异步的，这意味着它可以在不刷新页面的的情况下向服务器发送请求，并接受和处理服务器返回的信息，从而使我们能够在不刷新页面的情况下使用服务器上的数据修改当前页面。

 

　　2，  使用

 

　　第一步，我们应该先创建一个XMLHttpRequest对象。通过这个对象我们便有了与服务器通信的条件。

1 var httpRequest = new XMLHttpRequest();

　　注意，在老版本的IE浏览器（IE6及之前）中，应该使用ActiveXObject创建。　

1 var httpRequest = new ActiveXObject('Microsoft.XMLHTTP');

    第二步，在发送请求之前我们应该先定义好与服务器通信的方式并建立连接。　

1 httpRequest.open(method,url,async);

　

       　　method表示请求类型：get，post，head。

       　　get和post方式在传输上没有本质的区别，但在实际使用中有以下几点差异：

　　　　　　a)       get主要用户从服务器获取数据，post具备往服务器发送数据的能力，get方式的请求数据会在url中显示，而post不会，所以说post方式有潜在的危险，而get方式相对安全。

　　　　　　b)       get方式的数据能被缓存，能被保留在BOM对象history中，能添加页面标签。而post方式不行。

　　　　　    c)       get方式只允许发送ASCII字符，而post无限制。由于url长度的限制，get方式限制字节长度2048而post方式无限制。

 

 

       第三步，发送请求。

1 httpRequest.send();

如果在open中你选择了post方式，那么你可以在send方法中添加你想要向服务器发送的数据，否则即使添加了数据也无效。

1 httpRequest.send('{name:"ren",age:12}');

　　第四步，数据处理。

　　XMLHttpRequest对象有一个事件属性：onreadystatechange。你可以给该属性添加一个函数引用或一个匿名函数，用以处理从服务器返回的信息。

1 httpRequest.onreadystatechange = function (){};