一.ajax是什么？
是网页中的异步刷新技术。其核心是js+xml
二.执行过程
1.js的核心对象XMLHttpRequest是一个具备像后台发送请求的一个对象
2.XMLHttpRequest可以异步发送请求
3.指定回调函数
4.等待后台响应，这个过程是异步的。此时网页中的其他元素是处于可用状态
5.响应得到后会执行回调函数来局部刷新网页
三。好处：
1.用户体验感增强
2.不用等待操作结果
3.提高带宽的使用率

四。Json数据的使用
1.json是一种纯字符串的数据格式，可以用来描述复杂的对象或数组
2.使用场景：可以将java对象和json格式的数据互相装换
3.使用步骤，在项目中要加入json转换的jar包

 

实例：验证用户名重复+省市区下拉列表联动

 　　checkUsername.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<title>Insert title here</title>
</head>
<script type="text/javascript">
    var xmlhttp;//全局变量
    function checkName(value){
        //1.要获取XMLHttpRequest对象
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
        }else{// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        //指定回调函数
        xmlhttp.onreadystatechange=reback;//回调函数是专门处理后台响应后的数据变化
        //打开连接 指定提交方式，指定url地址  指定是否异步（true为异步 false同步）
        //js中向后台传中文参数需要转码encodeURI(\'张三\')
        xmlhttp.open("post","ajaxCheckName?name="+encodeURI(value),true);
        //设置传参方式为表单提交
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //发送请求
        xmlhttp.send();
    }
    
    function reback(){
        //判断各种响应状态
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            //获取后台响应过来的数据，只能接收字符串
            if(xmlhttp.responseText==\'true\'){//用户名重复
                document.getElementById(\'mess_name\').style.color="red";
                document.getElementById(\'mess_name\').innerHTML="用户名重复";
            }else{
                document.getElementById(\'mess_name\').style.color="green";
                document.getElementById(\'mess_name\').innerHTML="用户可用";
            }
        }
    }
    
    //Jquery的方式来做ajax，效果同上
    $("document").ready(function (){
        $("#username").bind("blur",function(){
            $.post("ajaxCheckName?name="+this.value,function(data){
                if(data=="true"){
                    $("#mess_name").css("color","red");
                    $("#mess_name").html("用户名重复");
                }else{
                    $("#mess_name").css("color","green");
                    $("#mess_name").html("用户名可用");
                }
            });
        });
    });
    
    $("document").ready(function (){
        $.post("address?type=province",function(data){
            var str = "";
            console.log(data);
            $.each(JSON.parse(data),function(i,address){
                console.log(i,address.id,address.name,address.type);
                str += "<option value=\'"+address.id+"\'>"+address.name+"</option>";
            });
            $("#pro").html(str);
        });
        
        $("#pro").bind("change",function(){
            $.post("address?type=city&proid="+this.value,function(data){
                var str = "";
                console.log(data);
                $.each(JSON.parse(data),function(i,address){
                    console.log(i,address.id,address.name,address.type);
                    str += "<option value=\'"+address.id+"\'>"+address.name+"</option>";
                });
                $("#city").html(str);
            });
        });
        
        $("#city").bind("change",function(){
            $.post("address?type=area&cityid="+this.value,function(data){
                var str = "";
                console.log(data);
                $.each(JSON.parse(data),function(i,address){
                    console.log(i,address.id,address.name,address.type);
                    str += "<option value=\'"+address.id+"\'>"+address.name+"</option>";
                });
                $("#area").html(str);
            });
        });
    });
</script>
<body>
    <button onclick="checkName()">测试</button>

    <div id="myDiv"></div>
    <input name="" onblur="checkName(this.value)">
        <span id="err" style="color: red;"></span> <br>
    <input>

    <div align="center">
        <form action="">
            用户名:<input id="username"><span id="mess_name"></span><br>
            密码:<input><br>
            地址:<select id="pro">
                    <option>请选择省份</option>
                </select>
                <select id="city">
                    <option>请选择城市</option>
                </select>
                <select id="area">
                    <option>请选择地区</option>
                </select>
        </form>
    </div>
</body>
</html>
AjaxCheckNameServlet.java
package com.control;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ajaxCheckName")
public class AjaxCheckNameServlet extends HttpServlet{
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        
        PrintWriter out = resp.getWriter();//获取输出流
        if("海文".equals(name)){//用户名重复
            out.print("true");
        }else{
            out.print("false");
        }
        out.flush();
        out.close();
    }
}
AddressServlet.java
package com.control;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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.pojo.Address;
import com.service.AddressService;
import com.service.IAddressService;

import net.sf.json.JSONArray;
@WebServlet("/address")
public class AddressServlet extends HttpServlet{
    IAddressService addSer = new AddressService();
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String type = req.getParameter("type");
        List<Address> list = null;
        if("province".equals(type)){//获取省份数据
            list = addSer.getAllProvince();
        }
        
        if("city".equals(type)){//获取城市
            String proid = req.getParameter("proid");
            list = addSer.getChildByParentid(proid);
        }
        
        if("area".equals(type)){//获取地区
            String cityid = req.getParameter("cityid");
            list = addSer.getChildByParentid(cityid);
        }
        //将java对象转换成json数据
        JSONArray json = JSONArray.fromObject(list);
        
        //将json响应给前台
        resp.setCharacterEncoding("UTF-8");//解决响应的中文乱码问题
        PrintWriter out = resp.getWriter();
        out.print(json.toString());
        out.flush();
        out.close();
    }
}

 

版权声明：本文为wlxslsb原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wlxslsb/p/10745492.html