简单了解Ajax

一.什么Ajax?

Ajax:异步的Javascript和XML,用于完成局部刷新
XML是用于数据传输,现在外面开始都使用JSON

二.原生的Ajax实现方式

方法

  • 获取Ajax对象(必须区分大小写)
    var xhr = new XMLHttpRequest();

  • 准备请求
    methodType:请求的方式(GET/POST)
    methodUrl:请求的路径
    isSys:是否异步(默认为true)

  • 设置请求头类型

    设置请求头的一个类型,如果是POST请求,一定要加这一句,才可以把数据传到后台位置:open之后,send之前
    xhr.open(methodType,methodUrl,isSys)

  • 发送请求
    varBody:POST请求传参(key=value&key=value&…)
    xhr.send(varBody)

属性
xhr.status : 请求状态(200代表成功)
xhr.readyState : 响应状态(4代表响应完成)
xhr.responseText : 获取返回的数据(字符串)
事件
xhr.onreadystatechange =function(){} -> 监听readyState状态的变化

三.注意事项

  • 使用Ajax请求,后台不进行跳转,只做数据的传输

  • 返回的值都是字符串,需要我们自己做相当的判断与转换

简单Ajax案例(登录案例)

后台代码

@WebServlet("/login")
public class LoginServlet extends HttpServlet{

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String username = req.getParameter("username");
		String password = req.getParameter("password");
	
		if ("abc".equals(username) && "123".equals(password)) {
			resp.getWriter().print("true");
		}else{
			resp.getWriter().print("false");
		}
	}
}

前端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function login(){
		//1.获取用户名和密码
		var username = document.getElementById("username").value;
		var password = document.getElementById("password").value;
		//2.创建Ajax对象
		var xhr = new XMLHttpRequest();
		//3.准备请求(get请求在路径传参,post请求在send中传参)
		xhr.open("post","/login");
		//如果是post请求必须设置请求头类型,后台才可以拿到相应的数据
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		
		//监听相应的事件
		xhr.onreadystatechange = function(){
			if (xhr.status==200 && xhr.readyState==4) {
				var result = xhr.responseText;
				
				if (result=="true") {
					alert("登陆成功");
				}else{
					document.getElementById("err").innerHTML = "用户名或密码错误";
				}
			}
			
		}
		
		//4.发送请求(send里面加上发送的数据)
		xhr.send("username="+username+"&password="+password);
	}
	
</script>
</head>
<body>
<form action="/login" method="post">
	<span style="color: red" id="err" ></span></br>
	用户名:<input type="text" name="username" id="username"/>
	密码:<input type="password" name="password" id="password"/>
	<input type="button"  onclick="login()" value="登陆"/>
</form>
</body>
</html>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
城市应急指挥系统是智慧城市建设的重要组成部分,旨在提高城市对突发事件的预防和处置能力。系统背景源于自然灾害和事故灾难频发,如汶川地震和日本大地震等,这些事件造成了巨大的人员伤亡和财产损失。随着城市化进程的加快,应急信息化建设面临信息资源分散、管理标准不统一等问题,需要通过统筹管理和技术创新来解决。 系统的设计思路是通过先进的技术手段,如物联网、射频识别、卫星定位等,构建一个具有强大信息感知和通信能力的网络和平台。这将促进不同部门和层次之间的信息共享、交流和整合,提高城市资源的利用效率,满足城市对各种信息的获取和使用需求。在“十二五”期间,应急信息化工作将依托这些技术,实现动态监控、风险管理、预警以及统一指挥调度。 应急指挥系统的建设目标是实现快速有效的应对各种突发事件,保障人民生命财产安全,减少社会危害和经济损失。系统将包括预测预警、模拟演练、辅助决策、态势分析等功能,以及应急值守、预案管理、GIS应用等基本应用。此外,还包括支撑平台的建设,如接警中心、视频会议、统一通信等基础设施。 系统的实施将涉及到应急网络建设、应急指挥、视频监控、卫星通信等多个方面。通过高度集成的系统,建立统一的信息接收和处理平台,实现多渠道接入和融合指挥调度。此外,还包括应急指挥中心基础平台建设、固定和移动应急指挥通信系统建设,以及应急队伍建设,确保能够迅速响应并有效处置各类突发事件。 项目的意义在于,它不仅是提升灾害监测预报水平和预警能力的重要科技支撑,也是实现预防和减轻重大灾害和事故损失的关键。通过实施城市应急指挥系统,可以加强社会管理和公共服务,构建和谐社会,为打造平安城市提供坚实的基础。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值