ajax-jQuery实现

一.Ajax

1. 标准请求响应时浏览器的动作(同步操作)
　　浏览器请求什么资源,跟随显示什么资源
2. ajax:异步请求.
　　局部刷新,通过异步请求,请求到服务器资源数据后,通过脚本修改页面中部分内容.
3. ajax 由 javascript 推出的
　　由 jquery 对 js 中 ajax 代码进行的封装,达到使用方便的效果.
4. jquery 中 ajax 分类
　　1）第一层 $.ajax({ 属性名:值,属性名:值})
　　　　是 jquery 中功能最全的.代码写起来相对最麻烦的.
　　　　示例代码

/*
url: 请求服务器地址 
data:请求参数 
dataType:服务器返回数据类型 
error 请求出错执行的功能 
success 请求成功执行的功能,function(data) data 服务器返回的数据.
type:请求方式 
*/ 
$("a").click(function(){ 
    $.ajax({ 
        url:'demo',
        data:{"name":"张三"}, 
        dataType:'html', 
        error:function(){
            alert("请求出错.")
        }, 
        success:function(data){
            alert("请求成功"+data)
        }, 
        type:'POST' 
    }); 
    return false;
})

　　2）第二层(简化$.ajax)
　　　　$.get(url,data,success,dataType))
　　　　$.post(url,data,success,dataType)
　　3）第三层(简化$.get())
　　　　$.getJSON(url,data,success). 相当于设置 $.get 中dataType=”json”
　　　　$.getScript(url,data,success) 相当于设置 $.get 中dataType=”script”
5. 如果服务器返回数据是从表中取出.为了方便客户端操作返回的数据,服务器端返回的数据设置成 json
　　1）客户端把 json 当作对象或数组操作.
6. json:数据格式.
　　1）JsonObject:json 对象,理解成 java 中对象
　　　　{“key”:value,”key”:value}
　　2）JsonArray:json 数组
　　　　[{“key”:value,”key”:value},{}]
7.代码示例
　　1）jsp中：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
    /*
    url: 请求服务器地址
    data:请求参数
    dataType:服务器返回数据类型
    error请求出错执行的功能
    success请求成功执行的功能,function(data) data服务器返回的数据.
    type:请求方式
    */
    $("a").click(function(){
        /* $.ajax({
            url:'demo',
            data:{"name":"张三"},
            dataType:'html',
            error:function(){
                alert("请求出错.")
            },
            success:function(data){
                alert("请求成功"+data)
            },
            type:'POST'
        }); */
        $.post("demo",{"name":"张三"},function(data){
            var result="";
            for(var i =0 ;i<data.length;i++){
                result+="<tr>";
                result+="<td>"+data[i].id+"</td>"
                result+="<td>"+data[i].username+"</td>"
                result+="<td>"+data[i].password+"</td>"
                result+="</tr>";
            }
            //相当innerHTML先清空后添加
            $("#mytbody").html(result);
        })
        return false;
    })
});
</script>
</head>
<body>
<a href="demo">跳转</a>
<table border="1">
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>密码</td>
    </tr>
    <tbody id="mytbody"></tbody>
</table>
</body>
</html>

　　2）servlet中

@WebServlet("/demo")
public class DemoServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("执行控制器");
        String name = req.getParameter("name");
        Users users = new Users();
        users.setId(1);
        users.setPassword("123");
        users.setUsername("张三");
        Users users1 = new Users();
        users1.setId(2);
        users1.setPassword("22");
        users1.setUsername("李四");
        
        List<Users> list = new ArrayList<Users>();
        list.add(users1);
        list.add(users);
        
        ObjectMapper mapper = new ObjectMapper();
        String result = mapper.writeValueAsString(list);
        
        resp.setContentType("application/json;charset=utf-8");
        PrintWriter out = resp.getWriter();
        out.println(result);
        out.flush();
        out.close();
    }
}

一.Ajax

猜你喜欢