传智播客erp项目学习,使用Ajax提高用户体验效果

     今天继续学习erp,赖老师没有按功能实现一味的添加代码，而是和大家一块讨论模块的设计，从提高用户体验效果入手，真正理解产品档案登记模块的业务设计流程，体验真实的软件开发流程，感觉效果不错。对今天所学重点总结一下。
   使用Ajax 对输入产品是否已经登记进行验证，在页面读刷新给出提示信息，使页面更友好，提高用户体验效果。
    XMLHttpRequest：该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词。
   XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准.
创建XMLHttpRequest对象（由于非标准所以实现方法不统一）
    (1) Internet Explorer把XMLHttpRequest实现为一个ActiveX对象。
    (2)其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。
    (3) XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。
    创建XMLHttpRequest对象。首先，要创建一个全局作用域变量xmlHttp来保存这个对象的引用。createXMLHttpRequest方法完成创建XMLHttpRequest实例的具体工作。对window.ActiveXObject的调用会返回一个对象，也可能返回null，if语句会把调用返回的结果看作是true或false（如果返回对象则为true，返回null则为false），以此指示浏览器是否支持ActiveX控件，相应地得知浏览器是不是Internet Explorer。如果确实是，则通过实例化ActiveXObject的一个新实例来创建XMLHttpRequest对象，并传入一个串指示要创建何种类型的ActiveX对象。在这个例子中，为构造函数提供的字符串是Microsoft.XMLHTTP，这说明你想创建XMLHttpRequest的一个实例。
 var xmlHttp;
function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}
要用到的XMLHttpRequest的方法
   open(“method”, “url”) 向服务器发送请求， 建立对服务器的调用。Method参数可以是GET、POST或PUT.url参数可以是相对URL或绝对URL。
   send(content)   向服务器发送请求。content值设置为null,以异步方式发送请求，发送完后直接返回 （与传统交互相反，传统的交互方式必须等到服务器响应完毕）。
   要用到的XMLHttpRequest的属性  
   onreadystatechange   每个状态改变是都会触发这个事件处理器，通常会调用一个javaScript函数，该事件处理函数由服务器触发，而不是用户
在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState 来实现。改变 readyState 属性是服务器对客户端连接操作的一种方式。每次 readyState 属性的改变都会触发 readystatechange 事件。
    readyState  请求的状态，有5个可取值：0=未初始化、1=正在加载、2=已经加载、3=交互中、4=完成。
    responseText  服务器的响应，表示为一个串。
    status   服务器的HTTP状态码（200对应OK、404对应NotFount、等）
实现代码如下：
<script language="javascript">
  var httpRequest = null;
  
   //实现XMLHttpRequest请求初始化
   function initializeXMLHttpRequest(){
       //针对Mozilla等    
       if(window.XMLHttpRequest) {
          //alert('xmlhttprequest');
           httpRequest = new XMLHttpRequest();
       } else if(window.ActiveXObject) { 
                 //针对IE
                 //alert('activexobject');       
                 httpRequest = new ActiveXObject("Microsoft.XMLHTTP");      
       }
   }
  
  
   //处理响应
   function processResponse(){
       //判断请求目前的状态。4表示服务器已经传回所有的信息，可开始处理信息.
       if(httpRequest.readyState == 4) {
          //判断返回的HTTP状态码，确定返回的页面没有错误。200代表页面正常。
          if(httpRequest.status == 200) {
             //alert(httpRequest.responseText);
             //成功则用服务器端返回值更新数据，比如设置控件的值,responseText  服务器的响应，表示为一个串。
             document.getElementById('productNameMessage').innerHTML=httpRequest.responseText;
             //if the name does exist,disable the submit button and clear the product name .
          }
       }
   }
  
  
   //发送请求
   function sendRequest(url){
       //实现XMLHttpRequest请求初始化
       initializeXMLHttpRequest();
       //指定响应处理函数，（即当响应从服务器端返回后，客户怎么办？）
       httpRequest.onreadystatechange=processResponse;
      
     //使用get 方式  建立对服务器的调用。Method参数可以是GET、POST或PUT.url参数可以是相对URL或绝对URL
       httpRequest.open("get",url);
       //以异步方式发送请求，发送完后直接返回 （与传统交互相反，传统的交互方式必须等到服务器响应完毕）
       httpRequest.send(null);
   }
    
   function validateProductName(){
       var productName = document.forms[0].productName.value;
       sendRequest("<%=request.getContextPath()%>/validateProductNameServlet?productName="+productName);
   }
</script>
validateProductNameServlet 获取客户输入的产品名称，查询数据库，验证是否已经存在。向客户端返回不同的信息。
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
  
  ProductService productService=new ProductService();
  String productName=req.getParameter("productName");
  
  if(!productName.trim().equals("")){
   String message="You may use the productName";
      if(productService.isRepeated(productName)){
      message="The name dose exist";
      }
      resp.getOutputStream().println(message);
    
  }else {
   resp.getOutputStream().println("please input name");
  }
  
   
 }