AjaxDemo

原生JS实现Ajax

function fun() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.open("GET", "ajaxServlet?username=tom", true);

        xmlhttp.send();

        //当xmlhttp对象的就绪状态改变是，触发onreadystatechange
        xmlhttp.onreadystatechange = function() {
            //  x 判断readyState就绪状态是否为4，判断status想要状态吗是否为200
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //x  获取服务器的响应结果
                var responseText = xmlhttp.responseText;
                
                alert(responseText);
            }
        }

    }

Jquery实现Ajax的第一种方式：

function fun() {

         $.ajax({
            url:"ajaxServlet",
            type:"POST",
            data:{"username":"tom","age":25},
            success:function(data){
                alert(data);
            },
            error:function(){
                alert("出错了")
            },
            dataType:"JSON"
        }); 
}

Jquery实现Ajax的第二种方式：

function fun() {

　　$.get("ajaxServlet",{username:"rose"},function(data){
            alert(data)
        },"text");
}

Jquery实现Ajax的第三种方式：

function fun() {

　　$.post("ajaxServlet",{username:"rose"},function(data){
            alert(data)
        },"text");
}

 

简单案例：注册校验用户名

regist.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>

<script>
    $(function() {
        $("#username").blur(function() {
            var username = $(this).val();
            $.get("findUserServlet", {username : username}, function(data) {
                var span = $("#u_username")
                if (data.userExsit) {
                    // username存在
                    span.css("color", "red")
                    span.html(data.msg)
                } else {
                    // username不存在
                    span.css("color", "green")
                    span.html(data.msg)
                }
            }); //$.get()可以指定第四个参数为dataType ：json
        })
    })
</script>

</head>


<body>

    <form>
        <input type="text" placeholder="请输入用户名" id="username" name="username">
        <span id="u_username"></span> <br> 
        <input type="password" placeholder="请输入密码" name="password"><br> 
        <input type="submit" value="注册">
    </form>

</body>
</html>

 

findUserServlet

package com.infosys.web;
import java.io.IOException;
import java.util.HashMap;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;

@WebServlet("/findUserServlet")
public class FindUserServler extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 　　　　//指定浏览器解析的数据格式，不指定浏览器会将响应数据当作字符串处理，也会出现乱码的现象。 //也可以在发送Ajax请求里指定一下datatype的类型为Json
　　　　 response.setContentType("application/json;charset=utf-8"); 
        // 获取用户名
        String username = request.getParameter("username");

        // 调用service层判断用户是否存在  （此处是直接模拟的数据，真实开发肯定是查询数据库）
        HashMap<String,Object> map = new HashMap<String,Object>();
        if("tom".equals(username)) {
            map.put("userExsit",true);
            map.put("msg","用户名太受欢迎，请更换一个");
        }else {
            map.put("userExsit",false);
            map.put("msg","用户名可用");
        }
        
        ObjectMapper mapper = new ObjectMapper();
        // 将数据传递给客户端
        mapper.writeValue(response.getWriter(), map);

    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

 

posted @ 2019-08-05 15:40  Courage.Kiven  阅读(207)  评论(0)  编辑  收藏  举报