ajax笔记

一.ajax编程 
 1.获得XmlHttpRequest对象(该对像由浏览器提供，ie与其他浏览器不同)
  1)function getXmlHttpRequest(){
   var xhr = null;
   if((typeof XMLHttpRequest)!='undefined'){
    xhr = new XMLHttpRequest();
   }else{
    xhr = new ActiveObject('Microsoft.XMLHttp');
   }
   return xhr;
  }

  2)XmlHttpRequest对象
   运行周期：
    获取请求
    初始化XMLHttpRequest对象
    发送Http请求(open,send)
    处理服务器返回的信息(处理回调函数)
   属性：
    onreadystatechange:注册一个监听器（绑定一个事件处理函数），只写
    readyState：返回对象与服务器的通讯状态，只读
     0（未初始化）：尚未调用open方法
     1（初始化）：尚未调用send方法
     2（发送数据）：send方法以调用
     3（数据传送中）：已接受数据
     4（相应结束）：接收数据结束
    responseBody：将形影信息正文以unsigned byte 数组的形式返回，只读
    responseStream:以 ADO Stream对象的形式返回信息，只读
    responseText：将响应信息以字符串返回，只读
    responseXML：将响应信息以xml dom对象返回，只读
    status：返回当前请求的http状态码，只读
    statusText：返回当前请求行状态，只读
   方法：
    open(string method,string url,boolean async,string username,string password);
     method:get,post,put,delete,head等
     url:请求发到服务器响应的url
     async：true 请求是异步的
            false 请求是同步的
     username:认证服务器的用户名
     password:认证服务器的密码
    send()
     该方法包含一个参数，是可变类型的数据。
     例：
      xhr.open('get','hello.do?name=Anne',true);
      xhr.send(null);
     
      xhr.open('post','hello.do',true);
      xhr.send('name=Anne');
    void setRequestHeader(string header,string value);
     header:设置的首部
     value:首部中放置的值
    string getAllResponseHeaders();
     返回一个字符串包含所有http请求响应首部
    string getAllResponseHeader(string header);
     返回一个字符串包含某一个http请求响应首部

    abort();
     取消当前请求
  3)缓存问题
   使用ie浏览器时，使用get方式发送请求，浏览器会将数据缓存起来。
   解决方案：
    使用post方式
    在请求地址后添加一个随机数

 2.使用XmlHttpRequest对象给服务器发送请求
  var xhr = getXmlHttpRequest();

  1)get方式
   xhr.open('get','hello.do?name=Anne',true);
   xhr.onreadystatechange=function(){
    .....
   };
   xhr.send(null);
  2)post方式
   xhr.open('post','hello.do',true);
   //必须设置一个消息头content-type
   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
   xhr.onreadystatechange=function(){
    .....
   };
   xhr.send('name=Anne');
 3.服务器端处理请求
 4.在监听器中处理服务器返回的响应
   xhr.onreadystatechange=function(){
    if(xhr.readyState == 4){
     var txt = xhr.responsetext;
     var xml = xhr.responseXML;
    }
   };
二.ajax运用
 ajax比较适合用于交互较多、读取数据频繁、数据量传输较小的web运用。
 1.基于表单的简单用户交互：用户注册验证、数据格式验证
 2.实时更新的页面信息 菜单导航：聊天室信息、在线统计、股票的涨跌
 3.评论、选择、投票
三.ajax的运行机制
 ajax的原则是按需取数据
四.ajax编码
 1.post请求方式:使用utf-8编码
 2.get请求方式:ie使用gbk、gb2312编码  firefox使用utf-8编码
  1）修改tomcat的server.xml文件，添加 URIEncoding="utf-8"
  2) open方法中的请求地址用encodeURI()函数进行处理