Ajax: full name of Asynchronous JavaScript and XML, which means performing asynchronous network requests with JavaScript.
If you look closely submit a Form, you will find that once the user clicks the "Submit" button to begin submitting the form, the browser will refresh the page, and then tell you the new page in the operation succeeded or failed. If, unfortunately, because the network is too slow or for other reasons, you get a 404 page.
This is the principle of operation of the Web: HTTP request corresponding to a page.
If you want users to stay on the current page, also issued a new HTTP request, it must send a new request with JavaScript, after receiving the data, and then update the JavaScript page, so that users feel themselves still stuck in the current page , but the data can be continuously updated.
Ajax process flow:
Ajax first application, the equivalent of Hello World !, entry required in java
1. Create a dynamic Web project, create a new file in the WebContent index.jsp
index.jsp code as follows:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
//1.获取a节点，并为其添加onclick响应函数
document.getElementsByTagName("a")[0].onclick=function(){
//3.创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
//4.准备发送请求的数据：url
var url = this.href;
var method="GET";
//5.调用XMLHttpRequest对象的open方法
request.open(method,url);
//6.调用XMLHttpRequest对象的send方法
request.send(null);
//7.为XMLHttpRequest对象添加onreadystatechange响应函数
request.onreadystatechange=function(){
//8.判断响应是否完成：XMLHttpRequest对象的ReadyState属性值为4的时候
if(request.readyState==4){
//9.再判断响应是否可用：XMLHttpRequest对象的status属性值为200
if(request.status==200||request.status==304){
//10.打印响应结果：responseText
alert(request.responseText);
}
}
}
//2.取消a节点的默认行为
return false;
}
}
</script>
</head>
<body>
<a href="helloAjax.txt">HelloAjax</a>
</body>
</html>
2. Create a new file in the helloAjax.txt WebContent, which reads as follows:
Hello Ajax!
3. Start Tomcat, enter part of the URL url : HTTP: // localhost: 8080 / ajax / index.jsp
click on the link, a dialog box, the program runs successfully!
Right Inspect Element browser, the status code 200 indicates a successful response:
Summary analysis:
the XMLHttpRequest object and use it for the core object server Ajax communication is composed of three key components.
1.onreadystatechange event handler
2.open method
3.send method
Partner may feel nice little upper right corner a praise or attention yo!