JavaScript和jQuery中的AJAX

最新推荐文章于 2020-09-12 23:10:26 发布

努力和时间做朋友

最新推荐文章于 2020-09-12 23:10:26 发布

阅读量540

点赞数

分类专栏：【JAVA积累】

本文链接：https://blog.csdn.net/lfh15732626246/article/details/60778036

版权

【JAVA积累】专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Ajax是Asynchromous JavaScript And XML的缩写，即AJAX=异步JavaScript+XML,可以使网页实现异步更新，就是在不重新加载整个网页的情况下，对网页的某部分进行局部刷新，是一种新的思想，用于创建快速交互式网页应用的网页开发技术，比如163邮箱中注册账号，当输入一个号码光标离开时，就会告诉用户这个号码可不可用，而不是当所有信息填写完毕，点击注册的时候告诉不可用，填写的一切数据都清空了，前者会给用户更好的体验不是吗，既然ajax用户体验效果好，接下来我们就聊聊如何使用它。

【AJAX的原理】

【JavaScript中的ajax】

提交方式分为get和post，在这里我用简单的get举例说明。

<body>
	<form action="" method="get">
		用户名：<input type='text' value="jack" name="username"> 
		密码：<input type='password' value="123" name="password"> 
		<input type='submit'  οnclick="sendGet()"> 
	</form>
</body>

ajax代码

<script type="text/javascript">
function sendGet(){
	//获得ajax引擎
	var xmlHttp=new XMLHttpRequest();
	//设置回调函数
	xmlHttp.onreadystatechange=function(){
		if(xmlHttp.readyState==4){
			if(xmlHttp.status==200){
				alert("响应数据"+xmlHttp.responseText);
			}
		}
	}
	//确定请求方式和路径以及参数
	xmlHttp.open("GET","/ee_Day28RedisAndJedis/LoginServlet?username=jack&password=123");
	//发送请求
	xmlHttp.send(null);
	//post提交方式
	//xmlHttp.open("POST","/ee_Day28RedisAndJedis/LoginServle");
	//xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
	//xmlHttp.send("username=jack&password=123");
	
}

servlet

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		String username=request.getParameter("username");
		String password =request.getParameter("password");
		//简单处理，一般通过三层检验
		System.out.println(username+password);
		//响应
		response.getWriter().println(username+password);
	}

【jQuery中的AJAX】

jQuery是JavaScript的框架，和JavaScript有异曲同工之妙，只是更加简单，代码更加优化，我们一般采用jQuery的ajax。

格式：$.post(url-请求路径,[data-请求参数],[callback-回调函数],[type-返回数据类型一般是json])

注意：需要引入jQuery的包

同样的案例用jQuery是这样的。

<script type="text/javascript" src="/ee_Day28RedisAndJedis/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function(){
	$("#myID").click(function(){
		var url="/ee_Day28RedisAndJedis/LoginServlet";
		var params={
				"username":"jack",
				"password":123
		};
		$.post(url,params,function(data){
			alert(data);
		});
	});
});
</script>

【json数据和转换】

json是一种轻量级的数据交换格式，易于阅读也易于机器解析，在浏览器和服务器交换中常常采用json格式，能提升网络传输效率。

json对象格式：{"key1":"value1","key2":"value2",……}

json数组格式：[obj1,obj2,obj3],数组中可以存放对象。

服务器和浏览器交换中可以采用第三方jar包的形式将java对象或java集合转换成json数据。

处理map和对象

public void demo1(){
		//JSON处理map
		Map map = new HashMap<String ,String >();
		map.put("a", "aa");
		map.put("b", "bb");
		//JSON处理对象
		System.out.println(JSONObject.fromObject(map).toString());
		Person person = new Person("jack","18","男");
		System.out.println(JSONObject.fromObject(person).toString());
	}

显示结果：

{"b":"bb","a":"aa"}
{"age":"18","name":"jack","sex":"男"}
处理list和数组

public void demo2(){
		List<String> list = new ArrayList<String>();
		list.add("a");
		list.add("b");
		System.out.println(JSONArray.fromObject(list).toString());
	}

显示结果：["a","b"]

ajax实现异步刷新，复杂的案例都是在简单的基础上延伸的，重要的是将这些基础的知识掌握，再难的问题也可以攻克，加油

努力和时间做朋友

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
16
评论
JavaScript和jQuery中的AJAX

Ajax是Asynchromous JavaScript And XML的缩写，即AJAX=异步JavaScript+XML,可以使网页实现异步更新，就是在不重新加载整个网页的情况下，对网页的某部分进行局部刷新，是一种新的思想，用于创建快速交互式网页应用的网页开发技术，比如163邮箱中注册账号，当输入一个号码光标离开时，就会告诉用户这个号码可不可用，而不是当所有信息填写完毕，点击注册的时候告诉不可
复制链接

扫一扫