If you want to learn basic ajax knowledge, you can go to the following website to learn:
What is ajax?
AJAX = Asynchronous JavaScript and XML.
AJAX is a technique for creating fast and dynamic web pages.
AJAX enables web pages to be updated asynchronously by exchanging small amounts of data with the server in the background. This means that parts of a page can be updated without reloading the entire page.
Traditional web pages (without AJAX) require reloading the entire web page if the content needs to be updated.
There are many application cases using AJAX: Sina Weibo, Google Maps, Kaixin, etc.
Here's the ajax basics:
XMLHttpRequest is the basis of ajax (all newer browsers support the XMLHttpRequest object)
Older versions of IE5 and IE6 use ActiveX objects (long gone);
If you want to use ajax, you must first create a new object in the js method of the web page
var xmlhttp=new XMLHttpRequest();
If we need to send the request to the server, we use the open and send methods of this object
Through the above two distributions, we can send requests to the server in two ways
/*The third parameter of the open method indicates whether it is asynchronous, AJAX refers to asynchronous, so the parameter must be true*/
// a simple GET request
xmlhttp.open("GET","demo.jsp？data="+data,true);
xmlhttp.send();
// a simple POST request
xmlhttp.open("POST","demo.jsp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("data=xxx");
When using async, the onreadystatechange event occurs when the server has responded (ready state)
xmlhttp.readyState==4&&xmlhttp.status==200
When the server has responded, the information in the form of a string or XML from the server will be obtained through the responseText and responseXML attributes.
Here is a simple example:
test.html
<html>
<head></head>
<body>
<label>nickname:</label><input type="text" id="nic" value="" name="nick" onchange="check(this.value)" /><label id="nicktips" ></label><br/>
</body>
<script type="text/javascript">
var xmlhttp;
function check(str){
//Check if the string is empty
if (str.length==0)
{
document.getElementById("nicktips").innerHTML="";
return;
}
//Create new object to send request
xmlhttp=new XMLHttpRequest();
//listen for server response
xmlhttp.onreadystatechange=showstate;
xmlhttp.open("GET","check.jsp?nickname="+str,true);
xmlhttp.send(null);
}
function showstate()
{ //The server completes the response
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("nicktips").innerHTML=xmlhttp.responseText;
}else{
//The server has not completed the corresponding
document.getElementById("nicktips").innerHTML="<font color=red>Detecting....</font>";
}
}
</script>
</html>
Background (no database connection):
check.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
System.out.println("ttttttttttt"+request.getParameter("nickname"));
response.getWriter().println("<font font=green>test</font>");%>