Java学习--Ajax介绍及使用

Posted 2021-02-15 xhwr

一、使用Ajax

1、什么是ajax？

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

2、获取ajax对象

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

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

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

4、编程步骤

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;
             页面更新...
         }

二、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")