JavaWeb之Ajax

1.Ajax简介

   Ajax指异步的javaScript及XML（Asynchronous JavaScript  And Xml）

   Ajax不是编程语言，而是创建更好更快以及交互性更强的web应用程序技术

2.Ajax工作流程

   JavaScript使用XMLHttpResquest对象来直接与服务器进行通信，异步传输数据

　　　　　　　　　　　　　　　　　　　　　XML  ——完成发送请求—————>

   JavaScript  ------> XMLHttpRequest 对象　　　　　　　　　　　　　　　　　　　　　　服务器

　　　　　　　　　　　　　　　　　　　　　CSS——获取返回结果—————>

3.Ajax原生态的实现

   创建XMLHttpRequest对象---〉设置回调函数-----〉初始化XMLHttpRequest组件----〉发送请求

4.  Ajax原生态的实现

1)  创建form表单

 <form action="<%=path %>/servlet/LoginServlet" method="post" >
     <input name="uname" type="text" value="" /><span id="msg"></span><br/>
      <input name="upwd" type="text" value="" />
      </form> 

 

2）失去焦点是给出提示

$(function(){
    //作用：等待页面上的HTML标签加载完毕后，开始执行，不用等待图片、css和js加载完毕
    $("[name=uname]").blur(function(){
    //Ajax请求发送出去
    //XMLHttpResquest  xhr 对象  能力检测
    var xhr = null ;
    if (window.XMLHttpRequest) {
        //window下有这个属性，证明是非IE或者是高版本的IE
      xhr = new XMLHttpRequest();
    }else{
    //IE 微软 Activex+注册表       sun  环境变量+注册表
    xhr = new ActivexObject("XMLHTTP");
    }
    //1、属性  方法和事件
    //构建请求的路径 URL ，请求的方式 method和是否是异步async  
    xhr.open("get","${pageContext.request.contextPath}/servlet/LoginServlet?uname="+$("[name=uname]").val(),true);
    
    //2.监控到请求现在的状态  5个 切换四次  处理服务器响应的函数 oreadystatechange
    xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200) {
        //从server拿数据
        var data = xhr.responseText;
        $("#msg").html(data);
    }
    
    };
    
    //3.发送请求
    xhr.send(null);
    });
    
    
    });
    
    
    </script>
    

3） 创建servlet

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String uname = request.getParameter("uname");
        if ("admin".equals(uname)) {
            //已经被注册了
            response.getWriter().write("has registed");
        } else {
            //还没有被注册
            response.getWriter().write("not registed");
        }
    }

}