【javaweb简单教程】11.Ajax与jQuery超简单教程（含小例子代码）

最新推荐文章于 2024-03-13 07:00:00 发布

Tuerlechat，

最新推荐文章于 2024-03-13 07:00:00 发布

阅读量304

点赞数

分类专栏： # Java web 文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/weixin_55452293/article/details/127220400

版权

Java web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

11.Ajax与jQuery

Ajax简介

Ajax：异步刷新技术

传统Web与Ajax的差异

差异	方式	说明
发送请求方式不同	传统Web	浏览器发送同步请求
	Ajax技术	异步引擎对象发送请求
服务器响应不同	传统Web	响应内容是一个完整页面
	Ajax技术	响应内容只是需要的数据
客户端处理方式不同	传统Web	需等待服务器响应完成并重新加载整个页面后用户才能进行操作
	Ajax技术	可以动态更新页面中的部分内容不影响用户在页面进行其他操作

XMLHttpRequest

整个Ajax技术的核心
提供异步发送请求的能力
常用方法

方法	说明
open( String method, String url, boolean async, String user, String password )	创建一个新的HTTP请求
send( String data )	发送请求到服务器端
abort( )	取消当前请求
setRequestHeader( String header, String value )	设置请求的某个HTTP头信息
getResponseHeader( String header )	获取响应的指定HTTP头信息
getAllResponseHeader( )	获取响应的所有HTTP头信息

事件
onreadystatechange：指定回调函数

常用属性
readyState：XMLHttpRequest的状态信息

就绪状态码	说明
0	XMLHttpRequest对象未完成初始化
1	XMLHttpRequest对象开始发送请求
2	XMLHttpRequest对象的请求发送完成
3	XMLHttpRequest对象开始读取响应
4	XMLHttpRequest对象读取响应结束

常用属性（续）

status：HTTP的状态码

状态码 说明
200 服务器正确返回响应
404 请求的资源不存在
500 服务器内部错误
403 没有访问权限
… ……

注：就绪状态是4且状态码是200，表示正确完成

statusText：返回当前请求的响应状态
responseText：以文本形式获得响应的内容
responseXML：将XML格式的响应内容解析成DOM对象

状态码	说明
200	服务器正确返回响应
404	请求的资源不存在
500	服务器内部错误
403	没有访问权限
…	……

$.ajax()简介

$.ajax( [settings] );

常用属性参数

参数	类型	说明
url	String	发送请求的地址，默认为当前页地址
type	String	请求方式，默认为GET
data	PlainObject或 String或Array	发送到服务器的数据
dataType	String	预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text
timeout	Number	设置请求超时时间
global	Boolean	表示是否触发全局Ajax事件，默认为true

常用函数参数

参数	类型	说明
beforeSend	Function ( jqXHR jqxhr, PlainObject settings )	发送请求前调用的函数
success	Function( 任意类型 result, String textStatus, jqXHR jqxhr )	请求成功后调用的函数参数result：可选，由服务器返回的数据
error	Function ( jqXHR jqxhr, String textStatus, String errorThrown )	请求失败时调用的函数
complete	Function ( jqXHR jqxhr, String textStatus )	请求完成后（无论成功还是失败）调用的函数

示例

$.ajax( {
     "url"     	:  "url",                      // 要提交的URL路径
     "type"     :  "get",                     // 发送请求的方式
     "data"     :  data,                      // 要发送到服务器的数据
     "dataType" :  "text",                   // 指定传输的数据格式
     "success"  :  function(result) {       // 请求成功后要执行的代码
	     },
      "error"       :  function() {           // 请求失败后要执行的代码
	     }
} );

小例子：ajax的简单登录请求（不登录验证，只用来理解ajax简单请求原理）

首先引入jQuery.js

登录页面：login.jsp

<body>
	账号：<input id="username" name="username" type="text"/><br/>
	密码:<input id="userpwd" name="userpwd" type="text"/><br/>
	<button id="sub_btn">提交</button>
</body>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#sub_btn").click(function() {
			var username = $("#username").val();
			var userpwd = $("#userpwd").val();
			
			$.ajax({
				url:"/web10/LoginServlet",
				data:{username:username,userpwd:userpwd},	/* 这里的username和userpwd为键值对，键和上面定义的变量没任何关系，值才有关系 */
				dataType:"text",
				type:"post",
				success:function(res) {
					alert("请求成功！！！" + res);
					location="index.jsp";
			 	}			
			});  
		});
	});
</script>

跳转成功后的页面：index.jsp

<body>
	我是主页。(随便写点啥)
</body>

用于响应ajax请求的Servlet：LoginServlet.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//post响应ajax请求时防止乱码
		response.setCharacterEncoding("UTF-8");
		
		String username = request.getParameter("username");
		String userpwd = request.getParameter("userpwd");
		System.out.println("用户名：" + username);
		System.out.println("密码：" + userpwd);
		
    	//因为doGet()方法是void返回值，所以无法return，但可直接输出就相当于return值
		PrintWriter out = response.getWriter();
		out.print("张三");	//返回个张三，即ajax请求中接收的参数res
	}

JSON

JSON（JavaScript Object Notation）
一种轻量级的数据交换格式
采用独立于语言的文本格式
通常用于在客户端和服务器之间传递数据

JSON的优点
轻量级交互语言
结构简单
易于解析

定义JSON

定义JSON对象

//语法
var JSON对象 = { "name" : value,  "name" : value,  …… };

//示例
var person = { "name" : "张三",   "age" : 30,  "spouse" : null };

定义JSON数组

//语法
var JSON数组 = [ value,  value,  …… ];

//示例
var countryArray = [ "中国",  "美国",  "俄罗斯" ];
var personArray = [ { "name":"张三",  "age":30 },
                                  { "name":"李四",  "age":40 } ];

GET请求和POST请求的区别

步骤	请求方式	实现代码
初始化组件	GET	xmlHttpRequest.open( “GET”, url, true );
	POST	xmlHttpRequest.open( “POST”, url, true ); xmlHttpRequest .setRequestHeader( “Content-Type”, “application/x-www-form-urlencoded” );
发送请求	GET	xmlHttpRequest.send( null );
	POST	xmlHttpRequest.send( “key=xxx&type=12&year=2016” );