初步使用Ajax
What is Ajax?
Ajax 全称
Asynchronous
JavaScript and XML,其实它没有用到新的技术,只是将JavaScript技术和XML结合和发展,使Web应用更加高效和快捷
Why use Ajax?
B/S结构的不足
a) 表现力比较弱, 相比C/S结构中的客户端程序,浏览器的表现力要吃次很多
b) 效率比较低, 每一次的”请求”--”响应”过程中,其中有很多数据是重复的.
Ajax可以解决一定程度的问题
How to use Ajax?
l
Ajax
的工作原理
页面中内嵌JavaScript, 通过它的内置对象XMLHttpRequest发送数据给服务器,服务器处理完后发回的是XML数据, 最后在本地页面进行
局部刷新
l Simple Example
1.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>Ajax Simple Example</title>
</head>
<script type="text/javascript">
var req;
function test() {
req = new ActiveXObject('Microsoft.XMLHTTP');
req.open('get','server.jsp',true);
// 打开URL连接 true 表示 基于异步方式 即时返回
req.onreadystatechange=callback; //设置回调函数
req.send(null); //即时返回
}
function callback() {
var state = req.readyState;
if (state == 4) { //完成
var data = req.responseText;
fillinfo(data);
}
}
function fillinfo(message) {
var info = document.getElementById("info");
info.innerHTML = message;
}
</script>
<body>
<input type="button" value="click" οnclick="test()">
<div id="info"></div>
</body>
</html>
server.jsp
<%
out.println("HelloWorld");
%>
效果:
点击click按钮后,会发现页面并没有刷新,而按钮下面就显示了HelloWorld,这就是Ajax最简单的应用了.
135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
