一个简单的Ajax

最新推荐文章于 2024-07-23 11:32:13 发布
最新推荐文章于 2024-07-23 11:32:13 发布
阅读量326 收藏
点赞数
文章标签： xmlhttprequest function javascript border ajax string
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/easy_xia/article/details/4211641
版权

客户端：

  <script language="javascript">
   var xmlHttp;
   var x,y;
   function createXMLHttpRequest(){
    if(window.ActiveXObject){
        xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest){
      xmlHttp=new XMLHttpRequest();
    }
  }
  function over(index){
        x = event.clientX;
        y = event.clientY;
        createXMLHttpRequest();
        xmlHttp.onreadystatechange=processor;
        xmlHttp.open("GET","servlet/CreateTip?index="+index);
        xmlHttp.send(null);
  }
  function processor(){
      var result;
 
      if(xmlHttp.readyState == 4){
          if(xmlHttp.status == 200){
            result = xmlHttp.responseXML.getElementsByTagName("shop");
         
             document.all.tip.style.display="block";
             document.all.tip.style.top=y;
             document.all.tip.style.left=x+100;
       
            
             document.all.photo.src=result[0].childNodes[2].firstChild.nodeValue;
             document.all.tipTable.rows[1].cells[0].innerHTML="商品名称："+result[0].childNodes[0].firstChild.nodeValue;
             document.all.tipTable.rows[2].cells[0].innerHTML="商品价格："+result[0].childNodes[1].firstChild.nodeValue;
            
          }
      }
  }
  function out(){
 document.all.tip.style.display="none";
  }
  
</script>

 
  <body>
    This is my HTML page. <br>
    <h2>工具提示</h2><br>
    <br>
    <a href="servlet/CreateTip?index=1">OK let's go to the servlet</a>
    <br><br>
    <a href="#" οnmοuseοver="over(0)" οnmοuseοut="out()">商品一</a><br><br>
    <a href="#" οnmοuseοver="over(1)" οnmοuseοut="out()">商品二</a><br><br>
    <a href="#" οnmοuseοver="over(2)" οnmοuseοut="out()">商品三</a><br><br>
    <div id="tip" style="position:absolute;display:none;border:1px;border-style:solid ">
       <table id="tipTable" border="0" bgcolor="#ffffee">
          <tr align="center">
             <td><img id="photo" src="" height="80" width="80"/></td>
          </tr>
          <tr><td></td></tr>
          <tr><td></td></tr>
          <br>
       </table>
    </div>    
  </body>

服务器端：

public class CreateTip extends HttpServlet {

 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  doPost(request,response);
 }


 public void doPost(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {

  //虚拟一个商品列表
  String[][] shop ={{"商品一","90","photo/photo1.jpg"},
      {"商品二","190","photo/photo2.jpg"},
      {"商品三","290","photo/photo3.jpg"} };

  //获得客户端提交的参数
  int index =Integer.parseInt(request.getParameter("index"));


  response.setContentType("text/xml");

     //由于想当然的写成了response.setContentType("text/html");造成了很大的失误
  response.setCharacterEncoding("UTF-8");
  PrintWriter out = response.getWriter();

  //以XML文档形式返回给客户端
  out.println("<shop>");
  out.println("<name>"+shop[index][0]+"</name>");
  out.println("<price>"+shop[index][1]+"</price>");
  out.println("<photo>"+shop[index][2]+"</photo>");
  out.println("</shop>");  

  out.flush();
  out.close();
 }
}

 

easy_xia
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手写一个简易的Ajax
curacaolb的博客
09-08 1927
文章目录XMLHttpRquest能用Ajax做什么呢？一个简单的Ajax（get）请求追踪Ajax请求的当前状态注册成功回调手写一个简易的 ajax(GET请求版) XMLHttpRquest Ajax是一种技术方案，而不是一种新技术，依赖的依旧是前端三件套，最核心的依赖就是浏览器提供的XMLHttpRequest对象，可以让浏览器发出HTTP请求和接收HTTP响应。 也就是说：我们使用XMLHttpRequest对象发送一个Ajax请求。 能用Ajax做什么呢？ 发送HTTP请求得到服务端数据 是一
一个完整的ajax简单案例
热门推荐
qq_37447018的博客
04-23 2万+
ajax简单完整案例
ajax弹出提示信息
天道酬勤
01-15 1459
ajax弹出提示信息1、  输入域：h2>工具提示h2>    hr>    a href="#" onmouseover="over(0)" onmouseout="out()">物品一a>br>br>    a href="#" onmouseover="over(1)" onmouseout="out()">物品二a>br>br>    a href="#" onmo
ajax完成工具提示
linshenshijianlu的博客
08-19 372
一、toolTip.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 工具提示 //定义一个变量，用于存放XMLHttpRequest对象 var xmlHttp; //记录事件发生时的鼠标位置 var x,y; //该函数用
JS创建提示栏
aolangtb243484的博客
10-05 157
在<body>中任意处添加DIV，例如： <divid="tip" style="position:absolute;display:none;border:1px;border-style:solid;"> <TABLEid="tipTable"border="0"bgco...
手写一个ajax请求
yesir_mao的博客
06-21 5364
1.需求：手动封装一个ajax请求 2.实现如下： 2.1获取异步请求对象 // 获取异步请求对象 function getXhr(){ var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttprequest(); }else{ // 如果浏览器版本是IE8以下浏览器 xhr=new ActiveXObject('Micro...
实现一个简单的ajax请求
grand_brol的博客
08-17 1409
ajax请求写法 1、创建一ajax实例 var xhr = new XMLHttpRequest() 2、设置相应方法和请求路径 xhr.open('get', 'http://127.0.0.1:3000/ajax') 3、发送请求 xhr.send() 4、获得相应数据 xhr.onload = function() { console.log(xhr.responseText) } 注：因为发送请求时不能在第一时间拿到数据，是一个异步操作，所以需要onload
一个简单的AJAX请求
Ecloss
12-11 1493
最近在学习AJAX，写一个简单的AJAX的demo出来测试一下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;script type="text/javascr
实现一个ajax请求的简单例子
weixin_42132143的博客
04-10 2万+
效果：在前端页面的text框输入一个id，点击按钮，发送ajax请求到数据库查询对应用户数据返回，将用户信息显示在页面，实现局部刷新。 不说废话直接来！ 1.前端的jsp页面 （代码的注释写的非常详细了，直接看代码就行了，我就不再解释了） <%@ page contentType="text/html;charset=UTF-8" language="java" %> <...
Ajax的简单使用
m0_62609939的博客
04-28 1617
Ajax的简单使用
一个简单Ajax类库及使用方法实例分析
10-22
主要介绍了一个简单Ajax类库及使用方法,结合实例形式分析了ajax类库的源码与具体使用技巧,需要的朋友可以参考下
一个简单实现ajax的实例
05-25
【标题】：“一个简单实现ajax的实例” Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新。这个...
一个简单的Ajax实例
07-24
在本实例中，我们将深入探讨Ajax的基本概念、工作原理以及如何创建一个简单的Ajax请求。 Ajax的核心是JavaScript对象XMLHttpRequest，它允许我们向服务器发送异步请求，并在后台接收响应。在网页中，当用户进行某种...
AJAX简单测试代码实例
10-24
主要介绍了AJAX简单测试代码,以一个简单实例分析了Ajax的实现技巧,非常具有实用价值,需要的朋友可以参考下
一个简单的AJAX实例网页源代码.rar
08-06
AJAX（Asynchronous JavaScript and XML）是一种在无需...这个简单的AJAX实例网页源代码为我们提供了一个学习和实践的基础，通过分析源代码，我们可以更好地理解AJAX的运作机制，并将其应用于更复杂的Web应用程序中。
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
最新发布
Gusha_的博客
07-23 721
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 969
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 773
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 973
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
Ajax的一个简单例子
07-12
当然，我可以给你一个简单的 Ajax 示例。假设你有一个 HTML 页面，上面有一个按钮和一个用于显示结果的 `<div>` 元素。当点击按钮时，我们将通过 Ajax 请求获取一些数据并将其显示在 `<div>` 中。 首先，确保你在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值