JQuery中 异步处理ajax的封装和应用

1、java 语言    面向对象的语言——>没有这个对象，我自己封装一个！
            方便用户使用，方便我们自己调用。
            
2、JQuery  是一种什么样的语言？
        它是基于对象的语言
                        ——> 封装好的对象，拿来给你直接用。
                        比如ajax 对象。就是直接封装好的，其实可以直接用。
3、JQuery中的ajax 对象是怎么样的：
        （1）、$.ajax({ajax需要的参数信息  });
        （2）、jquery中ajax 对象的参数的格式：
                采用的json的格式：键值对形式出现的。
                 值的名称1： "具体的值1" , 值的名称2： "具体的值2" , ……
        （3）、jquery 封装的ajax中，都有那些参数：
                url:"",                        访问的服务器地址，具体某个servlet
                type:"get",                    使用get 或者post方式进行访问。
                data:"",                    访问携带的参数。
                dataType:"text",            携带的参数数据的类型，text，json，xml、
                success:function(result){},    访问成功之后，会回调的函数，在里面可以做逻辑处理。
                error: function(){}            访问失败之后，回调的函数。
                
                
4、具体代码的编写：

        （1）、项目创建——webroot根目录下创建：
                    创建·js文件夹—— > 把jquer的jar包复制过来。
                    创建·ajax文件夹—— > 新建一个jsp页面，起名ajax.jsp
                    
        （2）、在jsp页面中编写的代码：
            =1= 引入jquery jar 包：
                <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
            =2= 在body 标签中，写一个表格，用户名输入框。
                <table>
                  <tr>
                    <td>用户名：</td>
                    <td><input id="name" name="name" type="text"  οnblur="avlidate();"></td>
                    <td> &nbsp;<font color="red"> * </font></td>
                    <td><div id="nameDiv" style="display: inline;"></div></td>
                  </tr>
                </table>
                注意：  输入框和提示的div 都需要有id属性，后续方便找到元素对象进行操作
                        输入框 添加失去焦点事件。

            =3= head标签中新建一个script 标签，里面写js代码。
                <script type="text/javascript">
                    //当我们的输入框失去焦点的时候，触发的方法。
                    function avlidate(){
                        //拿到输入框中的内容，判断输入框中的内容，是否合法。
                        var name = $("#name").val();
                        if(name==null || name== ""){
                            $("#nameDiv").html("用户名 不能为空！");
                        }else{
                            //当输入框中的内容不为空的时候，用ajax 请求服务器 ，判断，该数据是否合法！
                            //ajax 来实现。 $.ajax({ });
                        
                        }
                    }
                </script>
                

            =4= 需要创建一个访问的servlet，
                doPost里面写的代码：
                    request.setCharacterEncoding("utf-8");
                    doGet(request, response);

                doGet 中写的代码：
                    //先拿到客户端访问服务器，携带的请求参数信息。
                    String name = request.getParameter("name");
                    
                    boolean used = false;
                    if(name.equals("ajax")){
                        //用户名被使用了，我给客户端提示 一个值，被占用。
                        used = true;
                    }else{
                        //没被使用的时候，就提示客户端，可以使用。
                        used = false;
                    }
                    
                    //用响应对象，把我们是否被使用的used  状态，返回给客户端，让客户端进行处理。
                    //设置输出内容文本格式，和编码格式。
                    response.setContentType("html/text;charset=utf-8");
                    //通过响应对象，获取输出对象，
                    PrintWriter out = response.getWriter();
                    //通过输出对象的print方法输出used状态值。注意，不能用println方法，因为会使数据准备。
                    out.print(used);
                    
                    //刷新，输出流和关闭输出流
                    out.flush();
                    out.close();

            =5= JQuery中  Ajax对象异步请求，具体实现代码。
            
                    //当输入框中的内容不为空的时候，用ajax 请求服务器 ，判断，该数据是否合法！
                    //ajax 来实现。 $.ajax({ });
                    $.ajax({
                        url:"s1",
                        type:"post",
                        data:{"name": name},
                        dataType:"text",
                        success:function(result){
                            if(result=="true"){
                                $("#nameDiv").html("用户名已被占用！");
                            }else{
                                $("#nameDiv").html("用户名可以用~");
                            }
                        },
                        error: function(){
                            alert("异步请求失败！");
                        }
                    });

            =6=  注意事项，当我们的web项目 
                如果不是根目录的文件，是访问不到js文件夹下的jquery的jar包的。

                页面报错提示：找不到jquery jar包的资源。
                    Failed to load resource: the server responded with a status of 404 (Not Found)

                同时用jquery 先择器的地方也会报错：$ is not defined   at avlidate
                     
                解决方法：浏览器的权限不够，如果不是根目录文件，不允许访问上下级的文件夹
                    具体，需要把ajax 文件夹下的ajax.jsp 复制到webroot根目录下
                    浏览器访问，webroot根目录下的ajax.jsp