Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how Ajax realizes the asynchronous interaction between the client and the browser. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

How the client interacts with the browser

1. Synchronous interaction

For example, hyperlink, form request server program, respond to the client, the content of the response will cover the original page content, will interrupt the normal operation of the client, unfriendly.

two。 Asynchronous interaction (ajax)

When the client and the server interact, the server responds to the content to the client, which does not affect the normal operation of the client.

The full name of Ajax is "Asynchronous JavaScript and XML" (asynchronous JavaScript and XML)

Using Ajax, we can update the page without refreshing the status, and implement asynchronous submission, improving the

User experience.

Take a chestnut.

Through the way of asynchronous interaction, it achieves the interaction with the information in the remote database, and achieves the convenient verification effect, which is much more convenient than the original synchronous verification method, and also increases the user experience of registered users.

The essence of Ajax is to use a special object (XMLHttpRequest) provided by the browser to asynchronously send requests to the server, the server returns part of the data, the browser allows you to use these data to do part of the update of the page, the whole process, the page does not refresh, do not interrupt the user's operation.

On the basis of the last time, we began to learn new functional modules.

Create a XMLHttpRequest object

XMLHttpRequest object: sends a request to the server and gets the return result

All modern browsers have built-in XMLHttpRequest objects, and we can create XMLHttpRequest objects with a simple line of JavaScript code.

The first step

Add JavaScript code to the ultra-simple front-end interface we wrote before to get the value in the box.

/ / get the value of account,password

Var account=document.getElementsById ("account"). Value ()

Var password=document.getElementById ("password"). Value ()

Step two

Request data in the doPost method overridden in LoginServlet

Resp.setContentType ("text/html;charset=utf-8"); / / response format setting

Req.setCharacterEncoding ("utf-8"); / / sets the decoding format of post request data

String account = req.getParameter ("account")

String password = req.getParameter ("password")

Step three

Here we need to add the mysql-connector-java-8.0.16.jar package and use the knowledge of the JDBC part for the link interaction between the databases.

Those who need jar package can find it on the Internet.

Or

Use this link: https://pan.baidu.com/s/17HvfN4YGEMulGi3nBemOzA download

Extraction code: acyl

If you need to learn / review the JDBC section, you can see this blog.

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

LoginDao loginDao=new LoginDao ()

User user= loginDao.checkLogin (account,password)

LoginDao code

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")

/ * how to create a connection to the database * /

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

}

}

These are all the contents of the article "how to achieve asynchronous interaction between client and browser in Ajax". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.