ajax 三种数据格式
1.JSON（格式要正确，可以引jar包操作）
servlet代码
package com.hsp.action; import java.io.IOException;
import java.io.PrintWriter; import javax.json.JsonString;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; /**
* Servlet implementation class showCities
*/
@WebServlet("/showCities")
public class showCities extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public showCities() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/xml;charset=utf-8");
response.setHeader("Cache-Control", "no-cache"); //接收用户选择的省的名字
String shengString=request.getParameter("province");
System.out.println(shengString);
PrintWriter out=response.getWriter();
StringBuilder builder=new StringBuilder(); String info=""; // if ("zhejiang".equals(shengString)) {
// System.out.println("浙江");
// info="<province><city>杭州</city><city>温州</city><city>宁波</city></province>";
// }
// else if ("jiangsu".equals(shengString)) {
// System.out.println("江苏");
//
// info="<province><city>南京</city><city>徐州</city><city>苏州</city></province>";
// }
if ("zhejiang".equals(shengString))
{
info= "[{"+'"'+"city"+'"'+":"+'"'+"杭州"+'"'+"},{"+'"'+"city"+'"'+":"+'"'+"温州"+'"'+"}]";
}
else if ("jiangsu".equals(shengString)) {
info= "[{"+'"'+"city"+'"'+":"+'"'+"南京"+'"'+"},{"+'"'+"city"+'"'+":"+'"'+"苏州"+'"'+"}]"; }
System.out.println("{"+'"'+"ins"+'"'+":"+info+"}");
builder.append("{"+'"'+"ins"+'"'+":"+info+"}"); out.println(builder.toString());
} }
jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'Mycity.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
--> </head> <body>
<script type="text/javascript">
//1.创建ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if(window.ActiveXobject)
{
xmlHttpRequest=new ActiveXobject("Microsoft.XMLHTTP");
}
else
{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
} //新建myXmlHttpRequest对象
var myXmlHttpRequest=""; function getCities(){
//创建对象
myXmlHttpRequest=getXmlHttpObject();
// window.alert(myXmlHttpRequest);
//如果创建成功，则进行post请求
if(myXmlHttpRequest){
//创建url
var url="/ajax/showCities";//post
//携带的参数
var data="province="+$('sheng').value;
//
myXmlHttpRequest.open("post",url,true);
//必填
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回调函数
myXmlHttpRequest.onreadystatechange=chuli;
//发送请求
myXmlHttpRequest.send(data); } } function chuli(){
if(myXmlHttpRequest.readyState==4){
var mes= myXmlHttpRequest.responseText;
window.alert(mes);
var mes_obj=eval("("+mes+")");
window.alert(mes_obj);
window.alert(mes_obj.ins[0].city);
// $('myres').value=mes_obj.info; //取出xml格式数据
/* if(myXmlHttpRequest.status==200)
{
//取出服务器回送的数据
window.alert(myXmlHttpRequest.responseXML);
var cities= (myXmlHttpRequest.responseXML.getElementsByTagName("city"));
//window.alert(cities.length);
//alert(cities[1].lastChild.nodeValue);
for(var i=0;i<cities.length;i++)
{alert(cities[i].childNodes[0].nodeValue);}
} */ } } function $(id)
{
return document.getElementById(id);
} </script> This is my JSP page. <br> <select id="sheng" onchange="getCities();">
<option value="">---省---</option>
<option value="zhejiang">浙江</option>
<option value="jiangsu">江苏</option>
</select> <select id="city" onchange="sendRequest();">
<option value="">--城市--</option>
</select> <select id="country" onchange="sendRequest();">
<option value="">--县城--</option>
</select> </body>
</html>
2.xml格式
servlet代码
package com.hsp.action; import java.io.IOException;
import java.io.PrintWriter; import javax.json.JsonString;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; /**
* Servlet implementation class showCities
*/
@WebServlet("/showCities")
public class showCities extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public showCities() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/xml;charset=utf-8");
response.setHeader("Cache-Control", "no-cache"); //接收用户选择的省的名字
String shengString=request.getParameter("province");
System.out.println(shengString);
PrintWriter out=response.getWriter();
StringBuilder builder=new StringBuilder(); String info=""; if ("zhejiang".equals(shengString)) {
System.out.println("浙江");
info="<province><city>杭州</city><city>温州</city><city>宁波</city></province>";
}
else if ("jiangsu".equals(shengString)) {
System.out.println("江苏"); info="<province><city>南京</city><city>徐州</city><city>苏州</city></province>";
}
// if ("zhejiang".equals(shengString))
// {
// info= "[{"+'"'+"city"+'"'+":"+'"'+"杭州"+'"'+"},{"+'"'+"city"+'"'+":"+'"'+"温州"+'"'+"}]";
// }
// else if ("jiangsu".equals(shengString)) {
// info= "[{"+'"'+"city"+'"'+":"+'"'+"南京"+'"'+"},{"+'"'+"city"+'"'+":"+'"'+"苏州"+'"'+"}]";
//
// }
// System.out.println("{"+'"'+"ins"+'"'+":"+info+"}");
// builder.append("{"+'"'+"ins"+'"'+":"+info+"}");
builder.append(info);
out.println(builder.toString());
} }
jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'Mycity.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
--> </head> <body>
<script type="text/javascript">
//1.创建ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if(window.ActiveXobject)
{
xmlHttpRequest=new ActiveXobject("Microsoft.XMLHTTP");
}
else
{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
} //新建myXmlHttpRequest对象
var myXmlHttpRequest=""; function getCities(){
//创建对象
myXmlHttpRequest=getXmlHttpObject();
// window.alert(myXmlHttpRequest);
//如果创建成功，则进行post请求
if(myXmlHttpRequest){
//创建url
var url="/ajax/showCities";//post
//携带的参数
var data="province="+$('sheng').value;
//
myXmlHttpRequest.open("post",url,true);
//必填
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回调函数
myXmlHttpRequest.onreadystatechange=chuli;
//发送请求
myXmlHttpRequest.send(data); } } function chuli(){
if(myXmlHttpRequest.readyState==4){
// var mes= myXmlHttpRequest.responseText;
/* window.alert(mes);
var mes_obj=eval("("+mes+")");
window.alert(mes_obj);
window.alert(mes_obj.ins[0].city); */
// $('myres').value=mes_obj.info; //取出xml格式数据
if(myXmlHttpRequest.status==200)
{
//取出服务器回送的数据
window.alert(myXmlHttpRequest.responseXML);
var cities= (myXmlHttpRequest.responseXML.getElementsByTagName("city"));
//window.alert(cities.length);
//alert(cities[1].lastChild.nodeValue);
for(var i=0;i<cities.length;i++)
{alert(cities[i].childNodes[0].nodeValue);}
} } } function $(id)
{
return document.getElementById(id);
} </script> This is my JSP page. <br> <select id="sheng" onchange="getCities();">
<option value="">---省---</option>
<option value="zhejiang">浙江</option>
<option value="jiangsu">江苏</option>
</select> <select id="city" onchange="sendRequest();">
<option value="">--城市--</option>
</select> <select id="country" onchange="sendRequest();">
<option value="">--县城--</option>
</select> </body>
</html>
3.text格式
servlet 格式
package com.hsp.action; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; /**
* Servlet implementation class registerServlet
*/
@WebServlet("/registerServlet")
public class registerServlet extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public registerServlet() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub //接受数据
//String username=request.getParameter("username");
//System.out.println(username);
String infoString="";
if ("shunping".equals("")) {
infoString="用户名不可用";
}
else {
infoString="用户名可用"; }
//返回文本数据
// response.setContentType("text/;charset=utf-8");
//返回xml格式文件
response.setContentType("text/xml;charset=utf-8"); response.setHeader("Cache-Control", "no-cache"); //返回xml 格式数据
PrintWriter out=response.getWriter();
StringBuilder builder=new StringBuilder();
// builder.append("<message>");
// builder.append(infoString).append("</message>"); // builder.append( "{"+'"'+"info"+'"'+":" ).append('"'+infoString+'"'+"}");
builder.append(infoString);
out.println(builder.toString()); //返回text格式数据
// ServletOutputStream outputStream = response.getOutputStream();
// outputStream.write(infoString.getBytes("utf-8"));
// //outputStream.write(pwd.getBytes("utf-8"));
// outputStream.flush();
// outputStream.close();
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} }
jsp格式
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head> <body>
<script type="text/javascript"> //创建ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if(window.ActiveXobject)
{
xmlHttpRequest=new ActiveXobject("Microsoft.XMLHTTP");
}
else
{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
} var myXmlHttpRequest=null;
//验证用户名是否存在
function checkName()
{ myXmlHttpRequest=getXmlHttpObject(); // window.alert(myXmlHttpRequest); if(myXmlHttpRequest ){
// window.alert("创建成功");
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//1.第一个参数表示请求的方式，"get"/"post"
//2.第二个参数指定url,对哪个页面发出ajax请求（本质仍然是http请求）
//3.第三个参数 true表示使用异步机制，如果false，表示不使用异步
var url="/ajax/registerServlet?mytime="+new Date()+"&username="+$("username").value
//打开请求
myXmlHttpRequest.open("post",url,true);
//window.alert(url);
//指定回调函数,chuli 是函数名
myXmlHttpRequest.onreadystatechange=chuli;
//真的发送函数,如果是get请求，则填入null即可
//如果是post请求，则填入实际的数据
myXmlHttpRequest.send(null); } } //回调函数
function chuli(){
//window.alert("处理函数被调用"+myXmlHttpRequest.readyState);
//取出从serlet返回的数据
if(myXmlHttpRequest.readyState==4)
{
//取出值，文本格式
//window.alert("服务器返回"+myXmlHttpRequest.responseText)
//
//window.alert( "xml:"+myXmlHttpRequest.responseXML);
//获取message节点
// var mes=myXmlHttpRequest.responseXML.getElementsByTagName("message");
//window.alert(mes.length);
//取出message节点
//es[0]-->表示取出第一个message节点
//childNodes[0]表示message节点的第一个子节点
// var mes_val=mes[0].childNodes[0].nodeValue;
//window.alert(mes_val);
// ${'myres'}.value= mes_val;
//$('myres').value=myXmlHttpRequest.responseText;
/* var mes= myXmlHttpRequest.responseText;
window.alert(mes);
var mes_obj=eval("("+mes+")");
//window.alert(mes_obj.info);
$('myres').value=mes_obj.info;
*/
var mes= myXmlHttpRequest.responseText; $('myres').value=mes; }
} function $(id)
{
return document.getElementById(id);
} </script> This is my JSP page. <br>
<form action="???" method="post"> 用户名：<input type="text"name="username1" onkeyup="checkName();" id="username">
<input type="button" onclick="checkName();" value="验证用户名">
<input style="border-width: 0;color: red" type="text" id="myres"><br>
用户密码：<input type="password" name="password"><br>
电子邮件:<input type="text" name="email"><br>
<input type="submit" value="用户注册">
</form> </body>
</html>
ajax 三种数据格式的更多相关文章
- Ajax——三种数据传输格式
一.HTML HTML由一些普通文本组成.如果服务器通过XMLHTTPRequest发送HTML,文本将存储在responseText属性中. 从服务器端发送的HTML的代码在浏览器端不需要用Java ...
- AJAX三种返回值方式
(一)TEXT方式 该方式返回的是拼接字符串,想要取到其中的值,需要先将返回值进行拆分 (二)JSON方式 该方式返回的是数组,想要取到其中的值,可用索引项进行提取 (三)XML方式 XML:可扩展标 ...
- [jquery-ajax] jquery ajax 三种情况对比
<button class="btn1">async:false</button> <button class="btn2"> ...
- json，xml，html三种数据格式
json.xml.html xml解析如下: 1.DOM:基于XML文档树结构的解析 解析器读入整个文档,然后构建一个驻留内存的树结构,然后代码就可以使用 DOM 接口来操作这个树结构.优点:整个文档 ...
- 2019年6月14日 Web框架之Django_07 进阶操作（MTV与MVC、多对多表三种创建方式、前后端传输数据编码格式contentType、ajax、自定义分页器）
摘要 MTV与MVC 多对多表三种创建方式 ajax ,前后端传输数据编码格式contentType 批量插入数据和自定义分页器 一.MVC与MTV MVC(Model View Controller ...
- AJAX实现跨域的三种方法
由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问. 比如说你的网站域名是aaa.com,想要通过AJAX请 ...
- Ajax的三种实现及JSON解析
本文为学习笔记,属新手文章,欢迎指教!! 本文主要是比较三种实现Ajax的方式,为以后的学习开个头. 准备: 1. prototype.js 2. jquery1.3.2.min.js 3. j ...
- 上传文件的三种方式xhr,ajax和iframe及上传预览
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- MVC异步AJAX的三种方法（JQuery的Get方法、JQuery的Post方法和微软自带的异步方法）
异步是我们在网站开发过程中必不可少的方法,MVC框架的异步方法也有很多,这里介绍三种方法: 一.JQuery的Get方法 view @{ Layout = null; } <!DOCTYPE h ...
随机推荐
- 金融量化分析【day112】：量化交易策略基本框架
摘要 策略编写的基本框架及其实现 回测的含义及其实现 初步学习解决代码错误 周期循环的开始时间 自测与自学 通过前文对量化交易有了一个基本认识之后,我们开始学习做量化交易.毕竟就像学游泳,有些东西讲是 ...
- ZooKeeper-客户端命令 zkCli
执行 bin/zkCli 文件进入客户端 查看帮助 help ZooKeeper -server host:port cmd args stat path [watch] set path data ...
- LCA(Tarjan)
时间复杂度:dfs为O(N),dfs过程中处理所有查询对为O(M),总时间复杂度O(N+M) #include<iostream> #include<cstdio> using ...
- CSS 书写规范
class 类名的命名应该以功能为依据: 例如: .btn-danger; .btn-warning CSS组件 一个组件==一个独立的功能模块 针对一个组件,通过功能描述样式 组件命名,功能描 ...
- css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- SpringBoot系列: Pebble模板引擎
===============================Java 模板引擎选择===============================SpringBoot Starter项目向导中可选的J ...
- [物理学与PDEs]第3章习题7 快、慢及Alfv\'en 特征速度的比较
证明: 当 $H_1\neq 0$ 及 $H_2^2+H_3^2\neq 0$ 时, 快.慢及 Alfv\'en 特征速度 $C_f$, $C_s$ 及 $C_a$ 满足 $$\bex 0<C_ ...
- scheduling while atomic 出现的错误
产生这种情况的原因: 1.当中断发生时,出现了调度做法, 2.另一个是spin_lock 里调用sleep, 让出调度, 另外线程又进行spin_lock, 导致死锁. 相关问题的链接 1.为 ...
- BIO 和 NIO
一.阻塞(Block)和非阻塞(NonBlock) 阻塞和非阻塞是进程在访问数据的时候,数据是否准备就绪的一种处理方式,当数据没有准备的时候阻塞: 阻塞:往往需要等待缞冲区中的数据准备好过后才处理其他 ...
- 微信小程序 Button控件 点击传值给JavaScript
直接看例子吧: WXML:直接看Button,用“data-”(data-total)传值,后台如何获取,继续看下面JS代码. <view class="infothird" ...