首页 网络技术
  1. 正文

Ajax怎么实现客户端与浏览器异步交互

客户端与浏览器交互方式

1.同步交互

例如超链接,表单请求服务器程序,向客户端做出响应,响应的内容会覆盖原来的页面内容,会打断客户端正常操作,不友好。

2.异步交互(ajax)

客户端与服务器之间交互时,服务器向客户端响应内容,不影响客户端正常操作

Ajax 全称为:“Asynchronous JavaScript and XML”(异步JavaScript 和 XML)

使用 Ajax,我们可以无刷新状态更新页面,并且实现异步提交,提升了

用户体验。

举个栗子

通过异步交互的方式达到了与远端数据库内信息的交互,达到便捷的验证效果,相比原来最原始同步验证方式便捷了不少,也增加了注册用户的使用体验

Ajax其实质是利用浏览器提供的一个特殊的对象(XMLHttpRequest)异步地向服务器发送请求,服务器返回部分数据,浏览器让你去利用这些数据对页面做部分的更新,整个过程,页面无刷新,不打断用户的操作。

在上一回的基础上我们开始学习新的功能模块

创建XMLHttpRequest对象

XMLHttpRequest对象:发送请求到服务器并获得返回结果

所有现代浏览器 都内建了 XMLHttpRequest 对象,通过一行简单的JavaScript 代码,我们就可以创建 XMLHttpRequest 对象

第一步

在我们之前写过的超简易前端界面添加JavaScript代码,获取框内值

  //获取account,password的值

            var account=document.getElementsById("account")。value();

            var password=document.getElementById("password")。value();

第二步

在LoginServlet中重写的doPost方法中请求数据

 resp.setContentType("text/html;charset=utf-8");//响应格式设置

            req.setCharacterEncoding("utf-8");//设置post请求数据解码格式

            String account = req.getParameter("account");

            String password = req.getParameter("password");

第三步

这里需要添加mysql-connector-java-8.0.16.jar包,利用JDBC部分的知识进行数据库之间的链接交互

需要jar包的可以在网上自寻查找

或者

利用此链接:https://pan.baidu.com/s/17HvfN4YGEMulGi3nBemOzA 下载

提取码:acyl

需要学习/复习JDBC部分的内容可以看这个博客

https://blog.csdn.net/qq_51352148/article/details/118797329.

 LoginDao loginDao=new LoginDao();

            User user= loginDao.checkLogin(account,password);

LoginDao代码

package com.qn.firstweb.dao;

import com.qn.firstweb.mode.User;

import java.sql.*;

public class LoginDao {

    public User checkLogin(String account, String password) throws SQLException, ClassNotFoundException {

        Connection connection = null;

        PreparedStatement ps = null;

        ResultSet resultSet = null;

        User user = null;

        try {

            Class.forName("com.mysql.cj.jdbc.Driver");

           

            connection = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/ssm?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai", "root", "root");

            ps = connection.prepareStatement("select account from t_student where account=?and password=?");

            ps.setString(1, account);

            ps.setString(2, password);

            resultSet = ps.executeQuery();

            if (resultSet.next()) {

                user = new User();

                user.setAccount(resultSet.getString("account"));

            }

        } finally {

            if (connection != null) {

                connection.close();

            }

            if (ps != null) {

                ps.close();

            }

            if (resultSet != null) {

                resultSet.close();

            }

        }

        return user;

    }

}

本文标题:Ajax怎么实现客户端与浏览器异步交互
本文链接:https://www.qqooo.cn/post/6707.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!