JavaScript学习笔记之JSON&Ajax

JSON

JSON定义

JSON就是一种类似XML的结构化的数据表示，本身就是一个字符串，但是它比XML更加轻便、速度更快、可读性更高，更容易使用JavaScript解析，但是没有XML描述性强。

JSON的数值分为：简单值（数字，字符串，布尔值，null）和数组以及对象。

JSON的使用方法    数组+对象

var em = ‘[

         {

         “name”:”LEE”,

         “age”:100

},{

         name”:”SUN”,

         “age”:500

}

]’

JSON的访问    通过数组的方式访问

alert(em[0].name);    //LEE

JSON的解析

eval(em)   不建议使用，因为这个方法本身不会判断解析内容的合法性

JSON.parse(em)    ES5提供的方法,将JSON数据解析成JavaScript可使用的数组

         JSON.parse(em,function(){})可接受第二个参数（选填），可以对返回的特定属性做一些操作，如下：

          json = JSON.parse(em,function(key,value){

              if(key =='name'){

                  return"Hello"+value;

              }else{

                  returnvalue;

              }

          });

          alert(json[0].name);    //HelloLEE

JSON的序列

stringify()    将JavaScript的对象数组转化成JSON的数据

     第一个参数（必填）：Javascript数组对象

              stringify(box);    //转化box对象

     第二个参数（选填）：指定转化的对象

              stringify(box,[‘name’,’age’]);     只转换指定的对象：name和age

              stringify(box,null);     转化所有

     第三个参数（选题）    增加缩进，增加可读性   可以是字符串和数字   通常使用4

              stringify(box,[‘name’,’age’],4);    带有缩进格式转化指定对象

返回指定JSON数据

toJSON()   优先级最高    返回指定对象的值，不包括对象名

var old = [

        {

            name:'lee',

            age:100,

            height:180,

            toJSON:function(){

                returnthis.name;

            }

        },

        {

            name:'sun',

            age:200,

            height:300,

            toJSON:function(){

                returnthis.name;

            }

        }

    ];

var newjson = JSON.stringify(old,['name','age'],4); 

//此时JSON.stringify的第二个参数是无效的

alert(newjson);    //只会返回lee sun

Ajax

异步加载

1、建立新的XMLHttpRequest对象    （IE6及以下不支持）

var XHR = createNew();

function createNew(){

if(window.XMLHttpRequest){

        return new XMLHttpRequest();

}else {

              //IE5、IE6

        return newActiveXObject("Microsoft.XMLHTTP");

    }

}

2、判断响应状态（异步加载）    HTTP和XHR对象的状态

XHR.onreadystatechange = function(){

if(XHR.readyState == 4 && XHR.status == 200){

          json =JSON.parse(XHR.responseText,function(key,value){

              if(key =='name'){

                  return"Hello"+value;

              }else{

                  return value;

              }

          });

          alert(json[0].name);

      }

}

 

服务器响应：status

responseText     响应数据

response XML    获取XML的响应数据，只有XML可以使用

status           响应HTTP的状态

statusText        HTTP状态的说明

 

XMLHttpRequest对象状态信息

0     请求未初始化

1     执行open()但是没有执行send()，服务器已经连接

2     执行了open()和send()，请求已接收

3     处理请求中

4     请求完毕

3、执行请求

准备请求，请求方式，文件位置（兼容），异步/同步

XHR.open("Get","demo.json?id="+Math.random(),true);

//因为IE浏览器本身在第一次向服务器请求完数据之后，之后的请求会直接在缓存中读取，使用Math.random()是清除IE缓存的办法

同步：false    必须在这个请求执行完之后才能执行其他任务

异步：true    同时触发，不会影响其他请求

 

发起请求想服务器发送，null--->Get请求（因为使用get方法请求是，向服务器发送的数据，可以添加到URL里）    String--->post请求的数据

XHR.send(null);    //使用get方法请求

XHR.send(“name=lee&age=100”);    //使用post方法请求

 

4、取消异步请求

abort()

5、HTTP头信息

响应头信息   ---   服务器返回的信息    可以读取不可以设置

         getAllResponseHeader()    //获取全部的响应信息

         getResponseHeader(“Content-Type”)     //获取指定的单个响应信息

 

请求头信息   ---    客户端发送的信息     可以设置不可以读取

         setRequestHeader(header,value);

1、GET和POST

GET：通过Get发起的请求可以通过URL添加信息   速度是post的两倍

         XHR.open(“Get”,”demo.json?name=bill&age=10”,true);

         // name=bill&age=10,就是发给服务器的信息

使用GET方法请求数据时有两点问题及解决方法

中文乱码问题：将所有文集的编码统一成UTF-8

特殊符号：使用encodeURLComponent()方法进行转码

 

POST：一般是Web表单提交数据  

         当使用post向服务器发送信息时，必须先将编码方式设置成URL编码

         XHR.open(“post”,”demo.json”,true);

         //设置编码格式

         XHR.setRequestHeader(“Content-type”,”application/X-WWW-form-orlenCoded”);

         //传递请求信息

         XHR.send(“name=bill&age=10”);

2、封装Ajax

因为Ajax本身有很多加载模式，包括加载方式的不同（同步、异步），以及请求的方式不同（post，get）如果当每次使用不同的方式加载数据都要重写代码的话，在一些复杂的情况下会添加很多工作量，并且是代码更加繁重，所以使用封装的方式将Ajax的使用方式封装在一个函数里，再根据不同的使用情况传入不同的参数即可。