Ajax:全称Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求。
如果仔细观察一个Form的提交,你就会发现,一旦用户点击“Submit”按钮,表单开始提交,浏览器就会刷新页面,然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因,就会得到一个404页面。
这就是Web的运作原理:一次HTTP请求对应一个页面。
如果要让用户留在当前页面中,同时发出新的HTTP请求,就必须用JavaScript发送这个新请求,接收到数据后,再用JavaScript更新页面,这样一来,用户就感觉自己仍然停留在当前页面,但是数据却可以不断地更新。
Ajax处理流程:
Ajax第一个应用程序,相当于java中的Hello World!,入门必备
1.新建一个Web动态工程,在WebContent下新建一个index.jsp文件
index.jsp中代码如下:
<%@ 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.在WebContent下新建一个helloAjax.txt文件,内容如下:
Hello Ajax!
3.启动Tomcat,网址部分输入url:http://localhost:8080/ajax/index.jsp
点击链接,弹出对话框,程序运行成功!
浏览器右键审查元素,状态码200表示成功响应:
总结分析:
Ajax的核心对象时XMLHttpRequest对象,利用它与服务器进行通信包含以下三个关键部分。
1.onreadystatechange事件处理函数
2.open方法
3.send方法
觉得不错的小伙伴可以右上角点个赞或关注哟!