本文主要介绍了Ajax的基础知识，包括异步与同步的区别，Ajax的应用场景及优缺点。详细讲解了Ajax发送异步请求的四步操作，并通过五个实例演示了从简单的HelloWorld到复杂的省市联动。同时提到了JSON和XML在数据交互中的角色，以及XStream工具在JavaBean到XML转换中的应用。
Ajax快速入门
1.ajax简介（异步与同步）
-
ajax是什么？
asynchronous javascript and xml 异步的js和xml
-
能使用js访问服务器，并且是异步访问
-
服务器给客户端的响应一般是整个页面，一个html完整页面。但在ajax中因为是局部解析，所以服务器就不用再响应整个页面，而只是数据
返回数据的格式：
- text：纯文本
- xml：
- json：js提供的数据交互格式，在ajax中最受欢迎
-
-
异步交互和同步交互
- 同步：
- 发一个请求，就要等待服务器响应结束，然后才能发第二个请求
- 刷新的是整个页面
- 异步：
- 发一个请求后，无需等待服务器的响应，然后就可以发第二个请求
- 可以使用js接收服务器的响应，然后使用js来局部解析
- 同步：
2.ajax的应用场景和优缺点
- ajax应用场景：
- 百度搜索框
- 用户注册时（校验用户名是否被注册过）
- ajax的优缺点
- 优点：
- 异步交互：增强了用户的体验
- 性能：因为服务器无需再响应整个页面，只需要响应部分内容，所以服务器的压力减轻了
- 缺点：
- ajax不能应用在所有场景
- ajax无端的增多了对服务器的访问次数，给服务器带来了压力
- 优点：
3.ajax发送异步请求（四步操作）
-
第一步（得到XMLHttpRequest）
-
ajax其实只需要学习一个对象：XMLHttpRequest
-
得到XMLHttpRequest：
- 大多数浏览器都支持：
var xmlHttp = new XMLHttpRequest(); - IE6.0：
var xmlHttp = new ActiveXObject("Msxml2.XMLHttp"); - IE5.5:
var xmlHttp = new ActiveXObject("Microsoft.XMLHttp"); - 通常写一个函数，列出三种情况，完成创建
- 大多数浏览器都支持：
-
编写创建XMLHttpRequest对象的函数
function createXMLHttpRequest() { try { return new XMLHttpRequest(); } catch(e) { try { return new ActiveXObject("Msxml2.XMLHttp"); } catch(e) { try { return new ActiveXObject("Microsoft.XMLHttp"); } catch(e) { alert("哥们儿，您用的什么浏览器啊?"); throw e; } } } }
-
-
第二步（打开与服务的连接）
xmlHttp.open()：用来打开与服务器的连接，它需要三个参数：- 请求方式：可以是GET或POST
- 请求的URL：制定服务器端资源
- 请求是否为异步：ture表示发送异步请求，否则为同步请求
-
第三步（发送请求）
xmlHttp.send(null)：- 必须给参数，如果不给可能会造成部分浏览器无法发送
- 参数：就是请求的内容。如果是GET请求，必须给出null
-
第四步（）
-
在xmlHttp对象的一个事件上注册监听器：onreadystatechange
-
xmlHttp对象共有五个状态：
0：初始化未完成状态，只是创建了XMLHTTPRequest对象，还未调用open方法
1：请求已开始，open()方法已调用，但还没调用send()方法
2：请求发送完成状态，send()方法已调用
3：开始读取服务器响应，但不表示响应结束了
4：读取服务器响应结束（通常我们只关心这个状态）
-
得到xmlHttp对象的状态
var state = xmlHttp.readyState;
-
服务器响应的状态码
- 404：Not Found
- 500：Server Error
- 304：Not Modified
-
得到服务器响应的状态码
var status = xmlHttp.status;
-
得到服务器响应的内容
var content = xmlHttp.responseText;：得到服务器的响应的文本格式的内容var content = xmlHttp.responseXML;：得到服务器的响应的xml的内容，是document对象
-
xmlHttp.onreadystatechange = function() //xmlHttp的5种状态都会调用本方法
{
if(xmlHttp.readystate ==4 && xmlHttp.status == 200)
//双重判断是否为4状态，而且还有判断是否为200
{
//获取服务器的响应内容
var text = xmlHttp.responseText;
}
}
4.ajax第一例：helloworld
public class Aservlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException
{
System.out.println("Hello Ajax!");
response.getWriter().print("Hello Ajax!!!");
}
}
<!DOCTYPE HTML PUBLIC "…//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'ajax1.jsp'</title>
<script type="text/javascript">
function createXMLHttpRequset()
{
try
{
return new XMLHttpRequest();
}
catch (e)
{
try
{
return new ActiveXObject("Msxml2.XMLHttp");
}
catch (e)
{
try
{
return new ActiveXObject("Microsoft.XMLHttp");
}
catch (e)
{
alert("匹配不到浏览器");
throw e;
}
}
}
}
window.onload = function () //文档加载完成后执行
{
var btn = document.getElementById("btn");
btn.onclick = function () //给按钮的点击事件设置监听
{
//ajax四步操作，得到服务器的响应，把响应结果显示到h1中
var xmlHttp = createXMLHttpRequset();
xmlHttp.open("GET",
"cn/itcast/web/servlet/Aservlet.java",true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function ()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
var text = xmlHttp.responseText;
var h1 = document.getElementById("h1");
h1.innerHTML = text;
}
};
};
};
</script>
</head>
<body>
<button id="btn">click here</button>
<h1 id="h1">btn</h1>
</body>
</html>
5.ajax第二例：发送POST请求
POST请求有Content-Type:application/x-www-form-urlencoded
- open：
open("POST",……); - 添加一步，设置Content-Type请求头：
- xmlHttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
- send：
xmlHttp.send("username=zhangsan&password=123")； //发送请求时指定请求体 - 如果发送请求时需要带有参数，一般都用POST请求
public class Aservlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException
{
response.setContentType("text/html;character=utf-8");
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
System.out.println("(POST)Hello Ajax!" + username);
response.getWriter().print("(POST)Hello Ajax!!!" + username);
}
}
<!DOCTYPE HTML PUBLIC "…//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'ajax1.jsp'</title>
<script type="text/javascript">
function createXMLHttpRequset()
{
try
{
return new XMLHttpRequest();
}
catch (e)
{
try
{
return new ActiveXObject("Msxml2.XMLHttp");
}
catch (e)
{
try
{
return new ActiveXObject("Microsoft.XMLHttp");
}
catch (e)
{
alert("匹配不到浏览器");
throw e;
}
}
}
}
window.onload = function () //文档加载完成后执行
{
var btn = document.getElementById("btn");
btn.onclick = function () //给按钮的点击事件设置监听
{
//ajax四步操作，得到服务器的响应，把响应结果显示到h1中
var xmlHttp = createXMLHttpRequset();
xmlHttp.open("POST",
"cn/itcast/web/servlet/Aservlet.java",true);
xmlHttp.SetRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp.send("username=zhangsan&password=123");
xmlHttp.onreadystatechange = function ()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
var text = xmlHttp.responseText;
var h1 = document.getElementById("h1");
h1.innerHTML = text;
}
};
};
};
</script>
</head>
<body>
<button id="btn">click here</button>
<h1 id="h1">btn</h1>
</body>
</html>
6.ajax第三例：用户名是否已被注册
- 编写页面
- register.jsp
- 输出注册表单页面
- 给用户名文本框添加onblur事件的监听
- 获取文本框的内容，通过ajax四步发送给服务器，得到响应结果
- 如果为1：在文本框后显示“用户名已被注册”
- 如果为0：什么都不做
- register.jsp
- 编写servlet
- ValidateUsernameServlet
- 获取客户端传递的用户名参数
- 判断是否为itcast
- 是，返回1
- 否，返回0
- ValidateUsernameServlet
public class ValidateUsernameServlet extends HttpServlet
{
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
if(username.equalsIgnoreCase("itcast"))
{
response.getWriter().print(1);
}
else
{
response.getWriter().print(0);
}
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>register</title>
<script type="text/javascript">
function createXMLHttpRequset()
{
try
{
return new XMLHttpRequest();
}
catch (e)
{
try
{
return new ActiveXObject("Msxml2.XMLHttp");
}
catch (e)
{
try
{
return new ActiveXObject("Microsoft.XMLHttp");
}
catch (e)
{
alert("匹配不到浏览器");
throw e;
}
}
}
}
window.onload = function ()
{
//获取文本框，给他的失去焦点事件注册监听
var userEle = document.getElementById("usernameEle");
userEle.onblur = function ()
{
var xmlHttp = createXMLHttpRequset();
xmlHttp.open("POST","<c:url value='/ValidateUsernameServlet'/>",true);
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp.send("username" + userEle.value);
xmlHttp.onreadystatechange = function ()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
//获取服务器响应
var text = xmlHttp.resopnseText;
var span = document.getElementById("errorSpan");
if(text == 1)
{
//得到span元素
span.innerText = "用户名已被注册";
}
else
{
span.innerText = "";
}
}
};
};
};
</script>
</head>
<body>
<h1>演示用户名是否被注册</h1>
<form action="" method="post">
用户名：<input type="text" name="username" id="usernameEle"/>
<span id=""errorSpan></span>
密码：<input type="password" name="password"><br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>
7.ajax第四例：响应内容为xml
- 服务器端
- 设置响应头：ContentType，其值为：text/xml；charset=utf-8
- 客户端
var doc = xmlHttp.responseXML; //得到document对象
- 判断浏览器：
window.addEventListener- true：火狐
- false：IE
public class Bservlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
String xml = "<students>" +
"<student number='ITCAST_1001'>" +
"<name>zhangsan</name>" +
"<age>18</age>" +
"<sex>male</sex>" +
"</student>" +
"</students>";
response.setContentType("text/xml;charset=utf-8");
response.getWriter().print(xml);
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>xml演示</title>
<script type="text/javascript">
function createXMLHttpRequset()
{
try
{
return new XMLHttpRequest();
}
catch (e)
{
try
{
return new ActiveXObject("Msxml2.XMLHttp");
}
catch (e)
{
try
{
return new ActiveXObject("Microsoft.XMLHttp");
}
catch (e)
{
alert("匹配不到浏览器");
throw e;
}
}
}
}
window.onload = function () //文档加载完成后执行
{
var btn = document.getElementById("btn");
btn.onclick = function () //给按钮的点击事件设置监听
{
//ajax四步操作，得到服务器的响应，把响应结果显示到h1中
var xmlHttp = createXMLHttpRequset();
xmlHttp.open("GET","cn/itcast/web/servlet/Bservlet.java",true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function ()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
//获取服务器的响应结果xml
var text = xmlHttp.responseXML;
//查询文档下名为student的所有元素，得到数组，再取下标为0元素
var ele = doc.getElementsByTagName("student")[0];
var number = ele.getAttribute("number");
var name;
var age;
var sex;
if(window.addEventListener()) //处理浏览器差异
{ //火狐支持
name = ele.getElementsByTagName("name")[0].textContent;
age = ele.getElementsByTagName("age")[0].textContent;
sex = ele.getElementsByTagName("sex")[0].textContent;
}
else
{ //IE文件
var name = ele.getElementsByTagName("name")[0].text;
var age = ele.getElementsByTagName("age")[0].text;
var sex = ele.getElementsByTagName("sex")[0].text;
}
var text = number + "," + name + "," + age + "," + sex;
document.getElementById("h1").innerHTML = text;
}
};
};
};
</script>
</head>
<body>
<button id="btn">click here</button>
<h1 id="h1">btn</h1>
</body>
</html>
8.ajax第五例：省市联动
-
页面
<select name = "province"> <option>***请选择省份***</option> </select> <select name="city"> <option>***请选择城市***</option> </select> -
ProvinceServle
- 当页面加载完毕后马上请求这个Servlet
- 它需要加载China.xml文件，把所有的省的名称用字符串发送给客户端
- 当页面加载完毕后马上请求这个Servlet
-
页面的工作
- 获取这个字符串，使用逗号分隔，得到数组
- 循环遍历每个字符串（省份的名称），使用每个字符串创建一个< option >元素添加到< select name=“province” >这个元素中
-
CityServlet
- 当页面选择某个省时，发送请求
- 得到省份名称，加载China.xml文件，查询出该省份对应的对象，把这个元素转换成xml字符串，发送给客户端
-
页面的工作
- 把< select name=“city” >中的所有子元素遍历，但不要删除< option > 请选择城市< /option >
- 得到服务器的响应结果：doc
- 获取所有的< city > 子元素，遍历循环，得到< city > 的内容
- 使用每个< city >的内容，创建一个< option >元素，添加到< select name=“city” >上
@WebServlet(name = "ProvinceServlet")
public class ProvinceServlet extends HttpServlet
{
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
//响应所有省份名称，使用逗号分隔
response.setContentType("text/html;charset=utf-8");
try
{
//得到document
SAXReader saxReader = new SAXReader();
InputStream input = this.getClass().getResourceAsStream("/china.xml");
Document document = saxReader.read(input);
//查询所有province的name属性，得到唯一属性对象，循环遍历，把所有属性值连成一个字符串，发送给客户端
List<Attribute> arrList = document.selectNodes("//province/@name");
StringBuilder ab = new StringBuilder();
for(int i = 0 ; i < arrList.size() ; i ++)
{
ab.append(arrList.get(i).getValue());
if(i < arrList.size() - 1)
{
ab.append(",");
}
}
response.getWriter().print(ab);
}
catch (DocumentException e)
{
e.printStackTrace();
}
}
}
@WebServlet(name = "CityServlet")
public class CityServlet extends HttpServlet
{
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8"); //注意发送xml时这里要修改
//获取省份名称，加载该省对应的<province>元素，把元素转换成字符串发送给客户端
try
{
//得到document
SAXReader saxReader = new SAXReader();
InputStream input = this.getClass().getResourceAsStream("/china.xml");
Document document = saxReader.read(input);
String pname = request.getParameter("pname"); //获取省份名称
Element proEle = (Element) document.selectSingleNode
("//province[@name='"+ pname + "']");
String xmlStr = proEle.asXML(); //把元素转换成字符串
response.getWriter().print(xmlStr);
}
catch (DocumentException e)
{
e.printStackTrace();
}
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>省市联动</title>
<script type="text/javascript">
/**
* 1.在文档加载完毕时，发出请求得到所有省份名称，显示在<select name="province"/>中
* 2.在选择了新的省份时，发送请求（参数为省名称），得到xml文档，即<province>元素。
* 解析xml文档，得到其中所有的<city>元素，再得到每个<city>元素的内容，即市名，使用市名生成
<option>，插入到<select name="city"/>元素中
*/
function createXMLHttpRequset()
{
try
{
return new XMLHttpRequest();
}
catch (e)
{
try
{
return new ActiveXObject("Msxml2.XMLHttp");
}
catch (e)
{
try
{
return new ActiveXObject("Microsoft.XMLHttp");
}
catch (e)
{
alert("匹配不到浏览器");
throw e;
}
}
}
}
window.onload = function ()
{
//ajax四步
var xmlHttp = createXMLHttpRequset();
xmlHttp.open("GET","<c:url value="/ProvinceServlet">",true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
//获取服务器的响应
var text = xmlHttp.responseText;
var arr = text.split(",");
for(var i = 0 ; i < arr.length ; i++)
{
var op = document.createElement("option");
op.value = arr[i]; //设置op的实际值为当前的省份名称
var textNode = document.createTextNode(arr[i]); //创建文本节点
op.appendChild(textNode); //把文本子节点添加到op元素中，指定其显示值
document.getElementById("p").appendChild(op);
}
}
};
};
/**
* 给<select name="province">添加改变监听
* 使用选择省份的名称CityServlet得到<province>元素（xmml元素）！
* 获取<province>元素中所有的<city>元素，遍历之！获取每个<city>的文本内容，即市名称
* 使用每个市名称创建<option>元素添加到<select name="city">
*/
var proSelect = document.getElementById("p");
proSelect.onchange = function ()
{
var xmlHttp = createXMLHttpRequset();
xmlHttp.open("POST","<c:url value="/CityServlet">",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("pname"+proSelect.value); //把下拉列表中选择的值发送给服务器
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
var citySelect = document.getElementById("c");
var optionEleList = citySelect.getElementsByTagName("option");
while(optionEleList.length > 1 )
{
citySelect.removeChild(optionEleList[1]);
}
var doc = xmlHttp.responseXML;
//得到所有名为city的元素
var cityEleList = doc.getElementsByTagName("city");
//循环遍历每个city元素，得到每个city元素
for(var i = 0 ; i < cityEleList.length ; i ++)
{
var cityEle = cityEleList[i];
var cityName;
//获取市名称
if(window.addEventListener())
{
cityName = cityEle.textContent;
}
else
{
cityName = cityEle.text;
}
var op = document.createElement("option");
op.value = cityName;
var textNode = document.createTextNode(cityName);
op.appendChild(textNode);
citySelect.appendChild(op);
}
}
}
}
</script>
</head>
<body>
<h1>省市联动</h1>
<select name="province" id="p">
<option>***请选择省***</option>
</select>
<select name="city" id="c">
<option>***请选择市***</option>
</select>
</body>
</html>
9.XStream（可把Javabean转换成XML的小工具）
- 什么作用
- 可以把JavaBean转换为（序列化）为xml
- XStream的jar包
- 核心jar包：xstream-1.4.7.jar
- 必须依赖包：xpp3_min-1.1.4c（XML Pull Parser，一款速度很快的XML解析器）
- 使用步骤
XStream xstream = new XStream();String xmlStr = xstream.toXML(javabean);
- 使用细节
- 别名：把类型对应的元素名修改了
- xstream.alias(“name”,classtype); 让classtype类型生成的元素名为name
- 使用为属性：默认类的成员，生成的是元素的子元素，现将其生成为元素的属性
- xstream.useAttribute(class,“name”); 把class类的name成员，生成为< class >元素的name属性
- 去除Collection类型的成员名：只需要Collection的内容，而不希望Collection本身也生成一个元素
- xstream.addImplicitCollection(class,“name”); 让class类的名为name（它是list类型的，它的内容还会生成元素）的成名不生成元素
- 去除类的指定成员，让其不生成xml元素
- xstream.omitFiled(class,“name”); 在生成的xml中不会出现class类的，名为name的对应的元素
- 别名：把类型对应的元素名修改了
package cn.itcast.XStreamDemo;
import java.util.ArrayList;
import java.util.List;
public class Province {
private String name; //省名
private List<City> cities = new ArrayList<City>();
public String getName() { return name; }
public void setName(String name) { this.name = name; }
public List<City> getCities() { return cities; }
public void setCities(List<City> cities) { this.cities = cities; }
public void addCity(City city)
{
cities.add(city);
}
}
package cn.itcast.XStreamDemo;
public class City {
private String name; //市名
private String description; //描述
public String getName() { return name; }
public void setName(String name) { this.name = name; }
public String getDescription() { return description; }
public void setDescription(String description) { this.description = description; }
@Override
public String toString()
{ return "City [name = " + name + " , description " + description + " ]"; }
public City() { super(); }
public City(String name,String description)
{
super();
this.name = name;
this.description = description;
}
}
package cn.itcast.XStreamDemo;
/*演示XStream*/
import java.util.ArrayList;
import java.util.List;
public class Demo1
{
//返回javabean集合
public List<Province> getProvinceList()
{
Province p1 = new Province();
p1.setName("北京");
p1.addCity(new City("三里屯","sanLiTun"));
p1.addCity(new City("朝阳区","chaoYangQu"));
Province p2 = new Province();
p2.setName("天津");
p2.addCity(new City("西青区","xiQingQu"));
p2.addCity(new City("南开区","nanKaiQu"));
p2.addCity(new City("滨海新区","binHaiXinQu"));
Province p3 = new Province();
p3.setName("河南省");
p3.addCity(new City("洛阳","luoYang"));
p3.addCity(new City("郑州","zhengZhou"));
p3.addCity(new City("驻马店","zhuMaDian"));
p3.addCity(new City("南阳","nanYang"));
List<Province> provincesList = new ArrayList<Province>();
provincesList.add(p1);
provincesList.add(p2);
provincesList.add(p3);
return provincesList;
}
public void fun()
{
List<Province> proList = getProvinceList();
XStream xStream = new XStream; //创建xstream对象
/**
* 别名
* 希望：
* * 默认List类型对应<List>元素，希望让List类型对应<china>元素
* * 默认Province类型对应<cn.itcast.XStreamDemo.Province>,希望让它对应<province>
* * 默认City类型对应<cn.itcast.XStreamDemo.City>，希望让它对应<city>
*/
xStream.alias("china",java.util.List.class); //给List类型指定别名为china
xStream.alias("province",Province.class); //给ProVince指定别名为province
xStream.alias("city",City.class); //给City类型指定别名为city
/**
*默认javabean的属性都会生成子元素，而现在希望生成元素的属性
*/
xStream.useAttributeFor(Province.class,"name");
//把Province类型的name属性，生成<province>元素的属性
/**
*去除List类型的属性，只把list中的元素生成xml元素
*/
xStream.addImplicitCollection(Province.class,"cities");
//去除Province类的名为cities的List类型的属性
/**
* 去除不想要的javabean属性
* 就是让某些javabean属性，不生成对应的xml元素
*/
xStream.omitFiled(City.class,"description");
//让City类的，名为description属性不生成对应的xml元素
String s = xStream.toXML(proList); //调用toXML把集合转换成xml字符串
System.out.println(s);
}
}
10.JSON的概述
- json是什么
- 是js提供的一种数据交换(把一种语言转换为另一种语言)格式
- json的语法
- {}：是对象
- 属性名必须使用双引号括起来，单引不行
- 属性值：
- 数字（整数或者浮点数）
- 字符串（在双引号中）
- 逻辑值（true或false）
- 数组（在方括号中）
- 对象（在花括号中）
- null
- {}：是对象
- 应用json
var person = {"name":"zhangSan","age":18,"sex":"male"};
- json和xml比较
- 可读性：xml胜出
- 解析难度：json本身就是js对象（主场作战），所以简单很多
- 流行度：xml已经流行多年，但在ajax领域，json更受欢迎
@WebServlet(name = "CServlet")
public class CServlet extends HttpServlet
{
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
//向客户端发送json串
String str = "{\"name\":\"zhangSan\",\"age\":18,\"sex\":\"male\"}";
response.getWriter().print(str);
System.out.println(str);
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>json之Hello World</title>
<script type="text/javascript">
function createXMLHttpRequset()
{
try
{
return new XMLHttpRequest();
}
catch (e)
{
try
{
return new ActiveXObject("Msxml2.XMLHttp");
}
catch (e)
{
try
{
return new ActiveXObject("Microsoft.XMLHttp");
}
catch (e)
{
alert("匹配不到浏览器");
throw e;
}
}
}
}
window.onload = function ()
{
var btn = document.getElementById("btn");
btn.onclick = function ()
{
var xmlHttp = createXMLHttpRequset();
xmlHttp.open("GET","<c:url value='/CServlet'/>",true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function ()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
var text = xmlHttp.responseText; //它是一个json串
var person = eval("{" + text + "}");
var s = person.name + "," + person.age + "," + person.sex;
document.getElementById("h3").innerHTML = s;
}
}
}
}
</script>
</head>
<body>
//点击按钮后，把服务器响应的数据显示到h3元素中
<button id="btn">click here</button>
<h1>json之Hello World</h1>
<h3 id="h3"></h3>
</body>
</html>
11.json-lib的应用
-
是什么
- 可以把javabean转换成json串
-
jar包
-
核心jar包：json-lib.jar
-
依赖jar包：commons-lang.jar
commons-beanutils.jar
commons-logging.jar
commons-collections.jar
ezmorph.jar
-
-
核心类
- JSONObject–>Map
- toString()
JSONObject map = JSONObject.fromObject(person);把对象转换成JSONObject对象
- JSONArray–>List
- toString()
JSONArray jsonArray = JSONArray.fromObject(list);把list转换成JSONArray对象
- JSONObject–>Map
package cn.itcast.JsonDemo;
public class Person
{
private String name;
private int age;
private String sex;
public String getName() { return name; }
public void setName(String name) { this.name = name; }
public int getAge() { return age; }
public void setAge(int age) { this.age = age; }
public String getSex() { return sex; }
public void setSex(String sex) { this.sex = sex; }
public Person() { super(); }
public Person(String name,int age,String sex)
{
super();
this.name = name;
this.age = age;
this.sex = sex;
}
@Override
public String toString()
{ return "Person [name = " + name + " , age = " + age + " , sex " + sex + "]"; }
}
package cn.itcast.JsonDemo;
import java.util.ArrayList;
import java.util.List;
/**
* 演示json-lib小工具
* @author cxf
*/
public class Demo1 {
//JSONObject
public void fun1()
{
JSONObject map = new JSONObject();
map.put("name","zhangSan");
map.put("age",18);
map.put("sex","male");
String s = map.toString();
System.out.println(s);
}
//当你已经有一个person对象时，可以把person转换成JSONObject对象
public void fun2()
{
Person p = new Person("liSi",32,"female");
//把对象转换成JSONObject类型
JSONObject map = JSONObject.fromObject(p);
System.out.println(map.toString());
}
//JSONArray
public void fun3()
{
Person p1 = new Person("zhangSan",12,"male");
Person p2 = new Person("liSi",32,"female");
JSONArray list = new JSONArray();
list.add(p1);
list.add(p2);
System.out.println(list.toString());
}
//原来就有一个list，我们需要把List转换成JSONArray
public void fun4()
{
Person p1 = new Person("zhangSan",12,"male");
Person p2 = new Person("liSi",32,"female");
List<Person> list = new ArrayList<Person>();
list.add(p1);
list.add(p2);
System.out.println(JSONArray.fromObject(list).toString());
}
}
12.打包ajax生成小工具
@WebServlet(name = "CServlet")
public class CServlet extends HttpServlet
{
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
//向客户端发送json串
String str = "{\"name\":\"zhangSan\",\"age\":18,\"sex\":\"male\"}";
response.getWriter().print(str);
System.out.println(str);
}
}
//创建Request对象
function createXMLHttpRequset()
{
try
{
return new XMLHttpRequest();
}
catch (e)
{
try
{
return new ActiveXObject("Msxml2.XMLHttp");
}
catch (e)
{
try
{
return new ActiveXObject("Microsoft.XMLHttp");
}
catch (e)
{
alert("匹配不到浏览器");
throw e;
}
}
}
}
/**
* option对象有如下属性：
* @param option
*/
/*请求方式*/method,
/*请求的url*/url,
/*是否异步*/asyn,
/*请求体内容*/params,
/*回调方法*/callback,
/*服务器响应数据转换成什么类型*/type
function ajax(option)
{
//得到xmlHttp
var xmlHttp = createXMLHttpRequset();
//打开链接
if(!option.method) //默认为GET请求
{
option.method = "GET";
}
if(option.asyn == undefined) //默认为异步处理
{
option.method = true;
}
xmlHttp.open(option.method,option.url,option.asyn);
//判断是否为POST
if("POST" == option.method )
{
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
}
//发送请求
xmlHttp.send(option.params);
//注册监听
xmlHttp.onreadystatechange = function ()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
//获取服务器的响应数据，进行转换
if(!option.type) //默认为文本
{
data = xmlHttp.responseText;
}
else
{
if(option.type == "xml")
{
data = xmlHttp.responseXML;
}
else
{
if(option.type == "text")
{
data = xmlHttp.responseText;
}
else
{
if(option.type == "json")
{
var text = xmlHttp.responseText;
data = eval("{" + text + "}");
}
}
}
}
}
//调用回调方法
option.callback(data);
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>演示自己封装的小工具</title>
<script type="text/javascript" src="<c:url value='/ajax-lib/ajaxutils.js'/>">
window.onload = function ()
{
var btn = document.getElementById("btn");
btn.onclick = function ()
{
/**
* 1.ajax
*/
ajax(
{
url:"<c:url value='/CServlet'/>",
type:"json",
callback:function () {
document.getElementById("h3").innerHTML =
data.name + "," + data.age + "," + data.sex;
}
}
);
};
};
</script>
</head>
<body>
//点击按钮后，把服务器响应的数据显示到h3元素中
<button id="btn">click here</button>
<h1>演示自己封装的小工具</h1>
<h3 id="h3"></h3>
</body>
</html>
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
