Ajax_HelloWorld
-- 不是一种新技术, 是多种技术的聚合
优点:
在不刷新整个网页的情况下, 对局部网页进行刷新, 从而实现数据的异步交互.
缺点:
1. 页面局部刷新, 导致后退等功能失效
2. 对流媒体的支持没有flash, javaApplet好
3. 一些手持设备如手机, 支持性差
执行步骤:
范例: ajax的HelloWorld
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
window.onload = function() {
// 获取事件对象
var obj = document.getElementsByTagName("a")[0];
// 定义对象的行为
obj.onclick = function() {
// 1. 创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
// 2. 准备发送的URL和方式
var url = this.href;
var method = "GET";
// 3. 准备发送
request.open(method, url);
// 4. 开始发送
request.send(null);
// 5. 响应函数
request.onreadystatechange = function() {
// 判断响应是否完成
if (request.readyState == 4) {
// 判断响应是否正确
if (request.status == 200 || request.status == 304) {
var responseText = request.responseText;
alert(responseText);
}
}
}
// 取消对象的默认行为, 即: 点击之后停留在本页面不跳转
return false;
}
}
</script>
</head>
<body>
<a href="Hello.txt">Ajax</a>
</body>
</html>
测试:
-----------------------
禁用缓存:
var url = this.href + "?time = " + new Date();
因为new Date()是时刻变化的, 所以url也是随时变化, 这样就可以让浏览器时时刻刻都发送不同的请求状态,
防止浏览器"偷懒"!
---------------------------
发送post请求:
var method = "POST";
request.setRequestHeader("ContentType", "application/x-www-form-urlencoded");
request.send("name='Peter'");
测试:
浙公网安备 33010602011771号