Ajax怎么實(shí)現(xiàn)客戶端與瀏覽器異步交互

今天小編給大家分享一下Ajax怎么實(shí)現(xiàn)客戶端與瀏覽器異步交互的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

客戶端與瀏覽器交互方式

1.同步交互

例如超鏈接，表單請(qǐng)求服務(wù)器程序，向客戶端做出響應(yīng)，響應(yīng)的內(nèi)容會(huì)覆蓋原來的頁(yè)面內(nèi)容，會(huì)打斷客戶端正常操作，不友好。

2.異步交互（ajax）

客戶端與服務(wù)器之間交互時(shí)，服務(wù)器向客戶端響應(yīng)內(nèi)容，不影響客戶端正常操作

Ajax 全稱為：“Asynchronous JavaScript and XML”（異步JavaScript 和 XML）

使用 Ajax，我們可以無刷新狀態(tài)更新頁(yè)面，并且實(shí)現(xiàn)異步提交，提升了

用戶體驗(yàn)。

舉個(gè)栗子

通過異步交互的方式達(dá)到了與遠(yuǎn)端數(shù)據(jù)庫(kù)內(nèi)信息的交互，達(dá)到便捷的驗(yàn)證效果，相比原來最原始同步驗(yàn)證方式便捷了不少，也增加了注冊(cè)用戶的使用體驗(yàn)

Ajax其實(shí)質(zhì)是利用瀏覽器提供的一個(gè)特殊的對(duì)象（XMLHttpRequest）異步地向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器返回部分?jǐn)?shù)據(jù)，瀏覽器讓你去利用這些數(shù)據(jù)對(duì)頁(yè)面做部分的更新，整個(gè)過程，頁(yè)面無刷新，不打斷用戶的操作。

在上一回的基礎(chǔ)上我們開始學(xué)習(xí)新的功能模塊

創(chuàng)建XMLHttpRequest對(duì)象

XMLHttpRequest對(duì)象：發(fā)送請(qǐng)求到服務(wù)器并獲得返回結(jié)果

所有現(xiàn)代瀏覽器 都內(nèi)建了 XMLHttpRequest 對(duì)象，通過一行簡(jiǎn)單的JavaScript 代碼，我們就可以創(chuàng)建 XMLHttpRequest 對(duì)象

第一步

在我們之前寫過的超簡(jiǎn)易前端界面添加JavaScript代碼，獲取框內(nèi)值

  //獲取account,password的值

            var account=document.getElementsById（"account"）。value（）;

            var password=document.getElementById（"password"）。value（）;

第二步

在LoginServlet中重寫的doPost方法中請(qǐng)求數(shù)據(jù)

 resp.setContentType（"text/html;charset=utf-8"）;//響應(yīng)格式設(shè)置

            req.setCharacterEncoding（"utf-8"）;//設(shè)置post請(qǐng)求數(shù)據(jù)解碼格式

            String account = req.getParameter（"account"）;

            String password = req.getParameter（"password"）;

第三步

這里需要添加mysql-connector-java-8.0.16.jar包，利用JDBC部分的知識(shí)進(jìn)行數(shù)據(jù)庫(kù)之間的鏈接交互

需要jar包的可以在網(wǎng)上自尋查找

或者

利用此鏈接：https://pan.baidu.com/s/17HvfN4YGEMulGi3nBemOzA 下載

提取碼：acyl

需要學(xué)習(xí)/復(fù)習(xí)JDBC部分的內(nèi)容可以看這個(gè)博客

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"）;

            /* 創(chuàng)建與數(shù)據(jù)庫(kù)連接的方式*/

            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怎么實(shí)現(xiàn)客戶端與瀏覽器異步交互”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。