Ajax 狂神

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

在现代浏览器上写AJAX主要依靠XMLHttpRequest对象（廖雪峰）：

function success(text) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = text;
}

function fail(code) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = 'Error code: ' + code;
}

var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

// 发送请求:
request.open('GET', '/api/categories');
request.send();

alert('请求已发送，请等待响应...');

使用JQuery需要先导入jQuery的js文件；

@Controller
@RequestMapping("/ajax")
public class AjaxController{
    //第一种方式，服务器要返回一个字符串，直接使用response
    @RequestMapping("/a1")
    public void ajax(String name,HttpServletResponse response){
        if("admin".equals(name)){
            response.getWriter().print("true");
        }else{
            response.getWriter().print("false");
        }
    }
}

@RequestMapping("/a2")
@ResponseBody
public List<User> ajax2(){
    List<User> list =new ArrayList<>();
    User user1 =new User("豪",1,"男");
    User user2=new User("豪",1,"男");
    list.add(user1);
    list.add(user2);
    return list; //由于加了@ResponseBody注解，他会返回一个字符串
}

ajax 写法

<script type="text/javascript">
    function a1() {
        //所有参数：
        //url:待载入页面的URL地址，Json
        //data:待发送Key/value参数
        //success:载入成功时回调函数
            //data：封装了服务器返回的数据!!!
            //status：状态
        $.ajax({
            url:"${pageContext.request.contextPath}/ajax/a1",
            data:{"name":$("txtName").val()},
            success:function (data,status) {
                console.log(data)
                console.log(status)
            }
        });
        //将文本输入的值，
        $("txtName").val();
        // //发送给服务器，
        // //接受服务器返回的数据
    }

<script>
    $(function(){
    	$("#btn").click(function(){
            $.post("${pageContest.request.contextPath}/ajax/a2",function(data){
                console.log(data);
                var html="";
                for(var i=0;i<data.length;i++){
                    html+="<tr>"+
                        "<td>"+data[i].name+"</td>"+
                        "<td>"+data[i].age+"</td>"+
                        "<td>"+data[i].sex+"</td>"+
                        "</tr>"
                }
                $("#content").html(html);
            })
        })
})
</script>

第三种：

@RequestMapping("/a3")
@ResponseBody
public String ajax3(String name,String pwd){
    String msg="";
    if(name!=null){
        if("admin".equals(name)){
            msg="ok";
        }else{
            msg="用户名有误"；
        }
    }
    if(pwd != null){
        if("123456".equals(pwd)){
            msg="ok";
        }else{
            msg="密码输入有误";
        }
            
    }
    return msg;
}

<html>
    <head>
        <title>Title</title>
        <script>
            function a1(){
                $.post({
                    url:"${pageContext.request.contextPath}/ajax/a3",
                    data:{"name":$("#name").val()},
                    success:function(data){
                        if(data.toString()=='ok'){
                            //信息核对成功
                            $('#userInfo').css("color","green");
                        }else{
                            $("#userInfo").css("color","red");
                        }
                        $("#userInfo").html(data);
                    }
                })
            }
            function a2(){
                $.post("${pageContext.request.contextPath}/ajax/a3",{"pwd":$("pwd").val()},function(data){
                    if(data.toString()='ok'){//信息核对成功
                        $('#pwdInfo').css("color","green");                     
                    }else{
                        $('#pwdInfo').css("color","red");
                    }
                    $("#pwdInfo").html(data);
                })
            }
        </script>
    </head>
    <body>
        <p>
            用户名：
            <input type="text" id="name" onblur="a1()"/>
            <span id="userInfo"></span>
        </p>
        <p>
            	密码：
        	<input type="text" id="pwd" onblur="a2()"/>
        	<span id="pwdInfo"></span>
            
        </p>
        
        
        
    </body>
</html>

Ajax 总结：

使用jQuery需要导入JQuery，使用Vue就导入Vue，两个都用，自己原生态实现

三步曲：

1.编写对应处理的Controller,返回消息或者字符串汇总json格式的数据

2.编写ajax请求

1.url: Controller 请求

2.data：键值对

3.success: 回调函数 success:function(data)中的data封装了请求的URL返回的数据

3.给Ajax绑定事件，点击click，失去焦点onblur,键盘弹起keyup

猜你喜欢