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 ...
随机推荐
- VUE-开发工具VSCode
VUE-开发工具之VSCode VSCode是微软出的一款轻量级代码编辑器,免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全.Emme ...
- 第五节：WebApi的三大过滤器
一. 基本说明 1. 简介: WebApi下的过滤器和MVC下的过滤器有一些区别,首先我们要注意的是通常建WebApi项目时,会自动把MVC的程序集也引入进来,所以我们在使用WebApi下的过滤器的 ...
- [Android] Android 锁屏实现与总结 （二）
上接: [Android] Android 锁屏实现与总结 (一) 系列文章链接如下: [Android] Android 锁屏实现与总结 (一) [Android] Android 锁屏实现与总结 ...
- Elasticsearch High Level Rest Client 发起请求的过程分析
本文讨论的是JAVA High Level Rest Client向ElasticSearch6.3.2发送请求(index操作.update.delete--)的一个详细过程的理解,主要涉及到Res ...
- MVC控制器返回一个list 视图接收
控制器 public ActionResult InfoFrame() { List<Users> list = new List<Users>(); if (Session[ ...
- Contest1874 - noip基础知识五：动态规划(背包、树dp、记忆化、递推、区间、序列dp、dp优化)
传送门 T1 dp[n][m]=dp[n-1][m-1]+dp[n-m][m] T2 ans=cat(n)*(n!)2 卡特兰数 T3 dp[i][j]=sigma(dp[i-1][j-a[i ...
- JAVA进阶4
间歇性混吃等死,持续性踌躇满志系列-------------第4天 1.静态内部类求极值 class MaxMin{ public static class Result{ //表示最大值.最小值 p ...
- 002_soa_zk处理经验总结
一. 遇到这种情况直接把当前目录下的acceptedEpoch和currentEpoch挪走,重启publisher即可. cat /data/zookeeper/data/version-2/acc ...
- vue-风格指南
https://cn.vuejs.org/v2/style-guide/
- 金三银四背后，一个 Android 程序员的面试心得
回顾一下自己这段时间的经历,九月份的时候,公司通知了裁员,我匆匆忙忙地出去面了几家,但最终都没有拿到offer,我感觉今年的寒冬有点冷.到十二月份,公司开始第二波裁员,我决定主动拿赔偿走人.后续的面试 ...