10.29 Ajax和Json

最新推荐文章于 2022-10-31 10:49:48 发布

wsxyerr

最新推荐文章于 2022-10-31 10:49:48 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/wsxye18730291676/article/details/102793182

版权

10.29 Ajax和Json

一、Ajax

1、概念：
Asynchronous JavaScript And XML 异步的JavaScript和XML
(1)同步和异步：在客户端和服务器相互通信的基础上
同步：客服端继续等待服务器的响应，在等待的期间客户端不能做其他操作
异步：客户端不需要等待服务器的响应。在服务器处理请求的过程中，客户端可以进行其他操作。当客户端已收到服务器的响应时，就回去l立刻处理响应。

Ajax是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新。这意味着在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。

目的就是为了：增加用户的体验

2.实现方式
（1）原生的JS实现方式（了解即可，用的不多）
（2）JQuery的实现方式（由于做了封装，所以实现方便），该方式又有三种方式
（2.1）$.ajax() //通用的方式
$.ajax({键值对});

（2.2）$.get() //对于get请求的封装
$.get(url,[data],[callback],[type]),
第一个参数是必须的，后三个参数是可选的（[]表示可选）
url：请求路径
data:请求参数
callback:回调函数：数据返回来后回调用回调函数
type:响应结果的类型

（2.3）$.post() //对于post请求的封装
用法几乎和$.get一样，参数也一样

$.ajax()方式演示：

html端：
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
    <script>
    
    	function fun(){
    		
    		//使用$.ajax()发送异步请求
    		$.ajax({
    			url:"ajaxServlet",  //请求的路径
    			type:"POST",  //请求的方式，默认是get
    			//data:"username=jack&age=23",  //请求参数或写成
    			data:{"username":"jack","age":23},  //推荐使用该方式
    			success:function(data){
    				
    				alert(data);
    				
    			},  //相应成功后的回调函数，data用来接收服务器相应回来的结果
    		}); 
    		
    		
    	}
    
    </script>

</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">

</body>

ajaxServlet端：
String username = request.getParameter("username");
String age = request.getParameter("age");
response.getWriter().write("hello:"+username);
System.out.println(username);

其他键值对：

$.ajax({
error:function(){
	alert("出错啦");
}  //表示如果请求响应出现错误，会执行的函数
dataType:"text" //设置接收到的响应数据的格式，还有“Json”等取值
});

$.get()方式：用来发送get请求

html端：
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
    <script>
    
    	function fun(){
    		
    		//使用$.get()发送异步请求
    		
    		$.get("ajaxServlet",{"username":"rose","age":23},function(data){
    			alert(data);
    		},"text");   //data为服务器相应的数据
    		
    	}
    
    </script>

</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">

</body>

ajaxServlet端与上面相同

$.post()方式：用来发送post请求

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
    <script>
    
    	function fun(){
    		
    		//使用$.get()发送异步请求
    		
    		$.post("ajaxServlet",{"username":"rose22","age":23},function(data){
    			alert(data);
    		},"text");   //data为服务器相应的数据
    		
    	}
    
    </script>

</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">

</body>


ajaxServlet一样

wsxyerr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10.29 Ajax和Json

10.29 Ajax和Json一、Ajax1、概念：Asynchronous JavaScript And XML 异步的JavaScript和XML(1)同步和异步：在客户端和服务器相互通信的基础上同步：客服端继续等待服务器的响应，在等待的期间客户端不能做其他操作异步：客户端不需要等待服务器的响应。在服务器处理请求的过程中，客户端可以进行其他操作。当客户端已收到服务器的响应时，就回...
复制链接

扫一扫