Java学习--Ajax介绍及使用

1、使用Ajax

一、什么是ajax？

是一种用来改善用户体验的技术，本质上是利用浏览器提供的一个
     特殊对象(XMLHttpRequest对象，通常也能够称之为ajax对象)向
     服务器发送异步请求；服务器返回部分数据，浏览器利用这些数据
     对当前页面作部分更新；整个过程，页面无刷新，不打断用户的操做。
     注：
         异步请求，指的是，当ajax对象发送请求时，浏览器不会销毁
     当前页面，用户仍然能够对当前页面作其它操做

二、获取ajax对象

function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ //非ie浏览器 xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('MicroSoft.XMLHttp'); } return xhr; }

三、ajax对象的几个重要属性

onreadystatechange: 绑订事件处理函数，用来处理readystatechange
         事件。
         注：当ajax对象的readyState属性值发生了任何的改变，好比
         从0变成了1，就会产生readystatechange事件。
     readyState：有5个值(分别是0,1,2,3,4),用来获取ajax对象与服务
         器通讯的进展。其中,4表示ajax对象已经得到了服务器返回的所
         有的数据。
     responseText:得到服务器返回的文本数据。
     responseXML:得到服务器返回的xml数据。
     status:得到状态码。

四、编程步骤

step1. 得到ajax对象
         好比   var xhr = getXhr();
step2. 调用ajax对象的方法，发送请求
         方式一 get请求
         xhr.open('get','check.do?adminCode=king',true);
         xhr.onreadystatechange = f1;
         xhr.send(null);
         注:
             true: 异步 (浏览器不会销毁当前页面，用户仍然能够
                     对当前页面作其它操做)
             false:同步 (浏览器不会销毁当前页面,可是会锁定当前
                     页面，用户不可以对当前页面作任何操做)。
    

         方式二 post请求
                 xhr.open('post','check.do',true);
                 xhr.setRequestHeader('content-type',
                                  'application/x-www-form-urlencoded');
                 xhr.onreadystatechange = f1;   
                 xhr.send('adminCode=king');
         注(了解)：
             按照http协议要求，若是发送的是post请求，应该包含有
             content-type消息头，可是，ajax默认不会带这个消息头，
             因此，须要调用setRequestHeader方法来添加这个消息头。

            
     step3. 编写服务器端的程序
         注：不须要返回完整的页面，只须要返回部分数据。
     step4. 编写事件处理函数
         if(xhr.readyState == 4 &&
             xhr.status == 200){
             //ajax对象已经得到了服务器返回的全部数据，
             //并且服务器处理正确。
             var txt = xhr.responseText;
             页面更新...
         }

2、Ajax的使用问题

1. 编码问题  
(1)get请求
     1)为何会有乱码?
     ie浏览器提供的ajax对象，在发送get请求时，会对中文参数
     值使用"gbk"来编码，其它浏览器会使用"utf-8"来编码。服务器
     端默认会使用"iso-8859-1"来解码。因此会有乱码。
     2)如何解决?
         step1. 服务器端，统一使用"utf-8"来解码。
         能够修改
             <Connector URIEncoding="utf-8" />
         step2.客户端，使用encodeURI函数对中文参数值进行编码。
         注：
             encodeURI函数是javascript内置的函数，会使用"utf-8"
             来编码。(

//step2. 发送请求 var uri = 'check.do?adminCode=' + $F('adminCode'); xhr.open('get',encodeURI(uri),true);

)

(2)post请求         1)为何会有乱码?     浏览器提供的ajax对象在发送post请求时，对中文参数值会使用     "utf-8"来编码，而服务器端会使用"iso-8859-1"来解码。(在servlet添加request的方法)     2)如何解决?         request.setCharacterEncoding("utf-8")