java基础学习笔记(七) ajax

来源:互联网 发布:软件开发甲级资质 编辑:程序博客网 时间:2024/05/16 23:38

(1)什么是ajax?
    (asynchronous javascript and xml)
   异步的javascript和xml
    为了解决传统的web应用(当用户点击提交之后,
   浏览器会销毁当前页面,然后等待服务器返回一个
   新的页面)"等待-响应-等待"的弊端而创建的一种
   技术。该技术的实质是,利用浏览器内置的一个
  特殊的对象(XMLHttpRequest,该对象属于
  BOM模型)异步地(浏览器不会销毁当前页面,用户
  可以继续做其它的操作)向服务器发送请求,服务器
  送回部分的数据(xml或者text的形式),在浏览器端,
  可以使用这些数据部分更新页面。在整个过程当中,
  浏览器无刷新。
 (2)ajax对象
  a,如何获得ajax对象?
  ajax对象没有标准化,要获得该对象,需要区分浏览器。
  function getXhr(){
   var xhr = null;
   if(window.XMLHttpRequest){
    //非ie浏览器
    xhr = new XMLHttpRequest();
   }else{
    //ie浏览器
    xhr = new ActiveXObject('Microsoft.XMLHttp');
   }
  } 
  b,ajax对象的属性
   onreadystatechange:注册监听器(即给ajax对象
   绑订一个事件处理函数)
   responseText:获得服务器返回的文本。
   responseXML:获得服务器返回的xml数据。
   readyState: ajax在与服务器进行通讯时的状态值,
   一共有5个,分别是0,1,2,3,4。当值为4时,表示
   ajax对象已经获得了服务器返回的所有的数据。
   此时,才可以使用responseText,responseXML
   获得服务器返回的数据。
   status:获得状态码
 (3)编程
  step1,获得ajax对象
   var xhr = getXhr();
  step2,使用ajax对象发送请求
   方式一: get请求
    //open(请求方式,请求地址,同步还是异步);
    //true:异步,ajax对象发送请求的同时,用户可以
    //对当前页面做其它的操作。
    //false:同步,ajax对象发送请求的同时,会锁定
    //当前页面,用户只能等待服务器的响应。
    xhr.open('get',
    'check_username.do?username=zs',true);
    //注册一个监听器
    xhr.onreadystatechange=f1;
    //请求参数要添加到请求地址后面。
    xhr.send(null);
   方式二:post请求 
    xhr.open('post');
  step3, 服务器处理请求,只需要返回部分的数据给客户
  端。
  step4,在监听器当中,编写相应的处理代码
    function f1(){
     //只有readyState等于4,xhr才获得了服务器
     //返回的所有的数据
     if(xhr.readyState == 4){
      //获得服务器返回的数据
      var txt = xhr.responseText;  //或者responseXML
      //dom操作:更新页面
      ...
     }
    }
  方式二: post请求
   step1,获得ajax对象
   var xhr = getXhr();
   step2,发送请求
   xhr.open('post','check_username.do',true);
   //post请求,要将请求参数放到send方法里面。
   //默认情况下,xhr对象生成的请求数据包
   //没有content-type消息头,需要使用
   //setRequestHeader添加这样一个消息头。
   xhr.setRequestHeader('content-type',
   'application/x-www-form-urlencoded');
   xhr.onreadystatechange=f1;
   xhr.send("username=zs");

 
 (4)编码问题
  a, 链接地址当中包含了中文,如何处理?
   如果链接地址包含了中文,浏览器都会对中文
  按utf-8进行编码。服务器默认情况下,会使用
  iso-8859-1进行解码。
   解决方式:
   通知服务器,按正确的编码格式进行解码:
   对于tomcat,可以修改/conf/server.xml
   ,添加URIEncoding="utf-8"。修改完后,重新
   启动服务器。
  b,如果链接地址包含了中文参数值,如何处理?
   <a href="some.do?name=花花"></a>
   浏览器会按照打开链接所在的页面的编码格式
   对中文参数值进行编码。
    解决方式:
     step1,添加URIEncoding="utf-8"
     step2,页面统一使用utf-8编码。
  c,在ajax编程当中,如何处理编码问题?
   第一种情况: 发送get请求
   ie使用gbk对中文参数值进行编码,其它浏览器
  使用utf-8对中文参数值进行编码。
   解决方式:
    step1,添加URIEncoding="utf-8"
    step2,使用encodeURI函数对请求地址进行
    编码。
   第二种情况:发送post请求
   浏览器会使用utf-8对中文参数值进行编码。
   解决方式:
    request.setCharacterEncoding("utf-8");