Ajax可以处理以下三种从Servlet返回的数据类型,分别是:Text,XML 以及JSON。下面来介绍如何用Servlet来生成以上的集中返回的数据类型,以及在前段如何用Ajax处理返回的数据。
本文以股票查询网页为例子。前段以股票代码为参数传送到服务器端,服务器端从yahoo下载关于该股票信息的cvs文件,分析该文件,并返回该股票的具体信息。
Text
Servlet,服务器端:
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException{ String symbol= request.getParameter("symbol"); String csvString; URL url=null; URLConnection urlConnection =null; InputStreamReader inputReader =null; BufferedReader bufferedReader = null; if(symbol!=null ||symbol!="") { try{ url = new URL("http://finance.yahoo.com/d/quotes.csv?s=" + symbol + "&f=e1nl1hg"); urlConnection= url.openConnection(); inputReader = new InputStreamReader(urlConnection.getInputStream()); bufferedReader = new BufferedReader(inputReader); //get the quote as a csv string csvString = bufferedReader.readLine(); //parser StringTokenizer tokenizer = new StringTokenizer(csvString,","); String error = tokenizer.nextToken(); String name = tokenizer.nextToken(); String price = tokenizer.nextToken(); String high = tokenizer.nextToken(); String low = tokenizer.nextToken(); if(error.trim().equals("\"N/A\"")){; PrintWriter out = response.getWriter(); out.println(price); out.flush(); } else { System.out.println(symbol); System.out.println("Error symbol"+error); } }catch(MalformedURLException e){ System.out.println("URL is not well formed"); }catch (IOException e) { System.out.println("Can not open csv file"); }finally{ inputReader.close(); bufferedReader.close(); } } }
Ajax前段代码:
//an XMLHTTPRequest var xhr = null; /* * void quote() * get a quote */ function quote(){ try{ xhr = new XMLHTTPRequest(); } catch(e) { xhr= new ActiveXObject("Microsoft.XMLHTTP"); } if(xhr==null){ alert("Ajax not support by your browser"); return; } var symbol = document.getElementById("symbol").value; if(symbol==null||symbol==""){ alert("Symbol can not be empty"); return; } var url="../quote?symbol="+symbol; xhr.onreadystatechange =handler; xhr.open("GET",url,true); xhr.send(null); } function handler(){ if(xhr.readyState==4){ if(xhr.status==200){ document.getElementById("price").innerHTML = xhr.responseText; } else alert("Error with Ajax call! Code:"+xhr.status); } }
XML:
Servlet后端代码:
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException{ //get csv file and tokenize the csv string ... ... //the same with the first part if(error.trim().equals("\"N/A\"")){ out.println("<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>"); out.println("<quote>"); out.println("<name>"+name+"</name>"); out.println("<price>"+price+"</price>"); out.println("<high>"+high+"</high>"); out.println("<low>"+low+"</low>"); out.println("</quote>"); out.flush(); } else { System.out.println(symbol); System.out.println("Error symbol"+error); } }catch(MalformedURLException e){ System.out.println("URL is not well formed"); }catch (IOException e) { System.out.println("Can not open csv file"); }finally{ inputReader.close(); bufferedReader.close(); } } }
Ajax前段代码:
function handler(){ if(xhr.readyState==4){ if(xhr.status==200){ var xmlDoc=xhr.responseXML.documentElement; document.getElementById("name").innerHTML = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue; document.getElementById("price").innerHTML = xmlDoc.getElementsByTagName("price")[0].childNodes[0].nodeValue; document.getElementById("high").innerHTML = xmlDoc.getElementsByTagName("high")[0].childNodes[0].nodeValue; document.getElementById("low").innerHTML = xmlDoc.getElementsByTagName("low")[0].childNodes[0].nodeValue; }else{ alert("Error with Ajax call! Code:"+xhr.status); } } }
JSON
Servlet后端代码:
@Override public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException{ //define variables ... ... //same with 1. part //this is important response.setContentType("application/json;charset=UTF-8"); if(symbol!=null ||symbol!="") { try{ //get csv file and tokenize csv String if(error.trim().equals("\"N/A\"")){ JSONObject jObject = new JSONObject(); jObject.put("name", name); jObject.put("price", price); jObject.put("high", high); jObject.put("low", low); out.print(jObject); out.flush(); } else { System.out.println(symbol); System.out.println("Error symbol"+error); } }catch(MalformedURLException e){ System.out.println("URL is not well formed"); }catch (IOException e) { System.out.println("Can not open csv file"); }finally{ inputReader.close(); bufferedReader.close(); } } }
Ajax前段代码:
function handler(){ if(xhr.readyState==4){ if(xhr.status==200){ var quote = eval("("+xhr.responseText+")"); document.getElementById("code").value=xhr.responseText; var div= document.createElement("div"); var text =document.createTextNode("price:"+quote.price); div.appendChild(text); document.getElementById("quote").appendChild(div); } else alert("Error with Ajax call! Code:"+xhr.status); } }
注:关于yahoo股票中关于 参数f=e1nl1hg的值的含义,见 http://www.gummy-stuff.org/Yahoo-data.htm
相关推荐
在IT行业中,Ajax(Asynchronous JavaScript and XML)技术是一种用于创建快速、动态网页的重要方法,它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。结合JSON(JavaScript Object ...
6. **AJAX请求处理**:在Servlet中,通过HttpServletRequest对象获取请求参数,使用HttpServletResponse对象设置响应内容,如设置状态码、内容类型和实际的响应数据。 7. **异步处理**:Ajax的优势在于异步处理,...
在源码中,你可能会看到如何设置请求类型(GET或POST)、URL、数据类型(如JSON)以及成功和错误回调函数。 2. **AJAX与Servlet通信**:Servlet是Java Web开发中的一个核心组件,常用于处理HTTP请求和响应。在这个...
### servlet与Ajax、jQuery的对比 #### 一、Servlet概览 ...- **三者结合**:Servlet作为后端逻辑处理中心,Ajax作为前端与后端之间数据交换的桥梁,而jQuery则简化了前端开发,共同构建出高效的Web应用。
在"运用Ajax实现无跳转的数据交换"这个课程作业中,你需要使用JavaScript与Servlet来实现在网页不刷新的情况下,与服务器进行数据交互。这个过程中,JavaScript主要负责客户端的处理,而Servlet则作为服务器端的组件...
- 在 `success` 回调函数中,根据响应数据类型解析数据。对于 "text" 类型,直接显示在页面上;对于 "xml" 类型,使用 `getElementsByTagName` 和 `childNodes` 获取节点值。 7. **示例中的实现**: - 使用 `...
通过使用Ajax,我们可以异步地与服务器进行通信,即在后台不打扰用户的情况下获取和更新数据,提升网页的交互性和响应速度。 实现Servlet的自动刷新功能通常涉及以下几个步骤: 1. **创建Servlet**:首先,你需要...
压缩包文件"Ajax_Servlet"可能包含了与服务器端处理Ajax请求相关的Java Servlet代码,例如处理接收到的请求,解析数据,并返回响应。这部分通常涉及到Servlet的doGet()或doPost()方法,以及可能的数据序列化和反序列...
综上所述,AjaxDemo_javabean项目提供了一个关于如何使用Ajax进行数据提取和更新的实例,涉及到前端的JavaScript与后端的Servlet和JavaBean的协作,展示了Web开发中一种常见的数据交互方式。通过深入理解和实践这个...
这个“一个简单的JSP+Servlet图片上传例子”是一个基础教程,旨在帮助初学者理解如何通过这两种技术实现用户界面与服务器端的交互,特别是处理文件上传的功能。 首先,JSP是Java的一种视图技术,它允许开发者在HTML...
3. **AJAX请求**:在$.ajax()函数中,我们需要指定URL(通常是servlet的地址)、请求类型(GET或POST)、数据(如果需要向服务器发送数据的话)、成功回调函数(处理服务器返回的数据)以及错误处理函数。...
在现代Web开发中,异步JavaScript和XML(Ajax)是一种非常流行的技术,用于在不重新加载页面的情况下与服务器交换数据,并更新部分网页内容。这种技术为用户提供了更加流畅的浏览体验,并且大大提高了Web应用的性能...
xhr.open('POST', 'AjaxServlet', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200)...
这是一个基于Java Web技术的学生信息管理系统,实现了前后端分离的架构,使用了MySQL数据库来存储数据,Servlet作为服务器端处理逻辑,以及JSON和AJAX技术来实现实时的异步通信。下面将详细介绍这个系统的关键技术和...
AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下更新部分网页内容的技术。在"AJAX流程介绍动态显示后台数据"这个主题中,我们将深入探讨如何使用AJAX来实现后台数据的动态显示,从而...
2. `UploadServlet.java`:这个Servlet可能是处理文件上传的,接收AJAX请求,处理文件并更新用户头像信息。 3. `Ajax.js`:这是一个JavaScript文件,实现了AJAX请求的逻辑,向服务器发送文件并处理返回的结果。 4. ...
学习这个示例,初学者可以了解Ajax如何与JSP和Servlet配合,实现客户端与服务器之间的数据通信,以及如何通过JavaScript处理返回的数据,动态更新页面。这对于构建交互性更强、用户体验更好的Web应用至关重要。
3. **js基础教程.chm**:JavaScript的基础教程,可能包含了变量、数据类型、函数、对象等基础知识,适合初学者入门。 4. **Freemarker教程+中文版.pdf**:这是一本关于FreeMarker的中文教程,涵盖了FreeMarker的使用...
例如,index.jsp中的JavaScript会监听表单提交事件,通过XMLHttpRequest对象发送数据到ajaxServlet,后端处理请求后,将结果返回给前端,前端再更新页面显示结果,所有这些操作都不会导致整个页面的刷新。...
处理完成后,Servlet可能会重定向用户到另一个JSP页面显示结果,或者直接在原页面上更新内容(这通常通过Ajax实现,以提供更好的用户体验)。 **数据库设计** BBS系统的数据库设计通常包括用户表(存储用户名、密码...