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 ...
随机推荐
- VMware 设置网络
在VMware上安装 系统完成后,设置虚拟网络 这里的VMware 版本为 14. 本文以window server 2016 为例. 在虚拟机上菜单栏中, 编辑 >> 虚拟网络编辑器 ...
- JS常用基础知识
前言:在js中dom和bom是我们操作的基本,在最初接触时候我也懵,但是后来慢慢发现其实bom就是操作浏览器,而dom就是操作文本框节点.
- 第六节：SignalR完结篇之依赖注入和分布式部署
一. SignalR中DI思想的应用 DI,即依赖注入,它是一种不负责创建其自己的依赖项对象的一种模式,通常用来降低代码之间的耦合性,广泛应用于架构设计,是必不可少的一种思想. 下面结合一个需求来说一 ...
- 第七节: EF的三种事务的应用场景和各自注意的问题(SaveChanges、DBContextTransaction、TransactionScope)
一. 什么是事务 我们通俗的理解事务就是一系列操作要么全部成功.要么全部失败(不可能存在部分成功,部分失败的情况). 举一个事务在我们日常生活中的经典例子:两张银行卡(甲.乙),甲向乙转钱,整个过程需 ...
- 定期清理WordPress的文章修订版本
当WordPress编辑或修改文章时会自动保存生成一个修订版本,默认是每分钟1次.方便恢复早先撰写的版本.不过时间一长就会产生大量的冗余数据,加重服务器负担,拖慢数据加载.当所有发布的文章都已更新到最 ...
- 原生js封装cookie获取、设置及删除
使用cookie(key,value,options) 参数key,value,options(可选) function cookie(key,value,options){ if(typeof va ...
- django drf 基础学习5
一 简介: 用户登录的验证 二 验证机制: 1 session session需要在服务端存储能够通过session_id而获取的信息,每次请求到达服务端时,需要根据session_id这个ke ...
- 51nod 1423 最大二“货” 单调栈
利用单调栈,高效求出每个区间内的最大值和次大值的亦或值. 先正向扫描,利用单调递减栈,若当前栈为空栈,则直接压入栈中,若为非空栈,弹出栈顶元素,每弹出一个元素,则求一次亦或值,保留最大值 接着进行反向 ...
- apt-get本地软件源搭建
参考:https://www.cnblogs.com/myitroad/p/4970416.html 试验机器: Ubuntu 12.04.Lubuntu.Debian都可,其他版本应该也没问题,服务 ...
- POJ 2318 TOYS (叉积+二分)
题目: Description Calculate the number of toys that land in each bin of a partitioned toy box. Mom and ...