JavaScript实现AJAx的使用

最新推荐文章于 2024-05-08 14:53:30 发布
最新推荐文章于 2024-05-08 14:53:30 发布
阅读量2k 收藏 2
点赞数 1
分类专栏： Javaweb 文章标签： 关于ajax异步请求数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42952331/article/details/84825127
版权

工程目录结构：
在这里插入图片描述
代码：serlvet代码：

@WebServlet("/ajaxServlet")
public class ajaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//得到目标文件路径
		String url=request.getServletContext().getRealPath("demo.txt");
		File file= new File(url);
		//创建输入流
		FileInputStream  in =new FileInputStream(file);
		ServletOutputStream out =response.getOutputStream();
		int len=0; 
		byte[] bs= new byte[1024];
		while((len=in.read(bs))>0) {
			out.write(bs, 0, len);
		}
		
	}
jsp页面：


<html>
<head>
<meta charset="UTF-8">
<title>异步请求</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
function loadXMLDoc(){
	alert("方法运行")
	var xmlhttp;
	//实例化XMLHTTPRequest对象
	if(window.XMLHttpRequest){
		//针对ie7+、firefox、chrome等浏览器
		xmlhttp=new XMLHttpRequest();
	}
	else{
		//针对ie5、6
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
	}
	xmlhttp.onreadystatechange=function(){
		//readystate状态为4（服务器请求完成）并且http的状态码为200(成功)时
		if(xmlhttp.readyState==4 && xmlhttp.status==200){
			alert(xmlhttp.responseText)
			document.getElementById("text").value=xmlhttp.responseText;
		}
	}
	
xmlhttp.open("GET",
			"${pageContext.request.contextPath}/ajaxServlet?name="
			+ window.encodeURIComponent("嘻嘻", "utf-8")
			+ "&time=" + new Date().getTime());
	xmlhttp.send();
}


</script>
</head>
<body>
点击进行异步请求：<input type="button" value="异步请求" name="btn" id="btn" onclick="loadXMLDoc()"/>
<input type="text" id="text"/>
</body>
</html>

结果图：在这里插入图片描述

雾中迷童
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript-Ajax基础讲解
OuYyds的博客
04-16 1931
ajax概述： ajax全称：异步的JavaScript和xml，他是用于发送http请求（支持异步请求） ajax的特点： 1.支持异步请求 2.实现局部刷新 3.在局部刷新的时候可以保持浏览器不刷新（不会产生历史记录） ajax运用： 前端内置请求对象 --> 设置请求地址（携带数据）-- > 发送请求 --> 监听请求状态 —>请求完成后后端返回响应的数据 1.创建一个请求对象 request 请求 response 响应 let xhr = new
JavaScript实现Ajax总结
10-23
ajax应用非常普及，ajax的优点大家都知道，具体就不多说了，其缺点还真不少，比如破坏浏览器的back功能，同一个url打开的界面并不是完全相同，还有安全性能等方面，至于有...下文给大家分享javascript实现ajax小结吧
JavaScript核心技术之Ajax详解
热爱前端的大三在校生
10-10 1162
Ajax 的核心是 XMLHttpRequest 对象。所有现代浏览器都支持 XMLHttpRequest 对象。XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。首先我们在控制台打印一下，看看。
ajax 原生js操作ajax
热门推荐
fagdg的博客
07-25 1万+
1.不需要插件支持（一般浏览器且默认开启JavaScript即可）；2.用户体验极佳（不刷新页面即可获取可更新的数据）；3.提升Web程序的性能（在传递数据方面做到按需放松，不必整体提交）；4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；...
在 JS 中如何使用 Ajax 来进行请求(1)
最新发布
peixiancccc的博客
05-08 625
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
【JavaScript】-原生JavaScript实现Ajax
季诗筱的博客
05-30 2715
XHR1级、XHR2级、Ajax的原生代码实现、进度事件
用原生JavaScript实现ajax
xihuanLilia的博客
03-06 741
AJAX概念使用xhr发起GET请求了解xhr对象的readyState属性使用xhr发起带参数的请求编码和解码使用xhr对象发送POST请求 概念 XMLHttpRequest（简称xhr）是浏览器提供的Javascript` 对象，通过它，可以请求服务器上的数据资源。之 前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的 使用xhr发起GET请求 一共分为四步 第一步 用new关键字创建一个xhr对象 const xhr = new XMLHttpRequest() 第二
原生JavaScript实现Ajax的方法
10-22
主要介绍了原生JavaScript实现Ajax的几种方法，感兴趣的小伙伴们可以参考一下
使用JavaScript实现ajax的实例代码
10-22
实现ajax之前必须要创建一个 XMLHttpRequest 对象。这是必须的。那么对使用js实现ajax的代码感兴趣的朋友可以参考下本
原生JavaScript实现Ajax异步请求
10-18
要使用原生JavaScript实现Ajax，首先需要创建一个`XMLHttpRequest`对象，这是Ajax的核心。在所有支持Ajax的浏览器中，可以通过`new XMLHttpRequest()`来创建；而在老版本的IE浏览器中，我们需要使用`new ...
JS中Ajax的使用
qq_27677039的博客
12-04 1220
一、创建XMLHttpRequest 对象 XMLHttpRequest 对象用于和服务器交换数据。 为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ： var xmlhttp; if (window.XMLHttpReque...
javascript中AJAX的使用
llc950819的博客
08-29 1142
首次使用博客，记录一些自己感兴趣的东西。 参考文章地址：http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp AJAX使用的方法： 1、创建XMLHttpReques对象 浏览器使用XMLHttpRequest对象与服务器进行交互，获取数据。一般现下流行的浏览器均支持XMLHttpRequest对象（IE5 和 IE6...
JS中Ajax的方法和应用
zjjcchina的博客
01-19 1万+
XMLHttpRequest对象 Ajax技术的核心是XMLHttpRequest对象（简称XHR）,这是有微软率先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。 但因为IE的兼容性问题，这里对低版本的IE兼容性不做过多的描述。 XMLHttpRequest是一个构造函数，现在已经被各大浏览器厂商所支持，IE的话事支持IE7以上，XMLHttpRequest函数提供的方法有如下几个： open: open有三个参数，第一个参数规定了当前请求的类型(get、post、put、delete、h
JavaScript的AJAX
不睡觉的怪叔叔的博客
12-24 3265
一、传统的前后端交互方式 1.1、异步和同步的概念 同步（synchronous） —— 指一个时间段内系统只能有一个进程在执行 异步（asynchronous） —— 指一个时间段内系统可以有多个进程在执行 1.2、传统前后端交互的原理 传统的前后端交互过程： 传统的前后端交互方式（无AJAX）是同步交互的方式，同步的过程只允...
AJAX及其在JavaScript中的应用
Hopefully Sky的博客
06-03 4895
1、什么是AJAX(远程脚本编程)　　AJAX不是JavaScript的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。AJAX是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。 　　如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交
javaScript中ajax入门
程宇寒
08-19 699
ajax的本质就是，发送http请求的工作交给js中的XMLHttpRequest对象去做！ ajax中，最关键的一句话就是var xhr = new XMLHttpRequest();
javascript的ajax步骤（基础内容）
carpenterworm1874的博客
02-21 8463
实现ajax一个ajax请求的js写法1：创建ajax请求2：发出http请求 3：收到服务器传回的消息 4：更新网页数据一、创建一个XHR对象 （ie6没有xhr定义）兼容ie6写法二、使用XHR发送请求方法open() 调用open就可以调用xhr对象发送http请求send() 使用send方法把请求发送到服务器在使用xhr的时候第一个调用的是open方法，如下，该方法接受3个参数，...
js 如何使用ajax,在 JS 中如何使用 Ajax 来进行请求
weixin_39690401的博客
08-05 845
本人已经过原Danny Markov授权翻译在本教程中，我们将学习如何使用 JS 进行AJAX调用。1.AJAX术语AJAX 表示 异步的 JavaScript 和 XML。AJAX 在 JS 中用于发出异步网络请求来获取资源。当然，不像名称所暗示的那样，资源并不局限于XML，还用于获取JSON、HTML或纯文本等资源。有多种方法可以发出网络请求并从服务器获取数据。我们将一一介绍。2.XMLH...
JavaScript中ajax的使用
m0_46370469的博客
03-14 1013
ajax = Asynchronous JavaScript and XML，既异步的JavaScript和XML。 ajax是js语言和服务端交互的手段，通过在后台与服务器进行少量数据交换，ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 js中ajax请求过程： 创建 XMLHttpRequest 对象、 配置请求信息、发送请求、接收响应数据 ...
使用原生 JavaScript 或者 jQuery 来实现 Ajax。
06-01
Ajax 是一种在 Web 应用程序中使用的技术，可以在不刷新整个页面的情况下向服务器发送请求和接收响应。使用原生 JavaScript 或者 jQuery 来实现 Ajax，可以使用以下两种方式： 1. 使用原生 JavaScript 实现 Ajax 使用原生 JavaScript 实现 Ajax 可以使用 XMLHttpRequest 对象，示例代码如下： ```javascript const xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data', true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send(); ``` 以上代码使用了 GET 方法向服务器发送了一个请求，请求的路径为 `/api/data`。当请求成功时，会在控制台输出响应的内容。 2. 使用 jQuery 实现 Ajax 使用 jQuery 实现 Ajax 可以使用 jQuery.ajax 方法，示例代码如下： ```javascript $.ajax({ url: '/api/data', type: 'GET', dataType: 'json', success: function (response) { console.log(response); }, error: function (xhr, status, error) { console.log(error); } }); ``` 以上代码使用了 GET 方法向服务器发送了一个请求，请求的路径为 `/api/data`。当请求成功时，会在控制台输出响应的内容，当请求失败时，会输出错误信息。 这里需要注意的是，使用原生 JavaScript 实现 Ajax 需要手动处理跨域请求的问题，而使用 jQuery 实现 Ajax 可以自动处理跨域请求的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值