java基础--ajax

1、ajax是什么?

     asynchronousjavascript and xml

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

2、如何获得XMLHttpRequest对象?

      因为XMLHttpRequest并没有标准化，所以，要区分浏览器。

      function getXhr(){

          varxhr = null;

          if(window.XMLHttpRequest){

              //非ie浏览器

              xhr= new XMLHttpRequest();

          }else{

              xhr= new ActiveXObject('Microsoft.XMLHttp');

          }

          returnxhr;

      }

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

         比如:

              varxhr = getXhr();

     step2,发送请求

         xhr.open(请求方式,请求地址,同步还是异步);

         注意：

              请求方式: 'get'或者'post'

              请求地址: 如果是get请求，需要将请求参数添加到

              请求地址的后面，

                   比如:  'check_username.do?username=zs'

              同步还是异步: true表示异步,false表示同步(浏览器会锁定当前页面，用户不能做其它操作，需要等待服务器的响应发送回来)。

         xhr.onreadystatechange=f1;

         xhr.send(null);

         step3,编程服务器端的代码，跟以前相比，有一点区别就是

         一般不需要返回完整的页面，只需要返回部分的数据。

         step4,编写事件处理函数

                   functionf1(){

                        if(xhr.readyState == 4){

                            vartxt = 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是什么?

     javascriptobject notation

         json技术借鉴了javascript创建对象的一种语法(javascript

     objectnotation),所以，将该技术命名为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,建表，并准备一些数据

     createtable t_sale(

         idint primary key auto_increment,

         namevarchar(20),

         qtyint

     );

     insertinto t_sale(name,qty) values('prod001',100);

     insertinto t_sale(name,qty) values('prod002',20);

     insertinto t_sale(name,qty) values('prod003',30);

     insertinto t_sale(name,qty) values('prod004',110);

     insertinto 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(inttop)  throws Exception;

     step4,ActionServlet

                   调用find方法，并且将得到集合转换成一个

              json字符串

     step5,测试ActionServlet

     step6,Sale.jsp

    

4、如何处理日期

     参见tts6

    

5、发送同步请求

     (1)如何发送同步请求

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

     (2)同步请求的特点

         如果发送的是同步请求，浏览器不会向下执行以下

         的代码(send方法之后的代码)，会等待服务器响应，

         表现为当前页面被锁定了，用户不能做其它的操作。

        

     练习：

              使用ajax方式完成用户名检查、验证码检查操作，

         如果检查通不过，则不能提交。