66_2Ajax【与传统Web交互区别、使用案例】

最新推荐文章于 2024-10-12 11:10:30 发布

程序奇男子

最新推荐文章于 2024-10-12 11:10:30 发布

阅读量889

点赞数 21

分类专栏： JavaEE 文章标签：交互 ajax

本文链接：https://blog.csdn.net/gangain/article/details/141020381

版权

JavaEE 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

Ajax

概念

Ajax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML

他不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法

Ajax指的是刷新局部页面的技术

应用场景

搜索、地图、校验、获取数据

交互模型

交互模型图

传统的Web交互方式和Ajax的交互方式

区别：
1.请求发送方式：‌
传统Web应用---------通过浏览器发送请求
Ajax技术---------通过JavaScript的XmlHttpRequest对象发送请求
2.服务器响应方式：‌
传统Web应用---------是一个完整的页面
Ajax技术---------只是需要的数据
3.客户端处理响应方式：‌
传统Web应用中---------发送请求后，‌浏览器将等待服务器响应完成后重新加载整个页面。‌
Ajax技术---------浏览器不再空闲等待，‌通过JavaScript动态更新页面中需要更新的部分。‌
4.用户体验：‌
传统Web应用---------页面重新加载，可能导致页面加载速度较慢，‌用户体验较差。‌
Ajax技术---------允许网页在不刷新整个页面的情况下与服务器交换数据并更新部分内容，‌从而提高了用户体验和页面的响应速度。‌
综上所述，‌Ajax技术通过异步的方式与服务器通信，‌减少了用户等待时间，‌提高了应用程序的响应速度和用户体验，‌是现代Web开发中不可或缺的技术之一。‌

使用

1.XMLHttpRequest对象

该对象用于在前台与服务器交换数据。意味着可以在不重新加载整个网页的情况下，对网页的进行局部更新

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）

//获取XMLHttpRequest对象
function getXMLHttpRequest() {
	var xmlHttp;
	if (window.XMLHttpRequest) {// 新浏览器
		xmlHttp = new XMLHttpRequest();
	}else if (window. ActiveXObject) {// IE6及以下浏览器
		xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP");
	}
	return xmlHttp;
}

2.与服务器交换数据 open/send

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send()

函数	描述	示例
open(method,url,async);	初始化请求参数(请求方式,请求地址,是否异步)	xmlhttp.open(“GET”,“url”,true);
send();	发送请求	xmlhttp.send();

//发送异步的Post请求
function sendAjaxPost() {
	var xmlHttp = getXMLHttpRequest();
	//初始化请求参数
	xmlHttp.open("POST","MyServlet",true);
	//post需要设置请求头
    xmlHttp.setRequestHeader(
        "Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
	//发送请求，携带数据
	xmlHttp.send("username=abc&password=123");
} 

//发送异步的Get请求
function sendAjaxGet() {
	var xmlHttp = getXMLHttpRequest();
	//初始化请求参数
	xmlHttp.open("GET","MyServlet?username=abc&password=123",true);
	//发送请求，携带数据
	xmlHttp.send();
}

3.onreadystatechange事件

请求被发送到服务器时，我们需要执行一些基于响应的任务

函数	描述
onreadystatechange	每当 readyState 属性改变时，就会调用该函数。

属性	描述
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化: 0 - 请求未初始化服务器 1 - 连接已建立 2 - 请求已接收 3 - 请求处理中 4 - 请求已完成，且响应已就绪
status	存有响应的状态。 200 - OK 404 - 未找到页面

//发送异步的Post请求
function sendAjaxPost() {
	
	var xmlHttp = getXMLHttpRequest();
	
	//每当readyState改变时，就会触发 onreadystatechange事件
	xmlHttp.onreadystatechange = function() {
		console.log(xmlHttp.readyState);//打印XMLHttpRequest的状态
		console.log(xmlHttp.status + "xx");//打印响应的状态
	}
	xmlHttp.open("POST","MyServlet",true);
    xmlHttp.setRequestHeader(
        "Content-Type","application/x-www-form-urlencoded;charset-UTF-8");
	xmlHttp.send("username=abc&password=123");
}

前后端交互案例

以MVC修改的学生管理系统基础

账户是否可用

账号可用

StudentController添加判断，采用递归

    public  void isRegister(HttpServletRequest request,HttpServletResponse response) throws IOException {
        String username = request.getParameter("username");
        boolean register = studentService.isRegister(username);
        String code;
        if (register){
            code = "1";
        }else {
            code ="-1";
        }
        response.getWriter().write(code);
    }

修改register.jsp

在账号后面添加span标签用于显示，对输入框和span都添加id

js函数添加

1.获取XMLHttpRequest对象

2.username.onblur绑定失去焦点事件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

    ${msg}

    <h1>注册页面</h1>

    <form action="student?action=doRegister" method="post" enctype="multipart/form-data">

        账号：<input type="text" name="username" id="username"/><span id="usernameInfo"></span><br/>
        密码：<input type="password" name="password"/><br/>
        姓名：<input type="text" name="name"/><br/>
        年龄：<input type="text" name="age"/><br/>
        性别：
        <input type="radio" name="sex" value="man" checked="checked"/>男
        <input type="radio" name="sex" value="woman"/>女
        <br/>
        爱好：
        <input type="checkbox" name="hobbies" value="football"/>足球
        <input type="checkbox" name="hobbies" value="basketball"/>篮球
        <input type="checkbox" name="hobbies" value="shop"/>购物
        <br/>
        上传头像：<input type="file" name="photo"/><br/>
        籍贯：
            <select id="province" name="province">
                <option value="xxx">-- 请选择 --</option>
            </select>省
            <select id="city" name="city">
                <option value="xxx">-- 请选择 --</option>
            </select>市
            <br/>

        <input type="submit" value="注册"/>
        <input type="button" value="返回" οnclick="goWelcome()"/>
    </form>

    <script type="text/javascript">
        function goWelcome() {
            window.location = "welcome.html";
        }

        let province = document.getElementById("province");
        let city = document.getElementById("city");

        function showProvince(){
            let xmlHttp = getXMLHttpRequest();

            //绑定onreadystatechange事件
            xmlHttp.onreadystatechange = function (){
                //4表示服务器返回响应，200表示响应成功
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
                    //获取响应数据
                    let data = xmlHttp.responseText;
                    //解析json数据
                    let provinceArr = eval(data);
                    for (let i = 0;i<provinceArr.length;i++){
                        let code = provinceArr[i].code;
                        let name = provinceArr[i].name;
                        let option = document.createElement("option");
                        option.value = code;
                        option.innerText = name;
                        province.appendChild(option);
                    }
                }
            }
            //设置参数
            xmlHttp.open("GET","province?action=getProvinces");
            //发送请求
            xmlHttp.send();
        }
        showProvince();

        province.onchange = function (){
            let v = this.value;
            if (v == "xxx"){
                city.innerHTML = "<option value='xxx'>-- 请选择 --</option>";
            }else{
                let xmlHttp = getXMLHttpRequest();

                //绑定onreadystatechange事件
                xmlHttp.onreadystatechange = function (){
                    //4表示服务器返回响应，200表示响应成功
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){

                        //先清空城市列表
                        city.innerHTML = "";

                        //获取响应数据
                        let data = xmlHttp.responseText;
                        //解析json数据
                        let cityArr = eval(data);
                        for (let i = 0;i<cityArr.length;i++){
                            let code = cityArr[i].code;
                            let name = cityArr[i].name;
                            let option = document.createElement("option");
                            option.value = code;
                            option.innerText = name;
                            city.appendChild(option);
                        }
                    }
                }
                //设置参数
                xmlHttp.open("GET","province?action=getCities&code="+v);
                //发送请求
                xmlHttp.send();
            }
        }

        let username = document.getElementById("username");
        let usernameInfo = document.getElementById("usernameInfo");
        username.onblur = function (){
            //获取当前对象的value属性值
            let v = this.value;
            if (v.length != 0){

                //获取Ajax发送请求对象
                let xmlHttp = getXMLHttpRequest();

                //绑定onreadystatechange事件
                xmlHttp.onreadystatechange = function (){
                    //4表示服务器返回响应，200表示响应成功
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
                        //获取响应数据
                        let data = xmlHttp.responseText;
                        if (data == "1"){
                            usernameInfo.style.color = "green";
                            usernameInfo.innerText = "恭喜，账号可用";
                        }else if (data == "-1"){
                            usernameInfo.style.color = "red";
                            usernameInfo.innerText = "抱歉，账号已被注册";
                        }
                    }
                }
                //设置参数
                xmlHttp.open("POST","student?action=isRegister");
                //设置请求头信息
                xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset-UTF-8");
                //发送请求
                xmlHttp.send("username="+v);

            }
        }
		//获取XMLHttpRequest对象
        function getXMLHttpRequest(){
            let xmlHttp;
            if (window.XMLHttpRequest){
                xmlHttp = new XMLHttpRequest();
            }else if (window.ActiveXObject){//兼容IE6及以下版本
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xmlHttp;
        }

    </script>
</body>
</html>

二级联动

1.数据库设计：

建省市表，导sql

2.修改register.jsp

获取XMLHttpRequest对象

showProvince()展示省份信息

绑定onreadystatechange事件

province.onchange省份信息改变对应城市改变

3.服务器

实体类

public class Province {

    private String code;
    private String name;
}
public class City {

    private String code;
    private String name;
}

mapper层

public interface ProvinceMapper {
    public List<Province> getProvinces();

    public List<City> getCities(String parentCode);
}
public class ProvinceMapperImpl implements ProvinceMapper {
    @Override
    public List<Province> getProvinces() {
        try {
            List<Province> provinces = DBUtils.commonQueryList(Province.class, "select * from provinces where parent_code=?", "01");
            return provinces;
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
    }

    @Override
    public List<City> getCities(String parentCode) {
        try {
            List<City> cities = DBUtils.commonQueryList(City.class, "select * from provinces where parent_code=?", parentCode);
            return cities;
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
    }
}

service层

public interface ProvinceService {
    public String getProvinces();

    public String getCities(HttpServletRequest request);
}
public class ProvinceServiceImpl implements ProvinceService {
    private ProvinceMapper provinceMapper = new ProvinceMapperImpl();
    @Override
    public String getProvinces() {
        List<Province> provinces = provinceMapper.getProvinces();
        String jsonStr = JSON.toJSONString(provinces);

        return jsonStr;
    }

    @Override
    public String getCities(HttpServletRequest request) {
        String code = request.getParameter("code");
        List<City> cities = provinceMapper.getCities(code);
        String jsonStr = JSON.toJSONString(cities);
        return jsonStr;
    }
}

controller层

@WebServlet("/province")
public class ProvinceController extends BaseServlet {
    private ProvinceService provinceService = new ProvinceServiceImpl();

    public void getProvinces(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String provinces = provinceService.getProvinces();
        response.getWriter().write(provinces);
    }

    public void getCities(HttpServletRequest request,HttpServletResponse response) throws IOException {
        String cities = provinceService.getCities(request);
        response.getWriter().write(cities);

    }

}