Ajax + servlet + JSP display search results

1、 AJAX is considered to be the abbreviation of (asynchronous JavaScript and XML). The technologies that allow the browser to communicate with the server without refreshing the current page are called Ajax eg: Baidu search, real-time map, etc. in the Ajax model, the data is transmitted independently between the client and the server, and the server can update the data without refreshing the whole page;

2、 Schematic diagram of Ajax

3、 Ajax sends and receives corresponding methods 1, sends and requests corresponding methods 1), onreadystatechange event processing function: this function is triggered by the server rather than the user, and onreadystatechange event 2) will be triggered every time readyState property is changed Open (method, URL, synchronized): the open () of the XMLHttpRequest object allows the program to call the server with an Ajax to send a request. The method request type can be "get" or "post", the URL is the path string, and sysnchronized indicates whether the request needs asynchronous transmission. 3) send (data): data is the string that will also be passed to the server. If "get" request is selected, Data is null

2. Receive corresponding methods 1). ReadyState: indicates the current state of Ajax, which is represented by a numerical value. 0 indicates initialization, 1 indicates loading, 2 indicates loading is completed, 3 indicates that the server is sending a response, and 4 indicates that the response is sent. When the request ends, each browser will set the value of readyState to 4; 2) Status: as in JavaWeb, 404 does not find the page, 403 prohibits access, 500 internal server error, 200 everything is normal, 304 has not been modified, and the status code sent by the server is saved in the status attribute in the XMLHttpRequest object. This value can ensure whether the server has sent a successful response; 3) ResponseText: contains the data sent from the server, generally HTML, XML or plain text. The responseText attribute can only be used when the readyState value is 4 and the status is 200. It appears that the Ajax request has ended. If the server returns XML, the data will be stored in responsexml

4、 Code demonstration (imitating Baidu search box)

1. Create a Java Web project (the project directory structure is as follows)

2、SearchServlet. java

3、DataUtils. Java, read the data under the resource file

4、index. JSP, page display

5、my. JS, the core part of Ajax

6、my. CSS, control style

Note: the code comes from the learning of the Internet. I have improved it myself. I hope you are interested in communicating and learning together

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.