Ajax

最新推荐文章于 2025-03-16 10:00:00 发布
原创 最新推荐文章于 2025-03-16 10:00:00 发布 · 429 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#xmlhttprequest #function #服务器 #url #stylesheet #null

本文介绍了一个简单的Ajax应用案例，包括Ajax的基本使用方法、HTTP状态码的处理、异步与同步的区别、GET与POST请求参数的传递方式，以及如何封装Ajax操作。

testAjax.jsp

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'MyJsp.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script>
	function test() {
		//第一步：创建XMLHttpRequest对象
		var request;
		if (window.XMLHttpRequest) {
			request = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			request = new ActiveXObject("Msxml2.XMLHTTP");
		}

		//第二步：使用XMLHttprequest创建请求
		request.open("get", "AjaxServlet");
		//request.open(method, url, async, username, password)后面两个可以不填，其中的url是web.xml中的servlet-mapping的ur
		//asyncl是否异步，默认是true

		//第三部：写回调函数处理服务器返回的数据
		request.onreadystatechange = function() { //onreadystatechange是当readystate改变时触发这个函数
			if (request.readyState == 4) { //request.readyState返回1,2,3,4分别代表不同的含义，其中4是传输成功的意思
				var result = request.responseText; //得到服务器返回的数据
				document.getElementById("show").innerHTML = result;
			}
		}
		request.send(null);  //如果不加null火狐会报错
	}
</script>
</head>

<body>
	<div id="show"></div>
	<input type="button" value="测试" onclick="test()" />
</body>
</html>

AjaxServlet 

package action;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		PrintWriter out = response.getWriter();
		out.println("Hello Ajax !");
		out.flush();
		out.close();
	}

}

关于HTTP状态码（其实就是一个status方法）

修改testAjax.jsp中的JS

<script>
	function test() {
		//第一步：创建XMLHttpRequest对象
		var request;
		if (window.XMLHttpRequest) {
			request = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			request = new ActiveXObject("Msxml2.XMLHTTP");
		}

		//第二步：使用XMLHttprequest创建请求
		request.open("get", "AjaxServlet");
		//request.open(method, url, async, username, password)后面两个可以不填，其中的url是web.xml中的servlet-mapping的ur
		//asyncl是否异步，默认是true

		//第三部：写回调函数处理服务器返回的数据
		request.onreadystatechange = function() { //onreadystatechange是当readystate改变时触发这个函数
			if(request.status==200){  //Http状态码 200为请求成功
				if (request.readyState == 4) { //request.readyState返回1,2,3,4分别代表不同的含义，其中4是传输成功的意思
					var result = request.responseText; //得到服务器返回的数据
					document.getElementById("show").innerHTML = result;
				}
			}else if(request.status==404){  //想测试404的话可以修改创建请求时的路径
				document.getElementById("show").innerHTML = "请求资源未找到！";
			}else if(request.status==500){
				document.getElemenById("show").innnerHTML = "内部服务器错误 ！";
			}
		}
		request.send(null);
	}
</script>

异步同步的表达

修改testAjax.jsp中的JS

<script>
	function test() {
		//第一步：创建XMLHttpRequest对象
		var request;
		if (window.XMLHttpRequest) {
			request = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			request = new ActiveXObject("Msxml2.XMLHTTP");
		}

		//第二步：使用XMLHttprequest创建请求
		request.open("get", "AjaxServlet", true);
		//request.open(method, url, async, username, password)后面两个可以不填，其中的url是web.xml中的servlet-mapping的ur
		//asyncl是否异步，默认是true

		//第三部：写回调函数处理服务器返回的数据
		request.onreadystatechange = function() { //onreadystatechange是当readystate改变时触发这个函数
			if (request.readyState == 4) { //request.readyState返回1,2,3,4分别代表不同的含义，其中4是传输成功的意思
				var result = request.responseText; //得到服务器返回的数据
				document.getElementById("show").innerHTML = result;
			}

		}
		request.send(null);
		alert("异步的操作！");//设置为异步之后可以比作为同时运行，而不会等待其中一个返回再接着运行
	}
</script>

在AjaxServlet返回数据前加一句 


try {
	Thread.sleep(3000);
} catch (InterruptedException e) {
	e.printStackTrace();
}

Get，Post传参

AjaxServlet

public void doGet(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
	this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
	response.getWriter().println(request.getParameter("a"));
}
Get传参 

request.open("get", "AjaxServlet?a=123", true);


Post传参

request.open("post", "AjaxServlet", true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send("a=123");


Ajax的封装

封装过程

<script>
	function createAjaxObj() {
		var requset;
		if (window.XMLHttpRequest) {
			request = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			request = new ActiveXObject("Msxml2.XMLHTTP");
		}
		return request;
	}

	function test() {
		var request = createAjaxObj();

		request.onreadystatechange = function() {
			if (request.readyState == 4) {
				if (request.status == 200) {
					handle200(request);
				} else if (request.status == 404) {
					handle404(request);
				} else if (request.status == 500) {
					handle500(request);
				}else{
					loading();
				}
			}
		}
		request.open("post", "aAjaxServlet", true);
		request.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		request.send("a=123");
	}
	
	function handle200(request) {
		var result = request.responseText;
		document.getElementById("show").innerHTML = result;
	}

	function handle404(request) {
		document.getElementById("show").innerHTML = "No find !";
	}
	
	function handle500(request) {
		document.getElementById("show").innerHTML = "Server is busy !";
	}
	
	function loading(){
		document.getElementById("show").innerHTML = "Finding !";
	}
	
</script>

封装结果 ajaxUtil.js 

function createAjaxObj() {
	var requset;
	if (window.XMLHttpRequest) {
		request = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		request = new ActiveXObject("Msxml2.XMLHTTP");
	}
	return request;
}

function test(method, url, data, asychn, loading, handle200, handle404,
		handle500) {
	var request = createAjaxObj();

	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			if (request.status == 200) {
				if (handle200) { //如果为空则不处理
					handle200(request);
				}
			} else if (request.status == 404) {
				if (handle404) {
					handle200(request);
				}
			} else if (request.status == 500) {
				if (handle500) {
					handle500(request);
				}
			} else {
				if (loading) {
					loading();
				}
			}
		}
		//下面处理get和post
		if ("get" == method.toLowerCase()) {
			if (data == null || data == "") {
				request.open(method, url, asychn);
			} else {
				request.open(method, url + "?" + data, asychn);
			}
			request.send(null);
		} else if ("post" == method.toLowerCase) {
		}
		request.open("post", url, asych);
		request.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		request.send(data);
	}
}


ajax
huangyh技术栈
09-28 3万+
1.1 什么是ajax: Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新...
谷歌浏览器插件—— Ajax Interceptor
03-16
**Ajax Interceptor：深入理解与应用** Ajax Interceptor 是一款专为谷歌浏览器（Chrome）设计的插件，它允许开发者在Ajax请求发送后和响应返回前进行干预，从而实现对AJAX请求数据的修改。这款插件对于前端开发、...
Ajax详解
这河里吗l的博客
06-20 1万+
Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。Ajax可以实现网页与服务器之间的数据交互AJAX不是编程语言，是一种无需重新载入整个页面，能够更新部分网页的技术。
看这一篇就够了！-Ajax详解
热门推荐
Oriental_的博客
03-15 18万+
今天来聊一聊前后端交互的重要工具Ajax 结合上次跟大家分享的前后端交互基础，如果还没有看过的童鞋，以下是传送门 前后端交互详解 AJAX - 到底什么是Ajax? ajax 全名 async javascript and XML 是前后台交互的能⼒ 也就是我们`客户端给服务端发送消息的⼯具，以及接受响应的⼯具 是⼀个 默认异步执⾏机制的功能AJAX分为同步（async = false...
AJAX详解
最新发布
ajiaming的博客
03-16 5162
AJAX全称为，就是异步的 JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
Ajax请求的五个步骤
chaopingyao的博客
06-02 17万+
Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。 2、同步与异步的区别 同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。 异步提交：当用户发送请
AJAX 详解
06-19 2万+
Ajax基础知识，及常见问题详解
AJAX简介
xpmhhh的博客
03-20 7056
AJAX: 全称Asynchronous JavaScript And XML，即异步JS和XML。 通过AJAX可以在浏览器中向服务器发送异步请求。 最大的优势：无刷新的获取数据。 Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 XML: 可扩展标记语言，被设计用来传输和存储数据。 与HTML的区别：HTML中都是预定义的标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。 以前Ajax是用XML格式的字符串进行数据交换，现在已经被JSON取代了。
Ajax请求
weixin_45030426的博客
03-25 1万+
ajax请求简介： ajax是利用前端的技术，向服务器发送一个异步请求 原有的请求在请求后需要刷新整张页面，
AJAX
风间琉璃の博客
08-04 4138
AJAX AJAX 不是一种新的编程语言而是一种使用现有标准的新方法，与服务器交换数据并更新部分网页的新技术（不用重新加载整个界面）。 AJAX = 异步JavaScript和xml。 1.创建AJAX对象 XMLHttpRequest 对象用于在后台与服务器交换数据 var xhr = new XMLHttpRequest(); 老版本的ie var xhr = new ActiveXObj...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
精选资源
ajaxProxy:ajaxProxy 是一个ajax请求发送代理，支持链序请求和阻塞请求
06-03
ajaxProxy ajaxProxy is an ajax request sending proxy, which supports chain order request and blocking request ajaxProxy是一个异步请求的代码发送器，提供一种可读性更好的接口来实现异步请求的流程控制，...
C# 如何使用ajax请求
08-18
C# 如何使用ajax请求 C# 使用ajax请求是指在C# 项目中使用ajax技术来实现异步更新网页的内容。ajax即“Asynchronous Javascript And XML”（异步JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页...
Flexpaper 在线文档显示
Papaver_Flower的专栏
07-29 7326
第一步：先去下载Flexpaper的源码和例子，用TortoiseSVN下载下来地址是：http//flexpaper.googlecode.com/svn/trunk把上面的上个文件夹下载下来。   第二步：安装Adobe Flash Builder 4.5，然后安装目录里有一个文件夹里面，可以安装eclipse插件。（安装后会把eclipse变为中文，在eclipse根目录下的ecl
Json和Gson
Papaver_Flower的专栏
04-08 4330
TestJson类 package Test.action; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; //用之前先把org.json包里面的类 全部放到项目里 public class TestJson { public static void ma
DBUtil
Papaver_Flower的专栏
04-21 2233
DBUtil初级原始版 package BaseDao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import javax.sq
DBCP C3P0
Papaver_Flower的专栏
04-20 990
DBCP public class TestDbcp { public static void main(String[] args) throws SQLException { BasicDataSource basicDataSource = new BasicDataSource(); basicDataSource.setUrl("jdbc:mysql://localhos
专业Ajax技术详解
"Wrox.Press.Professional.Ajax" 是一本由Wiley Publishing, Inc.在2006年出版的专业级Ajax技术图书，作者包括Nicholas C. Zakas, Jeremy McPeak和Joe Fawcett。这本书共380页，详细介绍了Ajax的基础及其在Web开发中...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值