Ajax

最新推荐文章于 2024-02-17 13:45:00 发布
最新推荐文章于 2024-02-17 13:45:00 发布
阅读量146 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46100517/article/details/113832985
版权

Ajax

一、Ajax简介

AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），Ajax可以实现异步请求。AJAX 是一种在 2005 年由 Google 推广开来的编程模式。

二、Ajax语法介绍

学习使用Ajax主要就是学习XMLHttpRequest对象的方法和属性

在这里插入图片描述
在这里插入图片描述

三、编写第一个ajax程序

简单理解ajax：在不需要刷新整个页面的同时也能在页面中刷新显示数据
1、创建web项目然后建立servlet

package com.java.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ServletDemo
 */
@WebServlet("/ServletDemo1")
public class ServletDemo1 extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		response.getWriter().print("揽月随风醉");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

2、建立Jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
	<script type="text/javascript">
		var xmlHttp;
		//1、创建xmlhttprequest
		function ajax() {
			try { //浏览器是这些：Firefox, Opera 8.0+, Safari 就执行下面代码
				xmlHttp = new XMLHttpRequest();
			} catch (e) {
				try { //如果浏览器是 Internet Explorer 就执行下面代码（ie浏览器分两个版本,当前为一个版本，下面一个为另外一个版本）
					xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					try {
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					} catch (e) {//以上都没有执行就表示此浏览器不支持ajax
						alert("不支持Ajax！");
					}
				}
			}
			//2、建立链接
			//参数分别是提交方式与提交地址，后面跟的时间是因为ajax每次都需要点击所以需要在后面跟一个参数，但是参数每次都不一样所以才使用时间
			xmlHttp.open("GET","ServletDemo1?time="+new Date().getTime());
			//3、发送请求
			xmlHttp.send(null); 
			//4.设置回调函数，接受服务器返回的数据
			//注意：readyState的状态变化都会触发onreadystatechange事件
			xmlHttp.onreadystatechange = showInfo;
		}
		
		function showInfo() {
			//alert(xmlHttp.readyState);
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200 || xmlHttp.status == 304) {//304表示服务器的内容没有变化
					document.getElementById("div1").innerHTML = xmlHttp.responseText;
				}
			}
		}
	</script>

	<input type="button" value="Ajax" onclick="ajax()">
	<div id="">
		<div id="div1" style="width: 300px;height: 200px;border: 1px solid red;"></div>
	</div>
</body>
</html>

在这里插入图片描述

四、 ajax传值

1）、Get方式传值

1、传值

xmlHttp.open("GET","ServletDemo1?username=好人&password=123&time="+new Date().getTime());

2、接收

String parameter1 = request.getParameter("username");
String parameter2 = request.getParameter("password");
System.out.println(parameter1+"---"+parameter2);

在这里插入图片描述

2）、Post方式传值

1、传值

//2、建立链接
xmlHttp.open("POST","ServletDemo1?time="+new Date().getTime());
//post方式是通过send把参数发送给服务器端，所以一定要指定发的类型					
//"content-type","application/x-www-form-urlencoded"为普通的表单类型，表单默认就是这个类型
xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
//3、发送请求
xmlHttp.send("username=坏人&password=456");

2、接收

request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String parameter1 = request.getParameter("username");
String parameter2 = request.getParameter("password");
System.out.println(parameter1+"---"+parameter2);
response.getWriter().print("揽月随风醉");

在这里插入图片描述

五、jQuery实现Ajax

  • JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(),
    $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()。

1）、load

  • load方法：（传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递,否则采用 POST 方式）

load(url,[data],[callback])
+：url:请求的服务器的资源地址
+：data:向服务器端发送数据，JSON串格式.如果有此参数，就以POST方式提交数据，没有就是get方式提交数据
+：callback:function(data,textStatus,xhr){}
++：data:服务器端返回的数据
++：textStatus:状态。succuss, error, notmodify, timeout
++：xhr：XmlHttpRequest对象本身

演示（一）

1、servlet

package com.java.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ServletDemo3")
public class ServletDemo3 extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String parameter1 = request.getParameter("username");
		String parameter2 = request.getParameter("password");
		System.out.println("dadsdas"+"--"+parameter1+"--"+parameter2);
		
		response.getWriter().print(parameter1+"--"+parameter2);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

2、jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
	<input type="button" value="按钮" id="anniu">
	<div style="width: 200px;height: 100px;background-color: red" id="div1"></div>
	
	<script type="text/javascript">
	$(function() {
		$("#anniu").click(function(){
			$("#div1").load("ServletDemo3",{username:"heihei",password:"123"},function(data,textStatus,xhr){
				alert(data);
			});
		})
	})
	</script>
</body>
</html>

演示（二）

  • 如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的. 通过 URL参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容.
  • load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和 选择器之间有一个空格)(*.jsp h1只加载h1元素的内容)这样就只会显示h1的内容，但是data中h1和h2都传过来了。

1、servlet

package com.java.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Qewqeq
 */
@WebServlet("/ServletDemo3")
public class ServletDemo3 extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String parameter1 = request.getParameter("username");
		String parameter2 = request.getParameter("password");
		System.out.println("dadsdas"+"--"+parameter1+"--"+parameter2);
		
		response.getWriter().print("<h1>parameter1</h1>"+"--"+"<h2>parameter2</h2>");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

2、jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
	<input type="button" value="按钮" id="anniu">
	<div style="width: 200px;height: 100px;background-color: red" id="div1"></div>
	
	<script type="text/javascript">
	$(function() {
		$("#anniu").click(function(){
			$("#div1").load("ServletDemo3 h1",{username:"heihei",password:"123"},function(data,textStatus,xhr){
				alert(data);
			});
		})
	})
	</script>
</body>
</html>

在这里插入图片描述

演示（三）

可以提交给jsp，这样jsp中的内容就会被加载到当前页面

1、data.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
	<table border="1" width="100%">
    	<tr align="center"><th>aa</th><th>bb</th></tr>
    	<tr align="center"><td>1</td><td>2</td></tr>
    	<tr align="center"><td>3</td><td>4</td></tr>
	</table>

</body>
</html>

在这里插入图片描述
2、index4.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
	<input type="button" value="按钮" id="anniu">
	<div style="width: 200px;height: 100px;background-color: red" id="div1"></div>
	
	<script type="text/javascript">
	$(function() {
		$("#anniu").click(function(){
			//请求地址，传递参数，回调函数
			$("#div1").load("data.jsp");
		})
	})
	</script>
</body>
</html>

在这里插入图片描述
也可以提交给servlet然后转给jsp（这样很多效果就好做了）

1、servlet

package com.java.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ServletDemo4
 */
@WebServlet("/ServletDemo4")
public class ServletDemo4 extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.getRequestDispatcher("/data.jsp").forward(request, response);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

2、jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
	<input type="button" value="按钮" id="anniu">
	<div style="width: 200px;height: 100px;background-color: red" id="div1"></div>
	
	<script type="text/javascript">
	$(function() {
		$("#anniu").click(function(){
			//请求地址，传递参数，回调函数
			$("#div1").load("ServletDemo4");
		})
	})
	</script>
</body>
</html>

在这里插入图片描述

2）、get（Ajax提交表单数据）

1、Servlet

package com.java.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Servlet
 */
@WebServlet("/ServletDemo5")
public class ServletDemo5 extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		System.out.println(username+","+password);
		request.setAttribute("useranme", username);
		response.getWriter().print(username);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

2、Jsp
$("#form1").serialize()提取表单数据

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
	<span id="span0">登录</span>
	<span id="span4"></span>
	<div style="display: none;border: 1px solid;width: 300px;height: 200px;position: fixed;" id="div1">
		<span id="closeSpan">X</span>
		<form id="form1">
			用户名:<input type="text" name="username"><br>
			用密码:<input type="password" name="password">
		</form>
		
		<span id="span1">登录</span>
		
	</div>
	<script type="text/javascript">
		$("#span0").mouseover(function(){
			
			$("#div1").show();
		})
		
		$("#closeSpan").click(function(){
			$("#div1").hide();
		})
		
		//ajax提交数据
		$("#span1").click(function() {
			$.get("ServletDemo5",$("#form1").serialize(),function(data,status,xml){
				alert(data)
				$("#span4").text("欢迎"+data+"登录");
				
			});
			$("#div1").hide();
			$("#span0").hide();
			
		})
	</script>

在这里插入图片描述
在这里插入图片描述

揽月随风醉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
AJAX
m0_74206393的博客
02-15 290
AJAX
一篇文章搞懂AJAX
最新发布
weixin_51781852的博客
03-18 663
Ajax的全称是Asynchronous Javascript And XML(异步JavaScript 和XML)。通俗的理解：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax.为了验证接口能否正常被访问，我们常常需要使用接口测试工具，来对数据接口进行检测。好处：接口测试工具能让我们在不写任何代码的情况下，对接口进行调试和测试。表单在网页中主要负责数据采集功能。
AJAX 详解
m0_61869253的博客
02-17 1202
怎样创建xmlHttpRequest对象？怎样通过get、post传递传递数据？怎样控制http头信息？通过ajax能传递什么格式的数据？怎样接收服务器传递的数据？怎样控制数据接收的进度？如果控制数据传递过程中的错误？关于跨越传输的问题？a. AJAX是什么？AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
Ajax详解
weixin_64765980的博客
09-06 1688
在没有使用Ajax之前，我们使用传统web技术时，每次客户端会同步发送请求,服务器都需要加载整个页面，直到请求完毕后才发出响应，如果页面内容量大，那加载页面的时间会留出空白，导致有很差的用户体验等等，所以Ajax在这个问题上进行了补充。
AJAX详解
weixin_63719049的博客
04-27 4719
AJAX详解
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
ajax 检测用户名是否被占用
01-21
try { ajax = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!=’...
Ajax 博客网站系统
05-21
1)MVC结构本实例在实现上严格遵循MVC结构。 2)本实例系统在开发时采用Eclipse+MyEclipse结合Tomcat部署，本章完整的讲述了工程的部署过程。 3)数据库连接采用Tomcat连接池，文章中详细介绍了利用Tomcat后台管理界面配置连接池的过程；光盘演示中讲述并演示了通过修改Tomcat配置来配置连接池的过程。 4)本实例系统对Ajax交互做了一个初探，并利用Ajax实现本章实例系统一个功能界面的开发。 5)本系统介绍了一种彻底解决中文乱码问题的方法-UTF-8配置。
Ajax简易博客网站
11-12
此次实现使用JSP、JS文件等共同完成。
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax高级程序设计pdf
05-16
**Ajax高级程序设计** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新，提高了用户体验，尤其...
AJAX学习
博客
10-21 601
1.AJAX包括： 使用XHTML和CSS的基于标准的表示技术 使用DOM进行动态显示和交互 使用XML和XSLT进行数据交换和处理 使用XMLHttpRequest进行异步数据检索 使用Javascript将以上技术融合在一起 * 前端使用AJAX的区别* 不再使用from表单 设置div用于存放服务器返回的信息
Ajax技术深度探索
"ajax in Action" 《Ajax in Action》是由Dave Crane、Eric Pascarello与Darren James合著的一本技术书籍，专门探讨Ajax（Asynchronous JavaScript and XML）技术在实际开发中的应用。这本书由Manning出版社出版，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值