AJAX如何与后台交互

html中使用Ajax与后台接口api交互(以登录功能为例) 一、查阅开发文档首先,要做这个功能前,我们必须先查阅后台接口文档,了解使用登录接口时,需要提交哪些参数,并且接口使用返回的数据。 这里我使用了一个返回json格式数据的登录接口为例,讲解怎么使用Ajax与后台接口交互。由上图开发文档里,我们可以清楚的知道,要使用这个登录接口,我们只需要提交账号adminName和密码pwd两个参数。二、编写javascript(Ajax)实现登录 var xmlh 阅读详情
   Ajax全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合。Ajax以一种崭新的方式来使用所有的这些技术,使得古老的B/S方式的Web开发焕发了新的活力。
Ajax技术之中,最核心的技术就是XMLHttpRequest,它最初的名称叫做XMLHTTP,是微软公司为了满足开发者的需要,1999年在IE5.0浏览器中率先推出的。后来这个技术被上述的规范命名为XMLHttpRequest。它正是Ajax技术之所以与众不同的地方。简而言之,XMLHttpRequest为运行于浏览器中的JavaScript脚本提供了一种在页面之内与服务器通信的手段。页面内的JavaScript可以在不刷新页面的情况下从服务器获取数据,或者向服务器提交数据。XMLHttpRequest的出现为Web开发提供了一种全新的可能性,甚至整个改变了人们对于Web应用由什么来组成的看法。它可以使我们以一种全新的方式来做Web开发,为用户提供更好的交互体验。
与传统的Web开发不同,Ajax并不是以一种基于静态页面的方式来看待Web应用的。从Ajax的角度看来,Web应用应由少量的页面组成,其中每个页面其实是一个更小型的Ajax应用。每个页面上面都包括有一些使用JavaScript开发的Ajax组件。这些组件使用XMLHttpRequest对象以异步的方式与服务器通信,从服务器获取需要的数据后使用DOM API来更新页面中的一部分内容。因此Ajax应用与传统的Web应用的区别主要在三个地方:
1. 不刷新整个页面,在页面内与服务器通信。
2. 使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的的响应能力。
3. 应用仅由少量页面组成。大部分交互在页面之内完成,不需要切换整个页面。
由此可见,Ajax使得Web应用更加动态,带来了更高的智能,并且提供了表现能力丰富的Ajax UI组件。这样一类新型的Web应用叫做RIA(Rich Internet Application)应用。
前面是本人在网上找的一些关于AJAX介绍的资料,以帮助不了解AJAX技术的读者尽快了解AJAX技术,下面本人将会把自己在实际开发过程中用到的一些AJAX技术及技巧给大家介绍一下.
使用AJAX技术最重要的就是创建XMLHttpRequest对象,关于如何创建该对象网上有很多资料.本人最常用的一个方法是
function createXMLHttpRequest() {
    var xmlhttp;
    try {
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    } catch(e) {
        try {
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        } catch(e) {
            try {
                xmlhttp = new XMLHttpRequest();
            } catch(e) {
                alert("创建XMLHttpRequest对象失败!");
            }
        }
    }
    return xmlhttp;
}
下面本人将列出一些例子及一些通过这些例子可以学到的东西.
下面一段代码是本人在做新增特定物品时,做验证以判断该物品是否已在数据库中存在的例子.
<input type="text" style="width:100%" class="noEmptyInput" name="segment10" value="<%=segment10%>" maxlength="16" onblur="do_verify();">
function do_verify() {
    var segment10 = document.mainFrm.segment10.value;
    var inventoryItemId = document.mainFrm.inventoryItemId.value;
    //    alert(segment10)
    xmlHttp = createXMLHttpRequest();
    var url = "/servlet/com.sino.ies.inv.maintenance.servlet.ItemMaintainServlet?forward=doVerify&segment10=" + segment10 + "&inventoryItemId=" + inventoryItemId;
    xmlHttp.onreadystatechange = handleReadyStateChange;
    xmlHttp.open("post", url, true); //传递数据的方法同样有GET和POST两种,但是当方法为POST时下面的一句话就必须写
    xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlHttp.send(null);
}
function handleReadyStateChange() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            if (xmlHttp.responseText == 'Y') {
                document.mainFrm.isExist.value = 'Y';
                document.getElementById("flag").style.display = "block"
                document.mainFrm.segment10.focus();
            } else {
                document.mainFrm.isExist.value = 'N';
                document.getElementById("flag").style.display = "none"
            }
        } else {
            alert(xmlHttp.status);
        }
    }
}
后台代码为:
                boolean success = itemDAO.doVerifyItem();  //doVerifyItem为验证指定物品是否在数据库中存在的主要方法,如果该物品已存在该方法将返回TRUE
                PrintWriter out = res.getWriter();
                if (success) {
                    out.print("Y");
                }
                out.flush();
                out.close();
            }
 
JQuery九种与后台交互数据的方法(ajax) 首先创建一个一般处理程序“ResponseJson.ashx”,手动拼接字符串返回Json格式: public void ProcessRequest(HttpContext context)         {             context.Response.ContentType = "text/plain";             List cityInfos = new 阅读详情

相关推荐

(二)使用Ajax简单实现前后端交互

(二)使用Ajax简单实现前后端交互

孤寒者的博客 5万+

ajax与后台的交互demo

这个demo主要演示ajax与tomcat服务器的简单交互操作! 思路:在输入框中输入用户名,如用户名为空,则显示“请输入用户名”;如输入的用户名已存在,则显示“错号”图片;不存在相同的用户名,则显示“对号”图片 源码链接:https://github.com/longhaicheng/ajax-and-java 目录截图 前端界面(比较简单) 未输入 随机输入用户名 输入已存在的用户名 代码:

小海子的博客 4859

简单Ajax实例(带前后台交互)

附件为Ajax的几个实例,在JSP页面中实现,实现了前后端交互。

ajax前后端数据交互(简单的登录demo)

前端: html: js(ajax): js(记住密码): 后端: Apiresponse: UserController: 登陆验证: 设置cookie: 从cookie获取用户名密码并向前端传参: 配置session拦截器: ...

pirate_zhangfan的博客 2万+

VHDL按键消抖(状态机版本)

检测下降沿:设置一个和,分别代表之前的之前和之前的信号状态,若两个信号key_in_d2=1,key_in_d1=0,他俩的not key_in_d2 and key_in_d1为1,则说明下降沿产生,把它设置为标志位key_flag。延时计数:50MHz的板子每次计数需要20ns,而抖动时间大约为5-10ms。所以取7ms,作为延时时间。可以看见当检测到下降沿时,开始计数计数计满再次检测,若为低电平则为按下按键,否则为抖动。通过检测下降沿来临,延时计数再次检测,如果为低电平则为按键按下。

qq_69639216的博客 1084

自绘CListCtrl时发现ON_WM_MEASUREITEM_REFLECT和DrawItem(LPDRAWITEMSTRUCT lpMeasureItemStruct) 无响应

自绘CListCtrl时发现ON_WM_MEASUREITEM_REFLECT和DrawItem(LPDRAWITEMSTRUCT lpMeasureItemStruct) 无响应 一般情况下,我们都是在 dialog 里面 放一个 list 控件,然后 用自己的类绑定自己的自绘对象,如同下面: 1.  在 dialog 里面 加一个 list 列表 2. 然后 绑定这个列表 哈哈...

mfreesky的专栏 2171

ajax同后台交互demo

这里主要通过代码的形式展示ajax同后台交互的案例: 一:后台返回json数据: ajax代码如下: function myAjaxFunction() { var merchantId = $('#merchantId').val()); $.ajax({ type: 'POST', url: "****/****.acti

flysun的博客 433

跨平台烧录实战:RKDevTool在Windows/Linux/MacOS下的统一与差异

本文详细解析了RKDevTool在Windows、Linux和macOS三大操作系统下的固件烧录实践,重点介绍了RK3576开发板的环境配置、工具链选择、烧录模式切换及常见问题解决方案,帮助开发者构建稳定可靠的跨平台烧录工作流。

cnn8visionary的博客 206

php与后台的交互、ajax异步处理

文章目录准备注意可能出现的问题用服务器打开网页的方式ip与域名关系php与后台的交互说明hello-world.php数据类型type.php传输过程文件目录person.phpperson.html变量及作用域variable.phpAjax异步处理Ajax 1 - 请求纯文本文件目录sample.txtajax1.htmlAjax 2 - 请求JSON数据文件目录user.jsonusers.jsonajax2.htmlAjax 3 - 请求Github接口文件目录ajax3.htmlAjax 4 -

weixin_45191282的博客 1307

RFSoC应用XCZU47DR八发八收FPGA设计方案

本文介绍了基于Xilinx XCZU47DR RFSoC芯片的八发八收FPGA设计方案。该方案采用集成射频数据转换器的SoC架构,支持8路14bit ADC(5GSPS)和8路14bit DAC(9.85GSPS),可直接处理5GHz以下射频信号。硬件设计包含高性能输入缓冲器、QMC校正和复杂混频器,适用于5G/6G通信、雷达、卫星通信等领域。文章详细阐述了ADC/DAC子系统参数,包括通道配置、采样率、带宽等特性,并提供了FPGA顶层模块的硬件接口设计,展示了多通道数据收发处理能力。该方案无需外置混频器,

toonyhe的博客 1793

Auto.js实现视频号点赞自动化

摘要:本文介绍了一个微信视频号自动化点赞的实现方案。通过定位点赞图标和数量容器,点击点赞按钮后检测点赞数变化,若发现取消点赞则自动补点。核心代码包括:1)获取点赞容器和图标;2)记录点赞前后数量;3)判断是否误取消并补点;4)循环执行点赞和滑动页面操作。该方案解决了滑动页面可能导致误取消点赞的问题,实现了自动化批量点赞功能。文章强调仅供学习参考,提醒勿滥用该技术。

分享前端工程化、AI 应用、Agent 开发与大模型实践! 2575

前端与后台交互的AJAX的运用

JavaScript创建函数,用JQuery的AJAX实现前端与后台交互 定义按钮或者a标签 <a href="#" type="button" onclick="ajax001();">提交</a> <input type="button" value="提交" onclick="ajax001();"></input> 定义AJAX...

weixin_43881282的博客 6723

uniapp+renderJS+google map开发安卓版APP非小程序

uniapp+renderJS+google map开发安卓版APP非小程序,google map小叉号不显示,google map自定义marker右上角的小叉号如何去掉,uniapp+google map不显示

renkai721的专栏 667

Ajax 与后台 HttpServlet 的简单交互

Ajax 与后台 HttpServlet 的简单交互 架构: ------------------------------------------------------ web.xml <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xm

bookZhong的博客 459

基于VLFM的中文指令视觉语言导航系统设计与实现

文章摘要 本文介绍了一个基于VLFM(视觉语言边界地图)的中文指令视觉语言导航系统设计与实现。该系统采用模块化架构,包含三维场景渲染、URDF机器人仿真、VLFM导航引擎、中文指令解析和PyQt图形界面五大核心模块。系统支持自定义GLB场景模型和URDF机器人模型,通过transformers和langchain实现中文自然语言指令解析,利用VLFM算法进行语义导航决策。技术实现上详细介绍了GLB模型加载器开发、URDF机器人控制、VLFM导航算法集成以及PyQt界面设计。该系统在Ubuntu环境下运行,依

AI的内部世界的博客 209

使用 Simulink 进行电力电子系统的效率优化仿真

电力电子系统(Power Electronics System)是现代电力系统和工业自动化中的关键组成部分,广泛应用于可再生能源发电、电动汽车、不间断电源(UPS)、电机驱动等领域。为了提高系统的整体性能和经济性,必须对电力电子系统的效率进行优化。效率优化的目标是最大化系统的能量转换效率,减少损耗,从而提高系统的可靠性和经济效益。Simulink 提供了一个强大的仿真环境,可以用来设计、分析和验证电力电子系统的效率优化策略。本教程将详细介绍如何使用 Simulink 进行电力电子系统的效率优化仿真。

xiaoheshang_123的博客 356

Vue中使用Ajax与后台交互

一、下载依赖包 npm install --save axios 二、封装 ajax 请求模块 2.1 api/ajax.js /* ajax 请求函数模块 */ import axios from 'axios' export default function ajax (url = '', data = {}, type = 'GET') { retur...

weixin_30654419的博客 744

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

用AJAX与后台进行交互

AJAX是什么 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新

m0_37547070的博客 1670

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

vue ajax 与后台交互问题

之前对 vue 做过简单的了解,但是对如何使用 vue 与后台进行数据交互仍是一知半解。今天通过我的毕业设计,我了解了如何使用 vue 进行数据交互。本来打算使用 vue-resource,但尝试了几次都没有成功,最后使用 ajax 成功了。贴上代码如下:注意,首先要在页面上引入  jQuery.js  以及 vue.js. &lt;div class="input-group wsh-a...

wsh2467991332的博客 2872

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

ajax与后台交互小实例

该实例用的是php作后台,实现起来容易,php代码简单,实际操作了解 ajax与后台交互: html 代码: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp

fuxi0o_的博客 1051

Ajax 方法如何与后台交互

Ajax 方法如何与后台交互

qq_43678748的博客 210

Ajax()方法如何与后台交互

Ajax全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合 Ajax全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网

一生行船不用桨全靠浪的博客 3577

ajax没和后台连上,关于ajax的与后台Controller的交互 后台拿不到值

话不多说 上代码这是前段js的代码 传的两个参数 cLassid 和 userid$.ajax({type:"post",url:"../classsetting/addCounselor.do",data:{"cLassid": cLassid, "userid": userid},dataType:"json",// contentType:"applicatio...

weixin_42365141的博客 358
上一篇: mscorwks.dll在DotNet中的地位以及在.Net代码保护方面的应用
下一篇: 别忘了,你的世界我曾来过
JavaProgramers
博客等级 码龄22年 660粉丝 304原创
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值