两天学会ajax

====================================

第一天

================

1、ajax是什么?

 asynchronous javascript and xml
  ajax是一种用来改善用户体验的技术，其实质是利用
 浏览器内置的一个特殊的对象(XMLHttpRequest对象)
 向服务器发送请求，在发送请求的同时，浏览器并不会
 销毁当前页面，用户仍然可以对当前页面做其它操作。
 服务器发送回来的一般也不是一个完整的新的页面，而是
 部分的数据(文本或者xml文档),在浏览器端，可以利用这些
 数据部分更新当前页面。整个过程，页面无任何的刷新，不
 打断用户的操作。

2、如何获得XMLHttpRequest对象?

  因为XMLHttpRequest并没有标准化，所以，要区分浏览器。
  function getXhr(){
   var xhr = null;
   if(window.XMLHttpRequest){
    //非ie浏览器
    xhr = new XMLHttpRequest();
   }else{
    xhr = new ActiveXObject('Microsoft.XMLHttp');
   }
   return xhr;
  }

3、XMLHttpRequest对象(ajax对象)的重要属性

 1) onreadystatechange: 绑订一个事件处理函数,该函数用来
 处理readystatechange事件(当readyState属性值发生改
 变，就会产生该事件)。
 2) responseT ext:获取服务器返回的文本。
 3) responseXML:获取服务器返回的xml。
 4) readyState：ajax对象在与服务器进行通讯时的一种状态,
 有5个值，分别是0,1,2,3,4。比如值为4时，表示ajax对象已经
 成功地获取了服务器返回的所有的数据。
 5) status:状态码

4、编程步骤

 step1,获得ajax对象
  比如:
   var xhr = getXhr();
 step2,发送请求
  xhr.open(请求方式,请求地址,同步还是异步);
  注意：
   请求方式: 'get'或者'post'
   请求地址: 如果是get请求，需要将请求参数添加到
   请求地址的后面，
    比如:  'check_username.do?username=zs'
   同步还是异步: true表示异步,false表示同步(
   浏览器会锁定当前页面，用户不能做其它操作，需要
   等待服务器的响应发送回来)。
  xhr.onreadystatechange=f1;
  xhr.send(null); 
  step3,编程服务器端的代码，跟以前相比，有一点区别就是
  一般不需要返回完整的页面，只需要返回部分的数据。
  step4,编写事件处理函数
    function f1(){
     if(xhr.readyState == 4){
      var txt = xhr.responseText;
      更新操作...
     }
    }
    
 练习：  使用ajax技术对验证码的正确性进行验证。
 如果要发送post请求：
   xhr.open('post','check_username.do',true);
   //按照http协议要求，发送post请求时，要
   //添加一个content-type消息头，而默认情况下,
   //ajax对象并不会自动添加这个消息头，所以，
   //需要调用setRequestHeader方法来添加。 
   xhr.setRequestHeader('content-type',
   'application/x-www-form-urlencoded');
   xhr.send('username=' + $F('username')); 

  

5、编码问题

  (1)如果以get方式发送请求，浏览器内置的ajax对象
 会对请求地址中的中文数据进行编码，具体使用哪一种
 编码格式要看浏览器(ie使用的是gbk,firefox,chrome使用的
 utf-8)。服务器默认使用iso-8859-1去解码，所以会产生
 乱码问题。
  解决方式:
   step1, 修改服务器配置，让服务器使用指定的编码格式
  进行解码(只对get请求有效)，比如可以修改tomcat的
  server.xml, 添加  URIEncoding="utf-8"。
   step2,使用encodeURI函数对请求地址进行编码。
  encodeURI函数会对请求地址中的中文数据进行编码
 (使用utf-8这种编码格式)。 
  (2)如果以post方式发送请求，浏览器内置的ajax对象
 都会使用utf-8这种编码格式进行编码。我们只需要调用
 request.setCharacterEncoding("utf-8")就可以解决编码问题。
 

6、缓存问题

  当发送get请求时，
 ie内置的ajax对象会将服务器返回的结果缓存起来，如果
 请求地址不变，不再向服务器发请求。
  解决方式：
   方式一：发送post请求。
   方式二：在请求地址后面添加一个随机数。
   比如：
    'getNumber.do?' + Math.random()
====================================

第二天

================

1、json是什么?

 javascript object notation
  json技术借鉴了javascript创建对象的一种语法(javascript
 object notation),所以，将该技术命名为json。
 json是一种轻量级的数据交换技术标准。

 1)数据交换：

   将要交换的数据转换成一种与平台无关的标准的数据格式
  发送给另外一方。

 2)轻量级:

   相对于xml,使用json有两个优势，一是数据量更小，另外，
  解析速度更快。

2、基本语法

 (1)使用json表示一个对象

  {属性名称:属性值,属性名称:属性值...}  
  注意：
   属性名称必须用引号。
   属性值的数据类型可以是string,number,
   boolean,null,object。
   属性值如果是string，必须用引号。
  比如:
   {'name':'zs','age':22}

 (2)使用json表示一个对象组成的数组

  [{},{},{}...]
   比如:
    [{'name':'zs','age':22},{'name':'ww','age':22}]
 

3、如何使用json来做数据交换?

 (1) java对象转换成json字符串

  可以使用json官方提供的api

 (2)将json字符串转换成javascript对象

  可以使用prototype提供的evalJSON函数

  prototype是一个js文件，提供了很多有用的函数。

  1) $(id): 相当于document.getElementById(id);
  2) $F(id):相当于document.getElementById(id).value;
  3) $(id1,id2,id3...):使用id1,id2,id3...分别去查找对应的
  节点，返回由这些节点组成的数组。
  4) strip(): 除掉字符串两端的空格。
  5) evalJSON():将json字符串转换成javascript
  对象。
  
练习：
  热卖商品动态显示
 step1, 建表，并准备一些数据
 create table t_sale(
  id int primary key auto_increment,
  name varchar(20),
  qty int
 );
 insert into t_sale(name,qty) values('prod001',100);
 insert into t_sale(name,qty) values('prod002',20);
 insert into t_sale(name,qty) values('prod003',30);
 insert into t_sale(name,qty) values('prod004',110);
 insert into t_sale(name,qty) values('prod005',60);
 
 查询销量前三的商品
 select * from t_sale order by qty desc limit 3;
 step2, 写entity类 Sale
 step3, SaleDAO
   List<Sale> find(int top)  throws Exception;
 step4, ActionServlet
    调用find方法，并且将得到集合转换成一个
   json字符串
 step5, 测试ActionServlet
 step6, Sale.jsp
 

4、如何处理日期

 参见java栏目下json
 

5、发送同步请求

 (1)如何发送同步请求

  xhr.open('get/post','check_username.do',false);

 (2)同步请求的特点

  如果发送的是同步请求，浏览器不会向下执行以下
  的代码(send方法之后的代码)，会等待服务器响应，
  表现为当前页面被锁定了，用户不能做其它的操作。
  
 练习：
   使用ajax方式完成用户名检查、验证码检查操作，
  如果检查通不过，则不能提交。
====================================

================