AJAX和Jquery

最新推荐文章于 2024-09-19 16:13:24 发布

华的曲奇饼

最新推荐文章于 2024-09-19 16:13:24 发布

阅读量1.6k

点赞数 1

分类专栏： JavaWeb 文章标签： java

本文链接：https://blog.csdn.net/qq_50794782/article/details/123855801

版权

JavaWeb 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

一、什么是Ajax

Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml。也就是异步请求更新技术。Ajax是一种对现有技术的一种新的应用，不是一门新语言。它是用JavaScript编写。

二、工作原理

XMLHttpRequest 对象的常用属性

属性	描述
onreadystatechange	定义当readyState属性发生变化时被调用的函数保存XMLHttpRequest的状态。
readyState	0:请求未初始化 1∶服务器连接已建立 2:请求已收到 3:正在处理请求 4∶请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以XML数据返回响应数据
status	返回请求的状态号 403: "Forbidden" 404:"Not Found"
statusText	返回状态文本（比如"OK"或"Not Found")

XMLHttpRequest对象的常用方法

方法	描述
new XMLHttpRequest()	创建新的XMLHttpRequest对象
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息规定请求
open(method,url,async,user,psw)	method:请求类型GET或POST url:文件位置 async: true(异步)或false(同步) user:可选的用户名称 psw:可选的密码
send()	将请求发送到服务器，用于GET请求
send(string)	将请求发送到服务器，用于POST请求
setRequestHeader()	向要发送的报头添加标签/值对

三、AJAX如何实现

步骤

1. 1. 定义xmlHttpRequest对象
  2. 判断浏览器
  3. 访问后台URL
  4. 回调函数
  5. 发送

简单示例（使用AJAX显示数据“helloworld”）

index.jsp代码：

<body>
用户名:<input type="text" name="username" onblur="change()"/><br/>  		       
密码:<input type="text" name="password"/><br/>
<span id="content"></span>
</body>

Servlet代码：

response.setHeader("pragma","no-cache");//清除缓存
response.setHeader("cache-control","no-cache");//清除缓存
PrintWriter out = response.getWriter();
out.println("hello wolrd");
out.flush();//清空内在中的数据

Ajax实现步骤

1. 定义xmlHttpRequest对象
2. 判断使用的浏览器

	if(window.ActiveXObject){//判断是否是IE浏览器
alert('IE浏览器');
  				xmlHttpRequest = new ActiveXObject('Microsoft.XMLHTTP');
}else{
  				alert('非IE浏览器');
  				xmlHttpRequest = new XMLHttpRequest();
  	}

3. 打开：open(“param1”,” param2”, param3)

param1：提交方式GET或者POST

param2：URL路径

param3：是否为异步处理true或者false

示例：

xmlHttpRequest.open("GET","AjaxServlet",true);

注意：如果以POST提交需要加入以下代码

xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

4. 回调：处理服务端的响应数据

xmlHttpRequest.Onreadystatechange = 回调函数

回调函数代码如下

if(xmlHttpRequest.readyState == 4){
  				if(xmlHttpRequest.status == 200){
var content = xmlHttpRequest.responseText;
  					alert(content);
  					document.getElementById('content').innerHTML = content;
  				}
  			}

5. 发送: send()

xmlHttpRequest.send(null);

原生ajax示例和jquery ajax示例

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>

	<button id="testbutton" onClick="onButtonClickOne()">提交 (原生Ajax发送请求)</button>
	<span id="info1"></span>
	<br />
	<br />
	<button id="testbutton" onClick="onButtonClicktow()">提交 (jQuery Ajax发送请求)</button>
	<span id="info2"></span>
	<script type="text/javascript">
		//获取xhr对象
		function getXHR() {
			var xhr;

			if (window.XMLHttpRequest) {
				//检查浏览器的XMLHttpRequst属性，如果为真则支持XMLHttpRequest
				//IE7+,Firefox,Chrome,Opera,Safari浏览器支持XMLHttpRequest
				xhr = new XMLHttpRequest();
			} else {
				//IE6,IE5等比较旧的浏览器使用ActiveXObject
				xhr = new ActiveXObject("Microsoft.XMLHTTP")

			}
			return xhr;
		}
		
		
		//按钮点击事件  原生ajax
		function onButtonClickOne() {
			var xhr=getXHR();
			
			//发送ajax请求
			xhr.open("POST","/TestAJAX/AjaxServlet",true);
			xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xhr.send("username=zhangsan&password=123456");
			
			//接收到响应信息之后的操作
			//每当 readyState 改变时，就会触发 onreadystatechange 事件。
			xhr.onreadystatechange = function () {
				if (this.status == 200 && this.readyState == 4) {
					document.getElementById("info1").innerHTML = this.responseText;
				}
				
			}
		}
		
        //jQuery Ajax
		function onButtonClicktow() {
			var info = {"username":"lisi","password":"123456"};
			$.ajax({
				type:"POST",
				url:"/TestAJAX/AjaxServlet",
				data: info,
				success: function (res) {
					document.getElementById("info2").innerHTML = res;
				},
				error: function (e) {//请求失败
					document.getElementById("info2").innerHTML = e.status;
				}
			})
		}
	</script>
</body>
</html>

Servlet

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
request.setCharacterEncoding("utf-8");
		
		//获取所有请求参数的名称和值
		Enumeration<String> parameterNames = request.getParameterNames();
		while(parameterNames.hasMoreElements()) {
			String paraName = parameterNames.nextElement();
			String paramValue[] = request.getParameterValues(paraName);
			for (String value : paramValue) {
				System.out.println(paraName+" : "+value);
				//返回响应
				response.getWriter().append(paraName + ":" + value + "&nbsp;&nbsp;");
			}
			
		}
	}

一、JQuery简介

JQuery是一个兼容多浏览器的JavaScript库，核心理念是“写的更少，做的更多”
如今，JQuery已经成为最流行的JavaScript库，在世界前一万个访问最多的网站中，有超过55%的网站正在使用JQuery
JQuery是免费、开源的，其语法设计可以让开发者觉得更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用AJAX以及其他功能
除此以外，JQuery提供API让开发者编写插件，其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页
JQuery 是一个JavaScript函数库要使用 JQuery，需要下载 JQuery 库，然后把它包含在希望使用的网页中<head><script src="jquery.js"></script></head>

二、第一个JQuery程序

<!-- 引入 jQuery -->

 <script src="../scripts/jquery-1.7.2.js" type="text/javascript"></script>

   <script type="text/javascript">

$(document).ready(function(){  //等待dom元素加载完毕.

          alert("Hello World!"); //弹出一个框。

   });

  </script>

三、常用选择器

选择器	描述	返回	示例
#id	选择匹配ID的元素	单个元素	$( “#test”)　取Id为test的元素
.class	选择给定类名的元素	集合元素	$(“ .test”) 取所有class 为test的元素
Element	选择给定元素名的元素	集合元素	$(“P”) 取所有<p>元素
Selector1, selector2, … ,selectorN	将每个选择器匹配的元素合并后一起返回	集合元素	$(“div , span, p.myclass “) 选择所有<div>, <span>和拥有class为myclass的<p>标签的一组元素