JavaScript之JSON&AJAX

　　今天为大家讲解JavaScript中非常流行的数据传输形式JSON和异步技术AJAX技术。

 

一 　　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对象。

var myJson = '{"name" : "ren","age" : 12}';
var myObj = JSON.parse(myJson);
console.log(myObj);//{name:"ren",age:12}

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

var myObj = {
    name:'ren',
    age:12
};
var myJson = JSON.stringify(myObj);
console.log(myJson);//"{"name":"ren","age":12}"

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

 

二 　　AJAX

　　1，  简介

　　AJAX的全称是Asynchronous JavaScript And XML（异步javascript和XML）。

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

　　2，  使用

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

var httpRequest = new XMLHttpRequest();

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

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

　　

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

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方式无限制。

　　　　不知道大家是否还记得前面的《JavaScript之本地数据存储》，里面在讲解location.hash时提到url的长度是由浏览器或服务器限制的，而不是javascript语言或通信协议本身限制的。忘记的朋友可以再回去看一下。

         　head和get方式差不多，唯一的区别是head只包含http报文的头信息，而不会有实际内容。常用来检测服务器上是否已经存在某些数据了。

         　url是请求的服务器地址，需要遵守同源策略。

         　async是一个布尔值，true表示异步，false表示同步（别用这个，否则可能会出现意料之外的结果）。

　　由于浏览器一般会先从缓存中读取数据，所以我们在使用get方式发送请求时，可以添加一个唯一ID让我们每次都直接从服务器获取数据：

httpRequest.open('get','url?=' + new Date().getTime());//时间戳
httpRequest.open('get','url?=' + Math.random());//随机数

　　请注意，如果您想要post数据，则可能必须设置请求的MIME类型。比如，你想要向表单一样post数据，那么你必须在open和send方法之间调用setRequestHeader方法（该方法用于设置请求的http头信息，两个参数，第一个属性名，第二个属性值）：

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//2.5步

　　关于http请求头信息，请看这里：https://baike.baidu.com/item/http请求头

　　

　　第三步，发送请求。

httpRequest.send();

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

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

　　

　　第四步，数据处理。

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

httpRequest.onreadystatechange = function (){};

　　另外XMLHttpRequest对象还有两个存储通信状态的属性：readyState和status（每当readyState的值改变时，都会触发上面的onreadystatechange事件），和两个存储接收内容的属性：responseText，responseXML。

         readyState表示请求状态：

                   0：请求未初始化，还没有调用open()；

                   1：已与服务器建立连接，刚调用了send()；

                   2：http请求已发送，send()执行完毕；

                   3：http请求处理中，服务器正在解析请求的内容；

                   4：请求已完成，内容解析完毕，响应已准备就绪。

         status表示响应状态，返回http状态码：

                   200：成功接受到服务器返回内容；

                   404：服务器未找到相关内容；

                   503：服务器不可用。

         responseText：解析为字符串类型的响应。

         responseXML：解析为DOM对象类型的响应

我们要想使用服务器返回的信息，需要先确保正确的拿到了这些信息，所以事件处理函数内部应该有检测机制：

if(httpRequest.readyState == 4 && httpRequest.status == 200){
    fnSuc(responseText);
}else{
    if(fnFail){
        fnFail(httpRequest.status);
    }
}

         并且，可以把相应的服务器响应信息当做参数传递进去。

　　

　　最后附上ajax函数的简单封装：

function ajax(method,url,Fnsucc,Fnfail){
    var httpRequest = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
    httpRequest.open(method,url,true);
    httpRequest.send();
    httpRequest.onreadystatechange = function (){
        if(httpRequest.readyState == 4){
        　　if(httpRequest.status == 200){
 8         　　　　FnSuc(httpRequest.responseText);//处理完成后的文件内容。
 9         　　}else{
        　　　　if(FnFail){
        　　　　　　FnFail(httpRequest.status);//根据http错误状态码，进行相应处理。
                }    
            }
        }
    }
}

 　　该函数旨在让我们理解Ajax的工作过程，可能并不能满足实际工作的需要。如果要在工作中使用，你还应该继续完善它的功能，比如send的参数，超时时间等。