AJAX随笔1

[1] AJAX简介
  　　> 全称： Asynchronous JavaScript And XML
  　　> 异步的JavaScript和XML
  　　> AJAX就是通过JavaScript向服务器发送请求，并接收响应，然后我们在通过DOM来修改页面。
  　　> XML指的是服务器响应的数据的格式。
  　　> 目前AJAX已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。
  
 [2] 同步和异步
  　　>  同步：
   　　　　当我们通过浏览器向服务器发送一个请求时，浏览器会刷新整个页面。
  　　> 异步：
   　　　　当我们向服务器发送请求时，不是刷新整个网页，而是只刷新网页的一部分。
 
 [3] XMLHttpRequest对象
  　　> 我们AJAX的所有操作都是围绕着XMLHttpRequest对象进行。
 　　 > 在XMLHttpRequest对象中封装发送给服务器请求报文，同时在服务器发回响应时，响应信息也会在对象中封装。
  　　> 如何获取XMLHttpRequest对象
   　　 　　- var xhr = new XMLHttpRequest();
 
 [4] 使用步骤
  　　1.创建XMLHttpRequest对象
   　　　　大部分比较新的浏览器都支持的方式（IE7以上）
    　　　　　　var xhr = new XMLHttpRequest();
   　　　　IE6以下的
    　　　　　　var xhr = new ActiveXObject("Msxml2.XMLHTTP");
   　　　　IE5.5以下的
    　　　　　　var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    
   　　　　通用的获取XMLHttpRequest对象的方法：
   

   //写一个获取XHR的方法
   function getXMLHttpRequest(){
    try{
     //大部分浏览器都支持的方式
     return new XMLHttpRequest();
    }catch(e){
     try{
      //IE6以下浏览器支持的方式
      return new ActiveXObject("Msxml2.XMLHTTP");
     }catch(e){
      try{
       //IE5以下的浏览器
       return new ActiveXObject("Microsoft.XMLHTTP");
      }catch(e){
       alert("你的浏览器不支持AJAX！");
      }
     }
    }
   }

  　　2.设置请求信息（请求地址，请求方式，请求参数）
   　　　　xhr.open(请求方式,请求地址);
   　　　　在发送post请求时，还需要设置一个请求头，如下：
    　　　　　　xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  
  　　3.发送请求
   　　　　xhr.send(请求体);
   　　　　get请求没有请求体，所以send中可以传null或什么都不传。
   　　　　post请求需要通过send来设置请求参数。
   
  
  　　　　4.接收响应信息

  //xhr绑定一个onreadystatechange响应函数，这个函数会在readyState属性发生改变时调用
   xhr.onreadystatechange = function(){
    //判断当前readyState是否为4 ， 且响应状态码为200
    if(xhr.readyState==4 && xhr.status==200){
     //读取响应信息，做相关操作。
     
     //如果信息为纯文本
     xhr.responseText
     
     //如果信息为XML
     xhr.responseXML
    }
   };

 [5] 响应数据的格式
 　　 - 响应一个XML
  　　- 当我们想通过servlet给ajax返回一个比较大量的信息，返回一个对象。
  　　- 返回 User ：username：sunwukong  age：18 gender：男
   　　　　username:sunwukgon,age:18,gender:男
 　　 - 我们可以通过一个XML格式来返回一个大量的信息
  　　　　  <user>
    　　　　<name></name>
    　　　　<age></age>
   　　　　 <gender></gender>
   　　　　 </user>
   
  　　- 响应一个JSON对象
   
2.JSON
 　　[1] JSON简介
  　　　　> JSON全称 JavaScript Object Notation
 　　　　 > 类似于JS中对象的创建的方法
  　　　　> JSON和XML一样，都是一种表示数据的格式
  　　　　> 但是JSON比XML的存储和解析性能要高的多，JSON要比XML高个30%左右。
 　　　　　　   <user>
 　　　　　　   <name>sunwukong</name>
    　　　　　　<age>18</age>
  　　　　　　  <gender>男</gender>
  　　　　　　  </user>
   
   　　　　　　{"name":"孙悟空","age":8,"gender":男}
  
 　　[2] JSON的格式
  　　　　> JSON字符串不方便阅读，但是传输性能好
　　　　  > XML方便阅读，但是传输性能差
 　　　　 > JSON的格式和JS对象类型，但是要求属性名必须使用双引号。不能使用单引号，也不能不写引号！
  
  
 　　　　 > JSON对象中实际就是一组一组的键值对的结构，
  　　　　　　 键和值使用:连接，多个键值对之间使用,分开，注意如果是最后一组键值对，则千万不要在加,.
  　　　　> {
  　　　　　　 "属性名1":属性值1,
  　　　　　　 "属性名2":属性值2,
   　　　　　　"属性名3":属性值3,
  　　　　　　 "属性名4":属性值4
   　　　　 }
  
  　　　　> JSON运行属性值的类型：
   　　　　　　1.字符串  2.数字  3.布尔   4.对象  5.数组  6.null
   
  　　　　> 数组：
   　　　　　　[属性1,属性2,属性3,属性4]
 
 　　[3] JS中使用JSON 
  　　　　JSON对象 --> JSON字符串
   　　　　JSON.stringify(对象)
  　　　　JSON字符串 --> JSON对象
  　　　　 JSON.parse(JSON字符串)
 
 　　[4] Java中使用JSON
 　　　　 > 目前Java中用的比较多的JSON解析工具：
  　　　　　　 json-lib -->  使用麻烦，解析性能最差
   　　　　　　Jackson --> 使用较麻烦，解析性能最好
   　　　　　　Gson --> 使用简单，解析性能中能
   　　　　　　　　 - Gson是谷歌出的一款JSON解析工具，使用简单，且性能较好。
  　　　　　　　　　　   Java对象 --> JSON字符串
  　　   　　　　　　　　JSON字符串 --> Java对象
  
3.通过jQuery实现AJAX
 　　> 使用get和getJSON都会有缓存问题，并且使用get方法不能传送较多的数据。
　　 > post方法不会有缓存的问题，所以我们开发时使用post方法较多。
 　　[1] post()方法 
  　　　　$.post(url, [data], [callback], [type])
  　　　　参数：
   　　　　　　url：发送AJAX的请求地址，字符串。
   　　　　　　data：发送给服务器的请求参数，JSON格式。
   　　　　　　callback：当前需要获取服务器发送的响应时，我们可以通过该回调函数。
    　　　　　　　　　　jQuery会将响应信息以回调函数的参数的形式返回
   　　　　　　type：响应信息的类型，字符串。一般两个常用值text、json
 
 　　[2] get()方法
  　　　　- get方法和post方法使用方式基本一致。
 
 　　[3] getJSON()方法
   　　　　getJSON(url, [data], [callback])
  　　　　 getJSON方法和get方法类似，只不过该方法默认的响应类型为JSON，不需要再手动指定。