被人们所“吹捧”的AJAX到底是个什么东西

最新推荐文章于 2023-10-29 10:04:41 发布
最新推荐文章于 2023-10-29 10:04:41 发布
阅读量168 收藏
点赞数
分类专栏： 基础知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/China_Biiiiiiii/article/details/105178592
版权

什么是AJAX

AJAX(英文全称Asynchronous Javascript And Xml)，它能使用js访问服务器，而且是异步访问，服务器给客户端的响应一般是整个页面，一个html完整页面，但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面，而只是数据。

他的表现形式如下
text：纯文本
xml：可扩展标记语言
json：它是js提供的数据交互格式，它在ajax中最受欢迎

异步交互和同步交互

同步交互：

发一个请求，就要等待服务器的响应结束，然后才能发第二个请求，中间这段时间就是一个字“卡”，刷新的是整个页面

异步交互：

发一个请求后，无需等待服务器的响应，然后就可以发第二个请求，可以使用js接收服务器的响应，然后使用js来局部刷新

下面举一个异步交互的简单小例子：

<script type="text/javascript">
windows.onload = function(){ //在文档加载完成后马上执行
	// 得到btn元素
	var btn = document.getElementById("btn");
	// 给btn的click时间注册监听
	btn.onclick = function(){ // 在按钮被点击时执行
		// 获取h1元素对应的DOM对象
		var h1 = document.getElementById("h1");
		// 给h1添加内容
		h1.innerHTML = "Hello JS!!!";
	};
};
</script>
<body>
<button id="but">点击这里</button>
<h1 id="h1"></h1>
</body>

AJAX的应用场景以及优缺点

应用场景：

  • 百度的搜索框
  • 用户注册时（校验用户名是否被注册过）

优缺点：

  • 优点：
    异步交互增强了用户的体验
    性能方面：因为服务器无需再响应整个页面，只需要响应部分内容，所以服务器的压力减轻了

  • 缺点：
    AJAX不能应用于所有场景
    AJAX无端的增多了对服务器的访问次数，给服务器带来了压力

AJAX发送异步请求（四步操作）

1.得到XMLHttpRequest

AJAX其实只需要学习一个对象：XMLHttpRequest
大多数浏览器都支持：
var xmlHttp = new XMLHttpRequest();
IE6.0：var xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
IE5.5以前更早版本的IE：var xmlHttp = new ActiveXObect(“Microsoft.XMLHTTP”);

编写创建XMLHttpRequest对象的函数：

function createXMLHttpRequest(){
	try{
		return new XMLHttpRequest();
	}catch(e){
		try{
			return new ActiveXObject("Msxml2.XMLHTTP");	
				}catch(e){
					try{
						return new ActiveXObject("Microsoft.XMLHTTP");	
						}catch(e){
								alert("哥们儿，你用的是什么浏览器啊？");	
								throw e;
									}	
		}
	}

}

2.打开与服务器的连接
xmlHttp.open():用来打开与服务器的连接，它需要三个参数：

请求方式：可以是GET或POST
请求的URL：指定的服务器端资源，例如：/day23_1/AServlet
请求是否为异步：如果为true表示发送异步请求，否则同步请求
xmlHttp.open(“GET”,"/day23_1/AServlet",true);

3.发送请求
xmlHttp.send(null):如果不给可能造成部分浏览器无法发送

参数：就是请求体内容，如果是GET请求，必须给出null

4.在xmlHttp对象的一个事件上注册监听器：onreadystatechange

xmlHttp对象一共有5个状态：
0状态：刚创建，还没有调用open（）方法；
1状态：请求开始，调用了open（）方法，但还没有调用send（）方法
2状态：调用完了send（）方法
3状态：服务器已经开始响应，但不表示响应结束了
4状态: 服务器响应结束（通常我们只关心最后这个状态）

得到xmlHttp对象的状态：
var state = xmlHttp.readyState;//可能是0、1、2、3、4
得到服务器响应的状态码：
var status = xmlHttp.status;//例如200、404、500
得到服务器响应的内容:
var content = xmlHttp.responseText;//得到服务器响应的文本格式内容
var content = xmlHttp.responseXML;//得到服务器响应的xml响应内容，它是Document对象了

xmlHttp.onreadystatechange = function(){//xmlHttp的5钟状态都会调用本方法
	//双重判断：判断是否为4状态，而且还要判断是否为200
	if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
		//获取服务器的响应内容
		var text = xmlHttp.responseText;
	}
};

下面是一些关于ajax的应用实例

第一例：打印 Hello World

（Servlet）:  
public class AServlet extends HttpServlet{
	public void doGet(HttpServletRequest request, HttpServletResponse response) 
		throws ServletException, IOException{
		System.out.println("Hello AJAX!");
		response.getWriter().print("Hello AJAX!!！");
	}
}
（jsp）:
<script type="text/javascript">
// 创建异步对象
function createXMLHttpRequest(){
	try{
		return new XMLHttpRequest();
	}catch(e){
		try{
			return new ActiveXObject("Msxml2.XMLHTTP");	
				}catch(e){
						try{
							return new ActiveXObject("Microsoft.XMLHTTP");
								}catch(e){
									alert("哥们儿，你用的是什么浏览器啊？");	
									throw e;
									}	
						}
	}

}

windows.onload = function(){ //在文档加载完成后马上执行
	// 得到btn元素
	var btn = document.getElementById("btn");
	// 给btn的click事件注册监听
	btn.onclick = function(){ // 在按钮被点击时执行
		/* ajax四步操作，得到服务器的响应，把响应结果显示到h1元素中 */
		
		//1.得到异步对象
		var xmlHttp = createXMLHttpRequest();
		//2.打开与服务器的连接
		*指定请求方式
		*指定请求的URL
		*指定是否为异步
		xmlHttp.open("GET", "<c:url value='/AServlet'/>", true);
		//3.发送请求
		xmlHttp.send(null); //GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送
		//4.给异步对象的onreadystatechange事件注册监听器
		xmlHttp.onreadystatechange = function(){//当xmlHttp的状态发生变化时执行
		//双重判断：xmlHttp判断是否为4状态(服务器响应结束)，而且还要判断服务器响应的状态码是否为200（响应成功）
		if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
		//获取服务器的响应内容
		var text = xmlHttp.responseText;
		// 获取h1元素
		var h1 = document.getElementById("h1");
		h1.innerHTML = text;
			}	
		};
	};
};
</script>
<body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
</body>

第二例：发送POST请求（如果发送请求时需要带有参数，一般都用post请求）

open: xmlHttp.open(“POST”…);
添加一步：设置Content-Type请求头：

xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
//发送请求时指定请求体
send:xmlHttp.send(“username = zhangSan&password = 123”);

（Servlet）：
public class AServlet extends HttpServlet{
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws 
		ServletException, IOException{
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("UTF-8");
		//获取请求参数
		String username = request.getParameter("username");
		System.out.println("（POST:）Hello AJAX!" + username);
		response.getWriter().print("（POST:）Hello AJAX!!！" + username);
	}
}

(jsp) ：
<script type="text/javascript">
// 创建异步对象
function createXMLHttpRequest(){
	try{
		return new XMLHttpRequest();
	}catch(e){
		try{
			return new ActiveXObject("Msxml2.XMLHTTP");	
				}catch(e){
					try{
						return new ActiveXObject("Microsoft.XMLHTTP");	
							}catch(e){
								alert("哥们儿，你用的是什么浏览器啊？");	
								throw e;
									}	
						}
	}

}

windows.onload = function(){ //在文档加载完成后马上执行
	// 得到btn元素
	var btn = document.getElementById("btn");
	// 给btn的click事件注册监听
	btn.onclick = function(){ // 在按钮被点击时执行
		/* ajax四步操作，得到服务器的响应，把响应结果显示到h1元素中 */
		
		//1.得到异步对象
		var xmlHttp = createXMLHttpRequest();
		//2.打开与服务器的连接
		*指定请求方式
		*指定请求的URL
		*指定是否为异步
		//修改open方法，指定请求方式为POST
		xmlHttp.open("GET", "<c:url value='/AServlet'/>", true);
		//设置请求头：Content-Type
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		//3.发送请求
		xmlHttp.send("username = zhangSan&password = 123"); //
		//4.给异步对象的onreadystatechange事件注册监听器
		xmlHttp.onreadystatechange = function(){//当xmlHttp的状态发生变化时执行
		//双重判断：xmlHttp判断是否为4状态(服务器响应结束)，而且还要判断服务器响应的状态码是否为200（响应成功）
		if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
		//获取服务器的响应内容
		var text = xmlHttp.responseText;
		// 获取h1元素
		var h1 = document.getElementById("h1");
		h1.innerHTML = text;
			}	
		};
	};
};
</script>
<body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
</body>

第三例：注册表单之检验用户是否注册
1.编写页面：（ajax3.jsp）

给出注册表单页面
给用户名文本框添加onblur事件的监听
获取文本框的内容，通过ajax4步发送给服务器，得到响应结果
* 如果是1：在文本框后显示"用户名已被注册"
* 如果是0：什么都不做

2.编写Servlet（ValidateUsernameServlet）

获取客户端传递的用户名参数
判断是否为itcast
* 是：返回1
* 否：返回0

(ajax3.jsp)
<script type="text/javascript">
// 创建异步对象
function createXMLHttpRequest(){
	try{
		return new XMLHttpRequest();
	}catch(e){
		try{
			return new ActiveXObject("Msxml2.XMLHTTP");	
				}catch(e){
					try{
						return new ActiveXObject("Microsoft.XMLHTTP");	
							}catch(e){
								alert("哥们儿，你用的是什么浏览器啊？");	
								throw e;
									}	
						}
	}

}
window.onload = function(){
	//获取文本框，给它的失去焦点事件注册监听
	var userEle = document.getElementById("usernameEle");
	userEle.onblur = function(){
		//1.得到异步对象
		var xmlHttp = createXMLHttpRequest();
		//2.打开连接
		xmlHttp.open("POST","<c:url value='/ValidateUsernameServlet'>",true);
		//3.设置请求头：Content-Type
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		//4.发送请求，给出请求体
		xmlHttp.send("username=" + userEle.value);
		//5.给xmlHttp的onreadystatechange事件注册监听
		xmlHttp.onreadystatechange = function(){
			//双重判断
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
			//获取服务器的响应，判断是否为1
			//是：获取span，添加内容："用户名已被注册"
			var text = xmlHttp.responseText;
			if(text == "1"){
				//得到span元素
				var span = document.getElementById("errorSpan");
				span.innerHTML = "用户名已被注册！";
			}
		};
	};
};
</script>

<body>
<h1>演示用户名是否被注册</h1>
<form action="" method="post">
用户名：<input type="text" name="username" id="usernameEle"/><span id="errorSpan"></span></br>
密码：<input type="password" name="password"/><br/>
<input type="submit" value="注册"/>
</form>
</body>

（ValidateUsernameServlet）：
public class AServlet extends HttpServlet{
	public void doPost(HttpServletRequest request, HttpServletResponse response) 
		throws ServletException, IOException{
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("UTF-8");
		/*
		1.获取参数username
		2.判断是否是itcast
		3.如果是：响应1  否则响应0
		*/
		String username = request.getParameter("username");	
		if(username.equalsIgnoreCase("itcast")){
			response.getWriter().print("1");
		}
		else{
			response.getWriter().print("0");	
		}
}

这是我临时起意想跟大家分享的知识，后期如果还有关于这个板块的内容，我会继续和大家一起学习的。感谢您的阅读嗷❤❤❤

China_Biiiiiiii
关注
专栏目录
被吹捧的PMP证书到底有什么用？
pmpbeikao的博客
08-17 1万+
对于正在从事项目管理行业的小伙伴来说，很多人对PMP证书也略有耳闻，但是你又是否真正了解PMP到底是如何定位，一张被吹捧的PMP证书到底有什么用？ 1、认可地区多 PMP认证目前在全球190多个国家和地区，与其他专注于特定地理位置或领域的认证不同，PMP是真正的全球性。作为PMP，您几乎可以在任何行业中使用任何方法，也可以在任何地方使用。 2、含金量高 中国自从引入PMI的项目管理专业人士认证考试（PMP）以来，成为项目管理从业者对自身的要求，成为即将从事项目管理工作的人员的“敲门砖”。..
软件设计01丨软件设计到底是什么？
最新发布
qq_53280238的博客
07-09 965
今天，我们学习了软件设计到底是什么，它应该包括“模型”和“规范”两部分：模型，是一个软件的骨架，是一个软件之所以是这个软件的核心。模型的粒度可大可小。我们所说的“高内聚、低耦合”指的就是对模型的要求，一个好的模型可以有效地隐藏细节，让开发者易于理解。模型是分层的，可以不断地叠加，基于一个基础的模型去构建上一层的模型，计算机世界就是这样一点点构建出来的。规范，就是限定了什么样的需求应该以怎样的方式去完成。它对于维系软件长期演化至关重要。关于规范，常见的两种问题是：一个项目缺乏显式的、统一的规范；
ajax需要吗,Ajax，我们真的需要吗？
weixin_33905037的博客
08-06 924
Ajax遍地开花，而且很多巨头不遗余力地支持，似乎有了Ajax，我们的应用就会变得更美好。但是，我们真的需要Ajax吗？丰富的用户体验成为现在的热门话题，于是，javascript和xml组合在一起，摇身一变成了Ajax。似乎这会为我们B/S架构的前端带来强大的展现能力。大家津津乐道 Gmail 的例子，然后说，我们的应用可以变得更强大。可是Ajax首先让我想起的是javascript带给我的痛苦...
现在很多人都在用Ajax了 原因是效果很好 但是也不能随便用 Ajax的七宗罪 驳七宗罪
liu510817387的专栏
02-22 3024
AJAX的七宗罪  引子  2005.2.18，Jesse   James   Garrett   的一篇A   New   Approach   to   Web   Applications引出了AJAX这个web界的新名词。加上新宠儿在降生下来就和足球名队阿贾克斯、Google   Suggest     Google   Maps这些大腕息息相关，不想出名都难啊。但似乎人们给与AJ
ajax有哪些优缺点?
zybijiso666的博客
10-29 751
是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax的优缺点及使用
q12as的博客
10-19 340
ajax可以在浏览器中向服务器发送异步请求，最大的特点就是网页不刷新向后端发送http请求，获取数据。ajax在很多地方都有用到，例如：百度的搜索，很多网站的登录、注册页面等等。利用得当还可以加快网页的加载速度。 Ajax的优点 可以无刷新页面就与服务器进行通信 可以根据用户时间在更新部分页面的内容 Ajax的缺点 存在跨域问题（同源策略限制，可以用jsonp来解决） 没有浏览历史记录，无法回退页面 Ajax请求：...
Ajax的优缺点
06-16 172
Ajax的优缺点 优点： AJAX使用Javascript技术向服务器发送异步请求； AJAX无须刷新整个页面； 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高； 缺点： AJAX并不适合所有场景，很多时候还是要使用同步交互； AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大； 因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题； ...
被吹捧的LPDDR5到底是个啥DDR5 的主要功能介绍.docx
10-26
LPDDR5 是一种高性能、低功耗的存储器解决方案，主要面向移动和汽车应用，具有高速数据传输速度和低功耗特点。LPDDR5 的主要功能包括支持高达 6400 Mbps 的数据速率、动态电压调节（DVS）、灵活的 DRAM 存储库架构...
爆火的 Auto-GPT 被过分吹捧了！
04-28
但两者也存在一定的差异，相较于 ChatGPT ，Auto-GPT 最突出的一个优势是具有分解 AI 步骤的能力。 Auto-GPT 可以根据用户的需求，在完全不需要用户插手的情况下，自主执行任务且能覆盖大范围的事务，包括日常的事件...
XScreensaver-RFID-Unlock:这是一个用 Perl 编写的概念的工作证明，它将允许人们使用 RFID 卡解锁他们的 XScreensaver。 将 RFID 卡放在手机壳或钥匙扣上，然后将读卡器藏在桌子底下。 当您返回时，程序将输入您的密码并解锁屏幕保护程序。 被 XScreensaver 作者本人吹捧为“可爱”而不是正确的做事方式，使用它需要您自担风险。 http
06-13
这是一个用 Perl 编写的概念的工作证明，它将允许人们使用 RFID 卡解锁他们的 XScreensaver。 将 RFID 卡放在手机壳或钥匙扣上，然后将读卡器藏在桌子底下。 当您返回时，程序将输入您的密码并解锁屏幕保护程序。 被...
ajax_用ajax实现多文件上传
qq_35556474的博客
01-16 6767
jsp代码块<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <
java jquery用的多吗_[Java教程]如果不用jQuery,Ajax你还能写出多少?
weixin_35900668的博客
02-16 128
[Java教程]如果不用jQuery,Ajax你还能写出多少?0 2014-03-19 19:00:23许久之前发过一篇关于Ajax的博客,通篇讲的都是通过jQuery编写Ajax,可能因为jQuery在这方面做的实在太好,以至于突然发现不用jQuery的话自己都模糊了Ajax的写法,这里重温一下.First- 我们明确在使用jQuery的Ajax忽略掉的问题,那就是Ajax的操作...
Ajxa用在哪些方面(六)
weixin_30321709的博客
09-28 206
Ajax只有在适当的地方才会用到，也即需要在后台进行大量数据处理（充当消息通知机制），需要频繁的定时或不定时从服务器中读取数据的时候。1.比如我们常接触电子邮件系统中，因为电子邮件系统一般都由电子邮件服务器及客户端组成，当用户通过web登录电子邮件系统时，web服务器需要 从邮件服务器中收取邮件内容，这个邮件收取的过程有时会比较长，而且在用户阅读邮件的过程中不定时的还有有新邮件出现。在这些系统中使...
Ajax技术的优缺点
lanchengxiaoxiao的专栏
10-31 2万+
AJAX笔试面试题汇总   1. 什么是ajax，为什么要使用Ajax（请谈一下你对Ajax的认识） 什么是ajax： AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。 Ajax包含下列技术： 基于web标准（standards-based presentation）XHTML+CSS的表示； 使用
Ajax是什么？Ajax的作用和使用
热门推荐
qq_42822993的博客
09-15 2万+
Ajax是什么？Ajax的作用和使用 一、Ajax是什么？ ​         Ajax是一种使用现有技术集合，技术内容包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 ​         用于浏览器与服务器之间使用异步数据传输(HTTP
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值