Ajax怎么實現客戶端與瀏覽器異步交互

今天小編給大家分享一下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怎么實現客戶端與瀏覽器異步交互”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。