初步使用Ajax

What is Ajax?

Ajax 全称 Asynchronous JavaScript and XML,其实它没有用到新的技术,只是将JavaScript技术和XML结合和发展,使Web应用更加高效和快捷 

 

Why use Ajax?

B/S结构的不足

l   表现力比较弱, 相比C/S结构中的客户端程序,浏览器的表现力要吃次很多

l   效率比较低每一次的请求”--”响应过程中,其中有很多数据是重复的.

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最简单的应用了.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值