Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。也就是说,允许浏览器与服务器通信而无需刷新当前页面的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
**首先举个简单的get请求的例子
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>首页</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 + "?time=" + new Date();
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||requrst.status==304){
//10.打印相应结果:requestText
alert(request.responseText);
}
}
}
//2.取消a节点的默认行为
return false;
}
}
</script>
</head>
<body>
<a href="login.jsp">超链接</a>
</body>
</html>
实现效果就是弹出login.jsp的内容而不让页面刷新。
在<javascript>标签里面编写AJAX代码
1.创建表单
<form>
<input type="text" name="name" id="name">
<input type="text" name="age" id="age">
<input type="text" name="gender" id="gender">
<input type="button" id="sub" value="提交">
</form>
2.编写js部分
<script src="js/jquery-1.11.1.min.js"></script>//引入jar包
<script>
$('#sub').click(function(){
var name = $("#name").val();
var age = $("#age").val();
var gender = $("#gender").val();
$.ajax({
type:"POST",//提交方式
url:"TestServlet",//提交的url请求(一般是servlet请求)
data:{"name":name,"age":age,"gender":gender},//将数据封装成json格式
dataType:"json",//数据类型
success:function (data) { //回调函数
window.location.href="success.jsp"
}
});
});
</script>
后台的servlet中写的代码:
response.getWriter().print("1");
网友评论