用基本的JS进行Ajax请求

最新推荐文章于 2021-10-13 20:40:28 发布
最新推荐文章于 2021-10-13 20:40:28 发布
阅读量539 收藏
点赞数
分类专栏： 前端

之前在项目中使用ajax都是通过JQuery的Ajax API来进行的，今天试了一下通过基本的Javascript来进行ajax请求，将代码记录下来：

jsp 页面
[xhtml] view plain copy
  1. <%@ page pageEncoding="UTF-8"%>    
  2.     
  3. >    
  4. <html>    
  5.   <head>    
  6.     <title>Ajaxtitle>    
  7.     <script type="text/javascript" src="media/js/jquery.js" mce_src="media/js/jquery.js">script>    
  8.     <script type="text/javascript" src="media/ajax.js" mce_src="media/ajax.js">script>    
  9.   head>    
  10.       
  11.   <body>    
  12.     Ajax.jsp<br/>    
  13.     <div id="msg" style="background-color:#EEEEEE;width:400px;height:200px;margin:1em;padding:1em;border:1px solid #DD6900">    
  14.     啦啦啦    
  15.     div>    
  16.     <button id="start" style="margin:1em;border:1px solid #DD6900" mce_style="margin:1em;border:1px solid #DD6900">Start Ajaxbutton>    
  17.   body>    
  18. html>  
进行ajax请求的js 代码，可以附带一些json和xml数据（必须是post方法）
[javascript] view plain copy
  1. var xmlHttp;    
  2. function createXMLHttpRequest() {    
  3.     if (window.ActiveXObject) {    
  4.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    
  5.     }    
  6.     else if (window.XMLHttpRequest) {    
  7.         xmlHttp = new XMLHttpRequest();    
  8.     }    
  9. }    
  10. var okFunc = function(){    
  11.     if(xmlHttp.readyState == 4) {    
  12.         if(xmlHttp.status == 200) {    
  13.             $("#msg").html(xmlHttp.responseText);    
  14.         }    
  15.     }    
  16. }    
  17. var startAjax = function(){    
  18.     $("#msg").html("Loading...");    
  19.     createXMLHttpRequest();    
  20.     if( !xmlHttp){    
  21.         return alert('create failed');    
  22.     }    
  23.     xmlHttp.open("POST", "Test", true);    
  24.     xmlHttp.onreadystatechange = okFunc;    
  25.     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    
  26.     xmlHttp.send(document);    
  27. }    
  28. $(document).ready(function(){    
  29.     $("#start").click(startAjax);    
  30.     $.post("Test",{'name':'Hello','age':22});    
  31. });  
 
在服务器端的Servlet：
java 代码
[java] view plain copy
  1. package ajax;    
  2.     
  3. import java.io.BufferedReader;    
  4. import java.io.IOException;    
  5. import java.io.PrintWriter;    
  6.     
  7. import javax.servlet.ServletException;    
  8. import javax.servlet.http.HttpServlet;    
  9. import javax.servlet.http.HttpServletRequest;    
  10. import javax.servlet.http.HttpServletResponse;    
  11.     
  12. public class Test extends HttpServlet {    
  13.     public void doGet(HttpServletRequest request, HttpServletResponse response)    
  14.             throws ServletException, IOException {    
  15.         BufferedReader reader = request.getReader();    
  16.         String line = null;    
  17.         while((line = reader.readLine()) != null) {    
  18.             System.out.println(line);    
  19.         }    
  20.         System.out.println("Start writing");    
  21.         response.setContentType("text/html");    
  22.         PrintWriter out = response.getWriter();    
  23.         out.println(");    
  24.         out.flush();    
  25.         out.close();    
  26.     }    
  27.     
  28.     @Override    
  29.     protected void doPost(HttpServletRequest req, HttpServletResponse resp)    
  30.             throws ServletException, IOException {    
  31.         doGet(req, resp);    
  32.     }    
  33.         
  34. } 
lisa890608
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
分享JavaScript监听全部Ajax请求事件的方法
10-21
最近在做一个小项目，引入了第三方js文件，这个文件会调用XMLHttpRequest向服务器发送 Ajax请求，但是我有需要监听其Ajax请求的某些事件，以便额外地执行其他脚本。于是稍微看了看监听 Ajax请求的事件方法，在这里...
C# 如何使用ajax请求
08-18
C# 如何使用ajax请求 C# 使用ajax请求是指在C# 项目中使用ajax技术来实现异步更新网页的内容。ajax即“Asynchronous Javascript And XML”（异步JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页...
用基本的JS进行Ajax请求笔记
记录技术点点之路
06-18 115
之前在项目中使用ajax都是通过JQuery的Ajax API来进行的，今天试了一下通过基本的Javascript来进行ajax请求，将代码记录下来：   jsp 页面 [xhtml] view plaincopy &lt;%@ page pageEncoding="UTF-8"%&gt;       &gt;     &lt;html&gt;       &lt;head&...
学习JavaScript（8）AJAX请求方法
Echianer的博客
12-01 237
文章目录前言请求方法1、原生JavaScript2、jQuery3、axios4、fetch()总结 前言 文章的ajax请求需要用到node创建的后端，一些ajax知识也可以参考 学习JavaScript（2）AJAX基础 学习JavaScript（7）node简易后端创建 请求方法 这里用的后端是前文创建的9000端口，需要配置说明可以参考前文 学习JavaScript（7）node简易后端创建 1、原生JavaScript 原生JavaScript需要以下几步重要操作，包括在绑定事件时对于read
十三、JavaScript ajax请求
拾荒人博客
10-13 2115
1.什么事ajax Asynchronous JavaScript and xml （异步JavaScript和XML） 主要作用是用来处理前后端数据传输 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScrip.
读取ajax提交数据,JS获取页面数据执行Ajax请求
weixin_34168167的博客
08-05 480
下面这个例子展示了如何使用js获取页面中元素的值，并且将这些值作为参数执行Ajax请求。$("#submit-task").bind("click", function (event) {event.preventDefault();event.stopPropagation();if(validate() == false){exit;}var submitBtn = this;// 禁止提交按...
Javascript原生ajax请求代码实例
10-15
这里我们将深入探讨如何使用原生JavaScript实现一个简单的Ajax请求。 首先，我们需要创建一个名为`Ajax`的类，这个类将包含处理Ajax请求的所有必要方法和属性。在提供的代码实例中，`Ajax`类包含了以下关键组成部分...
JS 拦截全局ajax请求实例解析
10-21
在前端开发过程中，经常会有对Ajax请求进行管理和...通过以上的示例，可以清晰地看到如何使用Ajax-hook拦截全局Ajax请求，并进行各种自定义操作。这个工具能够帮助开发者更好地管理Ajax请求，满足各种复杂的业务需求。
原生JS实现ajax与ajax的跨域请求实例
11-27
以下是如何使用原生JavaScript实现一个简单的AJAX请求的步骤： 1. **创建XMLHttpRequest对象**：在JavaScript中，我们首先需要创建一个XMLHttpRequest对象，它是AJAX的核心，用于与服务器进行异步通信。 ```...
click点击事件触发多次ajax请求解决方案
weixin_42905245的博客
11-27 1178
在项目中遇到点击时间触发了多次ajax请求，解决方案是需要加上unbind(‘click’) unbind()为了清除这个dom之前绑定的事件。 $(document).on('click','#zd',function () { // 加上unbind('click')解决多次触发ajax请求 $(document).unbind('click').on('click','#zd',function () { ...
ajax请求时，一次点击两次提交的问题
无敌轻车的博客
03-14 1万+
ajax请求时，一次点击两次提交的问题解决原代码
使用JavaScript(JS)进行Ajax异步请求
shuaishuaidewo的博客
10-25 2450
首先使用Ajax可以使网页实现异步更新，就是不重新加载整个网页的情况下，对网页的某部分进行更新(局部刷新)， 所以当需要进行局部刷新的时候使用。 注意：AJax中的请求乱码问题：POST方式无需进行乱码处理，Ajax内部封装了处理方式，如果是GET方式，请参考 上一篇关于请求乱码的问题中的get请求的处理方法。 原生态JS操作ajax步骤： A.获得ajax引擎 B.设置回调函数（re
js原生ajax请求
热门推荐
江南极客
12-15 1万+
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 即 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。它可以在不重新加载整个页面的情况下完成与服务器交换数据并更新部分网页。
超市管理系统，基于javaweb.zip
08-15
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无积分，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于收集和整理资料耗费时间的酬劳
vue3面试题2023,84页，几十道vue面试题，准备vue的面试，这么一份文件就够了
08-15
vue3面试题2023： Vue 的优缺点  优点 1.创建单页面应用的轻量级Web应用框架 2.简单易用 3.双向数据绑定 4.组件化的思想 5.虚拟DOM 6.数据驱动视图 缺点 不支持IE8
【雷达跟踪】基于matlab雷达目标生成与跟踪【含Matlab源码 7220期】.zip
08-15
CSDN海神之光上传的代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博客文章底部QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪（CEEMDAN）、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信
CTR2024中国广告主营销趋势调查报告.pdf
最新发布
08-15
【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2
js 使用ajax请求接口
06-10
好的，下面是一个使用 JavaScript 的 AJAX 请求接口的示例代码： ```javascript // 创建一个 XMLHttpRequest 对象 var request = new XMLHttpRequest(); // 设置请求方法和请求地址 request.open('GET', 'https://api.example.com/data', true); // 发送请求 request.send(); // 监听请求状态的改变 request.onreadystatechange = function() { if (request.readyState === 4 && request.status === 200) { // 请求成功 console.log(request.responseText); } else { // 请求失败 console.log('请求失败'); } }; ``` 这个示例代码展示了如何通过 AJAX 请求一个远程接口，并在请求成功时打印出响应内容。需要注意的是，这里请求的是一个 GET 请求，如果需要发送 POST 请求，则需要在 `request.open()` 方法中指定请求方法为 POST，并在 `request.send()` 方法中传递请求数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值