Ajax

1同步和异步

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态

异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死（也称局部刷新）

2 Ajax运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，

在这段时间里，客户端可以进行任意操作，

直到服务器端将数据返回给Ajax引擎后，会触发设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

所用异步访问都是ajax引擎。

3 js原生的Ajax技术（了解）

3.1步骤

1）创建Ajax引擎对象

variable=new XMLHttpRequest();

2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;（响应）
    }
  }

3）绑定提交地址

xmlhttp.open("GET","test1.txt",true);

如果是post提交，在发送请求之前设置一个头：

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

4）发送请求

xmlhttp.send();

5）接受响应数据

第2步中的响应

3.3实例

例1：get方式带参数提交，并接收响应

demo01.jsp：

<p>
        <button value="异步访问服务器" onclick="f1()">异步访问服务器</button>
        <span id="span1"></span>
    </p>

<script>
function f1(){
    //1创建Ajax引擎对象
    var xmlHttp=new XMLHttpRequest();
    //2绑定监听
    xmlHttp.onreadystatechange=function(){
        //5接受响应数据
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
            var res=xmlHttp.responseText;          
            alert(res);
        }      
    }
    //3绑定提交地址
    xmlHttp.open("get","${pageContext.request.contextPath}/Servlet01?name=参数",true);
    //4发送请求
    xmlHttp.send();
}
</script>

Servlet01：

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接收参数
        String name=request.getParameter("name");
        //响应
        response.getWriter().write(name);      
    }

例2：post方式带参数提交，并接收响应

demo02.jsp：

<p>
        <button value="异步访问服务器" onclick="f1()">异步访问服务器</button>
        <span id="span1"></span>
    </p>

<script>
function f1(){
    //1创建Ajax引擎对象
    var xmlHttp=new XMLHttpRequest();
    //2绑定监听
    xmlHttp.onreadystatechange=function(){
        //5接受响应数据
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
            var res=xmlHttp.responseText;          
            alert(res);
        }      
    }
    //3绑定提交地址
    xmlHttp.open("post","${pageContext.request.contextPath}/Servlet01",true);
    //post请求头
    xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    //4发送请求
    xmlHttp.send("name=post参数");
}
</script>

例3：同步和异步的比较

demo2.jsp：

<p>
        <button value="异步访问服务器" onclick="f1()">异步访问服务器</button>
        <span id="span1"></span>
    </p>
     
    <p>
        <button value="同步访问服务器" onclick="f2()">同步访问服务器</button>
        <span id="span2"></span>
    </p>
     
    <p>
        <button value="测试" onclick="alert()">测试</button>           
    </p>

<script>
function f1(){
    //1创建Ajax引擎对象
    var xmlHttp=new XMLHttpRequest();
    //2绑定监听
    xmlHttp.onreadystatechange=function(){
        //5接受响应数据
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
            var res=xmlHttp.responseText;          
            alert(res);
        }      
    }
    //3绑定提交地址
    xmlHttp.open("post","${pageContext.request.contextPath}/Servlet2",true);
    //发送请求
    xmlHttp.send();
}
 
function f2(){
    //1创建Ajax引擎对象
    var xmlHttp=new XMLHttpRequest();
    //2绑定监听
    xmlHttp.onreadystatechange=function(){
        //5接受响应数据
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
            var res=xmlHttp.responseText;          
            alert(res);
        }      
    }
    //3绑定提交地址
    xmlHttp.open("post","${pageContext.request.contextPath}/Servlet2",false);
    //发送请求
    xmlHttp.send();
}
</script>

Servlet2：

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            //线程沉睡5秒
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        //响应一个随机数
        response.getWriter().write(Math.random()+"");
         
    }

点击“异步”按钮，测试按钮可以点击

点击“同步”按钮，测试按钮不可以点击，直到5秒后返回响应信息，才可以点击

 

4 Json

json是一种与语言无关的数据交换的格式，作用：

使用ajax进行前后台数据交换

移动端与服务端的数据交换

4.1 json有两种格式

对象格式：{"key1":obj,"key2":obj,"key3":obj...} （特点：大扩号，键值对）

数组/集合格式：[obj,obj,obj...] （特点：中扩号，里面存对象）

对象格式和数组格式可以互相嵌套，

json的key是字符串，json的value是Object

4.2 json的解析

json是js的原生内容，这意味着js可以直接取出json对象中的数据

例1：解析对象格式

<script>
//定义json
    var person={
        "name":"张三",
        "age":18
    }
//取值
alert(person.name+"："+person.age);
</script>

例2：解析数组格式

<script>
//定义json
    var persons=[
        {
            "name":"张三",
            "age":18
        },
        {
            "name":"李四",
            "age":20
        }
    ];
//取值
console.log(persons[0].name+"："+persons[0].age);
console.log(persons[1].name+"："+persons[1].age);
</script>

例3：解析嵌套格式（以后再加）

4.3Json的转换插件

json的转换插件是通过java的一些工具，直接将java对象或集合转换成json字符串。

常用的json转换工具有如下几种：

1）jsonlib

2）Gson：google

3）fastjson：阿里巴巴

其中Gson较常用

 

Jar包放到项目中

对象封装，再转化

5 Jquery的Ajax技术

共有三种方式，$.get，$.post，$.ajax，$.ajax方式最常用

5.1 $.get和$.post

1）格式：

　　$.get(url, [data], [callback], [type])

　　$.post(url, [data], [callback], [type])

2）参数说明：

url：代表请求的服务器端地址

data：代表请求服务器端的数据，参数（json格式）

callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）

type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换），

常用的返回类型：text、json、html等

5.2 $.ajax

1）格式：$.ajax( { option1:value1,option2:value2... } );

2）常用的option有：

async：是否异步，默认是true代表异步

data：发送到服务器的参数，建议使用json格式

dataType：服务器端返回的数据类型，常用text和json

success：成功响应执行的函数，对应的类型是function类型

type：请求方式，POST/GET

url：请求服务器端地址

例：

demo1.jsp：

<body>
    <input type="button" value="get异步请求服务器" onclick="f1()"/><br>
    <input type="button" value="post异步请求服务器" onclick="f2()"/><br>  
    <input type="button" value="ajax异步请求服务器" onclick="f3()"/><br>
     
<script src="${pageContext.request.contextPath}/jquery-1.11.3.min.js"></script>
<script>
    function f1(){
        $.get(
            "${pageContext.request.contextPath}/Servlet02",
            {"name":"张三","age":18},
            function(data){
                alert(data);
            },
            "text"
        );
    }
     
    function f2(){
        $.post(
            "${pageContext.request.contextPath}/Servlet03",
            {"name":"张三","age":18},
            function(data){            
                alert(data.name);
                alert(data.age);
            },
            "json" 
        );
    }
     
    function f3(){
        $.ajax({
            url:"${pageContext.request.contextPath}/Servlet04",
            data:{"name":"张三","age":18},
            type:"POST",
            async:true,
            success:function(data){
                alert(data.name);
            },
            error:function(){
                alert("请求失败");
            },
            dataType:"json"        
        });
    }
     
</script>
</body>

Servlet02：

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取参数
        String name=request.getParameter("name");
        //解决中文乱码
        name=new String(name.getBytes("ISO8859-1"),"utf-8");
        String age=request.getParameter("age");
        System.out.println(name+"..."+age);    
        //解决中文乱码
        response.setContentType("text/html;charset=utf-8");
        //返回响应
        response.getWriter().write(name+"..."+age);    
    }

Servlet03：

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name=request.getParameter("name");
        String age=request.getParameter("age");
        System.out.println(name+"..."+age);    
        //解决中文乱码
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("{"name":""+name+"","age":"+age+"}");
    }

Servlet04：

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取参数
        String name=request.getParameter("name");
        String agestr=request.getParameter("age");
        int age=Integer.parseInt(agestr);
        //封装对象
        User user=new User();
        user.setName(name);
        user.setAge(age);
        //将对象转化为json
        Gson gson=new Gson();
        String json=gson.toJson(user); //Object类型就可以，所以什么都可以放
        //解决中文乱码
        response.setContentType("text/html;charset=utf-8");
        //响应json串
        response.getWriter().write(json);
    }

结果：

Get：

Post：

Ajax：

Tips：

1）post方式中：request不用解决中文乱码，只解决response就可以

2）注意拼串技巧（Servlet03中）

6实例：验证用户名是否可用

 

1）register.jsp页面中添加文本框失去焦点事件：

<script>
$(function(){
    $("#username").blur(function(){
        var username=$("#username").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/CheckUsernameServlet",
            data:{"username":username},
            dataType:"json",
            type:"POST",
            async:true,
            success:function(data){
                var isExist=data.isExist;
                var info="";
                if(isExist){
                    info="该用户名存在，请重新输入";
                    $("#userinfo").css("color","red");
                }else{
                    info="该用户名可用";
                    $("#userinfo").css("color","green");
                }
                $("#userinfo").html(info);
            }
        });
    });
});
</script>

2）CheckUsernameServlet：

public class CheckUsernameServlet extends HttpServlet {
    private UsersService usersService=new UsersService();
     
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取参数
        String username=request.getParameter("username");
        //调用service层方法
        boolean isExist=usersService.checkUsername(username);
        //拼成json格式
        response.getWriter().write("{"isExist":"+isExist+"}");       
    }
 
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

3）UsersDao中方法：

   //判断用户名是否可用
public int checkUsername(String username) throws SQLException{
    String sql="SELECT COUNT(*) FROM users WHERE username=?";
    Long count=qr.query(sql, new ScalarHandler<Long>(),username);
    return count.intValue();
}

4）UsersService中方法：

    //判断用户名是否可用
public boolean checkUsername(String username){     
    int count=0;
    try {
        count=usersDao.checkUsername(username);
    } catch (SQLException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    return count>0?true:false;
}    

7重点

1）jquery的ajax

格式示例：

$.ajax({
    url:"${pageContext.request.contextPath}/Servlet04",
    data:{"name":"张三","age":18},
    type:"POST",
    async:true,
    dataType:"json",
    success:function(data){
        console.log(data.name);
    },
    error:function(){
        console.log("请求失败");
    }
});

 2）Json的解析和Gson转化插件用法