Ajax 实现示例（原生 && JQuerry）

最新推荐文章于 2022-02-11 17:44:53 发布

healthLau

最新推荐文章于 2022-02-11 17:44:53 发布

阅读量278

点赞数

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

本文链接：https://blog.csdn.net/qq_39588003/article/details/105695949

版权

JavaWeb 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

原生Ajax与JQuery下的Ajax

原生ajax

JQuery实现Ajax的三种方式（需要引入JQuery包）

Ajax实例

原生JS实现Ajax

JQuery实现ajax（三种）

原生Ajax与JQuery下的Ajax

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

原生ajax

function fun() {
	//发送异步请求
	//1.创建核心对象
	var xmlhttp;
	if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	} else {// code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	//2.建立连接
	/*参数
	 *   1.请求方式：get post
	 *		get方式：请求参数在url后面拼接，send方法为空参
	 *		post方式：请求参数在send方法中定义,如:send("username=tom")
	 *   2.请求url
	 *   3.同步或者异步请求：true(异步)或false(同步)
	 */
	xmlhttp.open("get", "ajaxServlet?username=tom", true);
	//3.发送请求
	xmlhttp.send();
	//4.接受并处理来自服务器的响应结果
	//获取方式：xmlhttp.responseText
	//当xmlhttp对象（readyState）的就绪状态改变时，会触发事件onreadystatechange。
	xmlhttp.onreadystatechange = function() {
		//判断readyState就绪状态是否为4，status响应状态吗是否为200
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			//获取服务器的响应结果
			var data = xmlhttp.responseText;
			alert(data);
			document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
		}
	}
}

JQuery实现Ajax的三种方式（需要引入JQuery包）

JQuery包下载地址：https://code.jquery.com/jquery-3.5.0.min.js（直接ctrl+s保存即为下载）

$.ajax() 实现

function fun() {
	//使用$.ajax()发送异步请求
	$.ajax({
		url : "ajaxServlet",//请求路径
		type : "post",//请求方式，默认为get
        async : true|false,    //异步或同步，默认异步（true）
		
        //data:"username=jack&age=21",//请求参数
		data : {
			"username" : "jack",
			"age" : "22"
		},//json格式请求参数

        dataType : "text",  //返回数据的格式

		//响应成功后的回调函数，data为服务器返回的数据
		success : function(data) {
			alert(data)
		},

        /*  
            响应出现错误会执行的函数
                textStatus：错误信息
                errorThrown：异常信息
        */
		error:function(a,textStatus,errorThrown){
			alert("出错啦···");
            console.log(textStatus);
            console.log(errorThrown);
		}
	});
}

$.get(url, [data], [callback], [type]) 实现

参数：

url:请求路径
data:发送的参数
callback:请求成功后执行的回调函数
type:服务器返回的数据类型

function fun() {
	$.get("ajaxServlet",{"username" : "rose"},function(data){
		alert(data);
	});
}

$.post(url, [data], [callback], [type]) 实现

参数：

url:请求路径
data:发送的参数
callback:请求成功后执行的回调函数
type:服务器返回的数据类型

function fun() {
	$.post("ajaxServlet",{"username":"rose"},function(data){
		alert(data);
	});
}

Ajax实例

eclipse下项目目录结构，四个html文件都是用AjaxServlet.java来做出响应。

AjaxServlet.java

package com.health.ajax;

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("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//1.获取请求参数
		String s = request.getParameter("username");
		//2.打印username
		System.out.println(s);
		//3.响应
		response.getWriter().write("hello:"+s);	
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

原生JS实现Ajax

原生js实现ajax.html

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>AjaxTest</title>
	<script>
		//定义方法
		function fun() {
			var xmlhttp;
			if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp = new XMLHttpRequest();
			} else {// code for IE6, IE5
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.open("get", "ajaxServlet?username=tom", true);
			
			xmlhttp.send();
			
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					var responseText = xmlhttp.responseText;
					alert(responseText);
					document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
				}
			}
		}
	</script>
	</head>

	<body>
		<input type="button" value="发送异步请求" onclick="fun();">
		<input>
		<div id="myDiv"></div>
	</body>
</html>

运行结果：

JQuery实现ajax（三种）

JQuery实现ajax.html

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	
	<script src="js/jquery-3.5.0.min.js"></script>
	
	<script>
		//定义方法
		function fun() {
			//使用$.ajax()发送异步请求
			$.ajax({
				url:"ajaxServlet",//请求路径
				type:"post",//请求方式
				//data:"username=jack&age=21",//请求参数
				data:{"username":"jack","age":"22"},//json格式请求参数
				//响应成功后的回调函数
				success:function(data) {
					alert(data)
				},
				//响应出现错误会执行的函数
				error:function(){
					alert("出错啦···");
				}
			});
		}
	</script>
	</head>
	<body>
		<input type="button" value="发送异步请求" onclick="fun();">
	</body>
</html>

JQuery实现ajax_GET.html

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script src="js/jquery-3.5.0.min.js"></script>
	<script>
		//定义方法
		function fun() {
			$.get("ajaxServlet",{"username" : "rose"},function(data){
				alert(data);
			});
		}
	</script>
	</head>
	<body>
		<input type="button" value="发送异步请求" onclick="fun();">
	</body>
</html>

JQuery实现ajax_POST.html

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script src="js/jquery-3.5.0.min.js"></script>
	<script>
		//定义方法
		function fun() {
			$.post("ajaxServlet",{"username":"rose"},function(data){
				alert(data);
			});
		}
	</script>
	</head>
	<body>
		<input type="button" value="发送异步请求" onclick="fun();">
	</body>
</html>

下面三种方式运行结果相同，如下图：

healthLau

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax 实现示例（原生 && JQuerry）

原生Ajax与JQuery下的Ajax原生ajaxfunction fun() { //发送异步请求 //1.创建核心对象 var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } el...
复制链接

扫一扫