AJAX学习手记

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

#ajax #xmlhttprequest #encoding #javascript #function #import

本文介绍了一个简单的AJAX程序实例，通过JSP页面接收输入并在后台处理，根据不同输入返回不同XML响应，再利用AJAX获取并解析这些XML数据。
导读：
　　今天在各种资源的帮助下，做了一个小AJAX程序。共享出来，以备后用。其中很多都是不完善的，还望指点。
　　程序实现一个功能，在文本框内容变化的时候，下面显示不同的内容。
　　1,先做了一个返回XML文件的JSP。
　　data.jsp
　　
<%@ page language="java" contentType="text/xml; charset=UTF-8" import="java.util.*" pageEncoding="UTF-8"%><%

//获得传入的参数值
    String name = request.getParameter("name");
 out.println("<?xml version="1.0" encoding="UTF-8"?>");
 out.println("<results>");
 if ("a".equals(name)){
  out.println("<rs>my1</rs>");
 }else{
  if("b".equals(name)){
 out.println("<rs>my2</rs>");
 }else{
 out.println("<rs>my3</rs>");
 }}
 out.println("</results>"); 
%>

　　在传入的参数值不同的情况下，返回不同的XML。
　　传入a情况下，返回
　　
<?xml version="1.0" encoding="UTF-8" ?> 
<results>
<rs>my1</rs> 
</results>
　　
　　传入b情况下，返回
　　
<?xml version="1.0" encoding="UTF-8" ?> 
<results>
<rs>my2</rs> 
</results>

　　传入c情况下，返回
　　
<?xml version="1.0" encoding="UTF-8" ?> 
<results>
<rs>my3</rs> 
</results>

　　2,主体部分。
　　先看一下整个JSP文件。
　　MyAjax.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<html>
  <head>
    
    <title>My JSP 'MyAjax.jsp' starting page</title>

 <script type="text/javascript">
  function ajaxtest(){

//新建XMLHttpRequest对象

//适合firefox之类
   if (window.XMLHttpRequest)
   {
    var myXmlhttp = new XMLHttpRequest();
   }else{

//适全IE的
    var myXmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   }
   var name = document.getElementById("text1");

//打开XMLHttpRequest对象
   myXmlhttp.open("GET","http://localhost:8080/jsptest/data.jsp?name="+name.value,true);

//下面这个用法，见注1
   myXmlhttp.onreadystatechange = function() {
    if(myXmlhttp.readyState == 4&&myXmlhttp.status == 200){
     DoMyXML(myXmlhttp);
    }
   }
   myXmlhttp.send(null);
  }
  function DoMyXML(xmlObj) {
      var rtnvalue;
   var xmlDoc = xmlObj.responseXML;
   rtnvalue=xmlDoc.getElementsByTagName("rs")[0].firstChild.data;
   text2.innerHTML = rtnvalue;
   
  }
 </script>

  </head>
  
  <body>
   <table>
    <tr>
     <td>
     <input type="text" name="text1" id="text1" onBlur="ajaxtest();">
     <div id="text2"></div>
     </td>
    </tr>
   </table>
  </body>
</html>


　　注1：
　　事件：每当readyState的值发生改变时，就是产生了一个事件。事件处理的函数句柄：我们可以选择在事件产生以后，如何处理。这个处理的函数，我们必须告诉这个XMLHttpRequest对象。这里借用了C语言中的函数句柄的概念。将这个函数的句柄，在JavaScript中也就是这个函数的名称，赋值给XMLHttpRequest对象中的onreadystatechange，就可以了。（注：这里其实是创建了一个匿名的函数，onreadystatechange只是属性名称，而不是函数名称。函数在JavaScript中是第一等的对象，可以赋值给任何变量。Java开发人员尤其需要注意！）

JAVA学习手记-AJAX&Json
aming小老弟
07-17 82
AJAX&json AJAX 增强用户体验 Json 一种数据格式 应用范围广泛
如何简单学会ajax,简单的Ajax学习实践手记
weixin_35741582的博客
08-06 190
简介AJAX即“AsynchronousJavascriptAndXML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。AJAX = 异步JavaScript和XML(摘自百度百科)。AJAX 是一种用于创建快速动态网页的技术。优点：通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部...
表单注册验证用户名是否重复——Ajax学习手记
逝去的激情
09-02 3650
<br />最近由于备课的需要对Ajax来了兴趣，虽然不确定这样的兴趣可以维持多久，不过还是兴致勃勃开始写学习笔记，先通过一个最简单的实例，来了解一下Ajax。<br />大家在社区注册用户时都见过这样的效果，填写用户名后，可以立刻验证此用户名是否已被使用。<br /> <br />需准备的程序：<br />（1）reg.html注册填写页面<br />（2）reg.asp将注册信息写入数据库的程序（本例中只写入用户名）<br />（3）check.asp用于审核填写的用户名是否已存在<br /> <br
Ajax 入门 【学习手记】
javazhuanzai的专栏
02-01 634
====================================================== 注：本文源代码点此下载 ====================================================== ajax技术的兴起 据说ajax是个老技术,早就有了,后来才火起来的。 顺便说一下,ajax 是 asynchronous javascript
ECMA Script 6学习手记
Youngster_yj的博客
12-30 405
ES6 基础用例 变量声明 let命令 { let a = 10; //let命令所在的代码块内有效 var b = 1; } console.log(b); // 1 console.log(a); // 报错a没有定义 const命令 //const声明一个只读的常量。一旦声明，常量的值就不能改变，且声明时必须立即初始化，不能留到以后赋值。 const a = 10; a = 9; console.log(a); //报错 解构 数组的解构赋值 let [a,
w3c html5 ajax,Ajax教程学习笔记（W3CSchool）
weixin_27872611的博客
06-29 404
第一章： 基础1.1 是什么？AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。1.2 简介AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术...
vueJS学习手记（一）
dongkuan2508的博客
08-07 183
最近看了vue的官方文档，学习写了一些demo。记一些笔记，方便以后查阅： Vue常用指令： 　　v-model：与表单元素双向绑定（input textarea等），表单中的内容变化了，v-model绑定的变量会做出同步的变化 　　　　<input id="model" v-model="message"> 　　　　new Vue({ 　　　　　　el:"mod...
Atlas学习手记(Ajax.net)
fangq的专栏
05-13 731
UpdatePanel是Atlas中一个很重要的控件，功能强大且容易使用，可以使我们只做很小的改动就可以向已有的ASP.NET站点添加Ajax。采用Dflying的建议，我也是由UpdatePanel进入Atlas的世界。本文将通过可视化和代码两种方式来实现向已有的ASP.NET应用程序中添加UpdatePanel。主要内容1．UpdatePanel概述2．使用可视化方式3．使用代
VUE学习手记（三）
qiuchao323的博客
03-26 164
VUE网络应用之 axios axios ：是一个封装了ajax的网络请求库； 使用方法 导入axios的js脚本； <script src="https://unpkg.com/axios/dist/axios.min.js"></script> then方法中的回调函数会在请求成功或失败时触发，请求成功执行第一个函数，失败执行第二个函数； axios+vue 注意 他...
AJAX学习手记，网络转载,来之不易.
06-23
**AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这一技术的核心在于JavaScript，XML则通常...
Google V8学习手记，月javascript写服务器端是多少人的梦醒呀，Google v8让javascript和php一样
11-24
### Google V8 学习手记 #### 一、Google V8 整体印象 ##### 1.1 Google V8 是什么？能做什么？ Google V8 是一款高性能的 JavaScript 脚本引擎，由 Google 开发并开源。它是 Google Chrome 浏览器的重要组成部分...
网页开发手记：486个JavaScript网页特效详解_光盘源文件
07-25
8. **AJAX**：异步JavaScript和XML，用于在不刷新整个页面的情况下更新部分网页内容，提高网页响应速度。 9. **响应式设计**：根据设备的屏幕尺寸和方向调整网页布局，确保在不同设备上都有良好的显示效果。 10. *...
《专家手记AJAX开发实战》：Java实现与WebOS案例解析
对AJAX和WebOS开发有深入兴趣的读者，通过学习这本书可以了解到如何将理论与实践相结合，打造一个功能丰富的Web应用。 最后，文件列表中的6.bmp、5.bmp、7.bmp、13.bmp、3.bmp、4.bmp、10.bmp、11.bmp、15.bmp、16....
jQuery AJAX 简介
lly202406的博客
12-14 273
jQuery AJAX是一种在无需重新加载整个页面的情况下，与服务器交换数据和更新部分网页的技术。它基于JavaScript和XML，允许我们在不刷新页面的情况下，从服务器获取数据，并动态地更新页面内容。jQuery AJAX作为一种强大的Web开发技术，在提高Web应用程序交互性和用户体验方面发挥着重要作用。掌握jQuery AJAX，将有助于您更好地实现复杂的Web功能。本文对jQuery AJAX进行了简要介绍，希望对您有所帮助。
商城后台管理系统 02 添加规格参数-动态表单
weixin_52943021的博客
12-15 260
Boolean。
JavaScript 根据数组对象的某个 指定属性 分组合并，并累加金额
最新发布
zhangyao940330的博客
12-15 207
item } 浅拷贝原对象的所有属性（如 id、name），合并时仅更新金额，其他属性保留第一个分组对象的值（若需保留所有属性，可修改为数组存储，如 name: [‘苹果’, ‘香蕉’]）。分组逻辑：用 Map 存储分组，键为 groupKey 的值（如 ‘水果’），值为合并后的对象。Map 比普通对象更安全（避免键名冲突，支持数字 / 对象等类型的键）。缺失金额或非数字（如 undefined、‘abc’）视为 0。字符串金额（如 ‘8’）自动转为数字；扩展需求：保留分组内所有非金额属性。
目前流行的前端框架
zwh1zwh的博客
12-11 1220
当前前端领域的技术选型非常丰富，不同的框架和工具各有侧重。为了让你快速建立一个整体印象，下面这个表格梳理了目前最主流的几个核心框架及其关键特性。框架名称核心特点学习曲线适用场景最新动态 (2025年)​- 基于组件和虚拟DOM- 灵活的JSX语法- 丰富的生态系统中等- 大型、复杂的单页应用(SPA)- 需要高度自定义和灵活性的项目- React 19 优化并发特性和服务器组件(RSC)- 与 Next.js 深度集成​- 渐进式框架，易于集成。
TypeScript
qq_65084229的博客
12-12 240
let y :[number,string] = ['1',2] //不能将类型“string”分配给类型“number”let name:string = `我的名字${name}`enum sex {boy='男', gril='女'}// 返回never的函数必须存在无法达到的终点。// 返回never的函数必须存在无法达到的终点。let name:string ="张三"（只能赋值undefined或null）// 推断的返回值类型为never。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值