1 简述对JSON的理解
参考答案
JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式。
2 编写程序，使用JSON实现三级联动的下拉列表
参考答案
实现本案例可按照如下步骤进行。
步骤一：新建实体类City、Street
新建实体类City表示城市；新建实体类Street表示街道，City类的代码如下所示：
package bean;
public class City {
private String cityName;
private String cityValue;
public City() {
super();
}
public City(String cityName, String cityValue) {
super();
this.cityName = cityName;
this.cityValue = cityValue;
}
public String getCityName() {
return cityName;
}
public void setCityName(String cityName) {
this.cityName = cityName;
}
public String getCityValue() {
return cityValue;
}
public void setCityValue(String cityValue) {
this.cityValue = cityValue;
}
}
Street类的代码如下所示：
package bean;
public class Street {
private String streetName;
private String streetValue;
public Street() {
super();
}
public Street(String streetName, String streetValue) {
super();
this.streetName = streetName;
this.streetValue = streetValue;
}
public String getStreetName() {
return streetName;
}
public void setStreetName(String streetName) {
this.streetName = streetName;
}
public String getStreetValue() {
return streetValue;
}
public void setStreetValue(String streetValue) {
this.streetValue = streetValue;
}
}
步骤二：新建ActionServlet
新建ActionServlet，在该类中实现城市和街道的获取，代码如下所示：
package web;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import bean.City;
import bean.Street;
public class ActionServlet extends HttpServlet {
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String uri = request.getRequestURI();
String action = uri.substring(uri.lastIndexOf("/")
,uri.lastIndexOf("."));
if (action.equals("/city")) {
String name = request.getParameter("name");
if (name.equals("bj")) {
City c1 = new City("海淀", "hd");
City c2 = new City("东城", "dc");
City c3 = new City("西城", "xc");
List<City> cs = new ArrayList<City>();
cs.add(c1);
cs.add(c2);
cs.add(c3);
JSONArray obj = JSONArray.fromObject(cs);
String str = obj.toString();
out.println(str);
} else if (name.equals("sh")) {
City c1 = new City("徐汇", "xh");
City c2 = new City("静安", "ja");
City c3 = new City("黄浦", "hp");
List<City> cs = new ArrayList<City>();
cs.add(c1);
cs.add(c2);
cs.add(c3);
JSONArray obj = JSONArray.fromObject(cs);
String str = obj.toString();
out.println(str);
}
}else if(action.equals("/street")){
String area = request.getParameter("area");
System.out.print("area"+area);
if ("hd".equals(area)) {//海淀
Street s1=new Street("中关村大街","zgc");
Street s2=new Street("四道口","sdk");
List<Street> cs = new ArrayList<Street>();
cs.add(s1);
cs.add(s2);
JSONArray obj = JSONArray.fromObject(cs);
String str = obj.toString();
out.println(str);
} else if ("xc".equals(area)) {//西城
Street s1=new Street("牛街","nj");
Street s2=new Street("广安门大街","gam");
List<Street> cs = new ArrayList<Street>();
cs.add(s1);
cs.add(s2);
JSONArray obj = JSONArray.fromObject(cs);
String str = obj.toString();
out.println(str);
}
}
out.close();
}
}
以上代码中只提供了，北京市海淀区以及西城区的街道，其余区请自行填写。
步骤三：新建city.html文件
新建city.html文件，在其中完成页面显示代码以及AJAX异步获取城市下的区、以及区下的街道的代码。代码如下所示：
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title></title>
<script type="text/javascript" src="js/json.js"></script>
<script type="text/javascript">
functiongetXmlHttpRequest(){
var xhr = null;
if((typeof XMLHttpRequest)!='undefined'){
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
functionchange(v1){
var xhr = getXmlHttpRequest();
xhr.open('post','city.do',true);
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xhr.onreadystatechange=function(){
if(xhr.readyState == 4){
var txt = xhr.responseText;
var citys = txt.parseJSON();
document.getElementById('s2').innerHTML = '';
for(i=0;i<citys.length;i++){
var op =
new Option(citys[i].cityName,
citys[i].cityValue);
document.getElementById('s2').options[i] = op;
}
}
};
xhr.send('name=' + v1);
}
functionchangeCity(v2){
var xhr = getXmlHttpRequest();
xhr.open('post','street.do',true);
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xhr.onreadystatechange=function(){
if(xhr.readyState == 4){
var txt = xhr.responseText;
var streets = txt.parseJSON();
document.getElementById('s3').innerHTML = '';
for(i=0;i<streets.length;i++){
var op =
new Option(streets[i].streetName,
streets[i].streetValue);
document.getElementById('s3').options[i] = op;
}
}
};
xhr.send('area=' + v2);
}
</script>
</head>
<body>
<select id="s1" style="width:120px;"
onchange="change(this.value);">
<option value="sh">上海</option>
<option value="bj">北京</option>
</select>
<select id="s2" style="width:120px;"
onchange="changeCity(this.value);">
</select>
<select id="s3" style="width:120px;">
</select>
</body>
</html>
步骤四：运行查看结果
访问city.html，页面显示效果如图-1所示。
图– 1
本案例的完整代码如下。
City类的完整代码如下所示：
package bean;
public class City {
private String cityName;
private String cityValue;
public City() {
super();
}
public City(String cityName, String cityValue) {
super();
this.cityName = cityName;
this.cityValue = cityValue;
}
public String getCityName() {
return cityName;
}
public void setCityName(String cityName) {
this.cityName = cityName;
}
public String getCityValue() {
return cityValue;
}
public void setCityValue(String cityValue) {
this.cityValue = cityValue;
}
}
Street类的完整代码如下所示：
package bean;
public class Street {
private String streetName;
private String streetValue;
public Street() {
super();
}
public Street(String streetName, String streetValue) {
super();
this.streetName = streetName;
this.streetValue = streetValue;
}
public String getStreetName() {
return streetName;
}
public void setStreetName(String streetName) {
this.streetName = streetName;
}
public String getStreetValue() {
return streetValue;
}
public void setStreetValue(String streetValue) {
this.streetValue = streetValue;
}
}
ActionServlet类的完整代码如下所示：
package web;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import bean.City;
import bean.Street;
public class ActionServlet extends HttpServlet {
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String uri = request.getRequestURI();
String action = uri.substring(uri.lastIndexOf("/")
,uri.lastIndexOf("."));
if (action.equals("/city")) {
String name = request.getParameter("name");
if (name.equals("bj")) {
City c1 = new City("海淀", "hd");
City c2 = new City("东城", "dc");
City c3 = new City("西城", "xc");
List<City> cs = new ArrayList<City>();
cs.add(c1);
cs.add(c2);
cs.add(c3);
JSONArray obj = JSONArray.fromObject(cs);
String str = obj.toString();
out.println(str);
} else if (name.equals("sh")) {
City c1 = new City("徐汇", "xh");
City c2 = new City("静安", "ja");
City c3 = new City("黄浦", "hp");
List<City> cs = new ArrayList<City>();
cs.add(c1);
cs.add(c2);
cs.add(c3);
JSONArray obj = JSONArray.fromObject(cs);
String str = obj.toString();
out.println(str);
}
}else if(action.equals("/street")){
String area = request.getParameter("area");
System.out.print("area"+area);
if ("hd".equals(area)) {//海淀
Street s1=new Street("中关村大街","zgc");
Street s2=new Street("四道口","sdk");
List<Street> cs = new ArrayList<Street>();
cs.add(s1);
cs.add(s2);
JSONArray obj = JSONArray.fromObject(cs);
String str = obj.toString();
out.println(str);
} else if ("xc".equals(area)) {//西城
Street s1=new Street("牛街","nj");
Street s2=new Street("广安门大街","gam");
List<Street> cs = new ArrayList<Street>();
cs.add(s1);
cs.add(s2);
JSONArray obj = JSONArray.fromObject(cs);
String str = obj.toString();
out.println(str);
}
}
out.close();
}
}
city.html文件的完整代码如下所示：
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title></title>
<script type="text/javascript" src="js/json.js"></script>
<script type="text/javascript">
functiongetXmlHttpRequest(){
var xhr = null;
if((typeof XMLHttpRequest)!='undefined'){
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
functionchange(v1){
var xhr = getXmlHttpRequest();
xhr.open('post','city.do',true);
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xhr.onreadystatechange=function(){
if(xhr.readyState == 4){
var txt = xhr.responseText;
var citys = txt.parseJSON();
document.getElementById('s2').innerHTML = '';
for(i=0;i<citys.length;i++){
var op =
new Option(citys[i].cityName,
citys[i].cityValue);
document.getElementById('s2').options[i] = op;
}
}
};
xhr.send('name=' + v1);
}
functionchangeCity(v2){
var xhr = getXmlHttpRequest();
xhr.open('post','street.do',true);
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xhr.onreadystatechange=function(){
if(xhr.readyState == 4){
var txt = xhr.responseText;
var streets = txt.parseJSON();
document.getElementById('s3').innerHTML = '';
for(i=0;i<streets.length;i++){
var op =
new Option(streets[i].streetName,
streets[i].streetValue);
document.getElementById('s3').options[i] = op;
}
}
};
xhr.send('area=' + v2);
}
</script>
</head>
<body>
<select id="s1" style="width:120px;"
onchange="change(this.value);">
<option value="sh">上海</option>
<option value="bj">北京</option>
</select>
<select id="s2" style="width:120px;"
onchange="changeCity(this.value);">
</select>
<select id="s3" style="width:120px;">
</select>
</body>
</html>
3 下列说法正确的是（）
A. JSON字符串转换为JavaScript对象时只能依靠eval()方法
B. 因请求地址不变，导致有些浏览器认为不需要请求新的数据，而继续使用原有页面的过程叫做客户端缓存
C. AJAX所发出的请求是同步请求
D. JSON是一种轻量级的数据交换格式
参考答案
本题正确答案为 BD
A选项说法错误。JSON字符串转换为JavaScript对象可以使用JavaScript语言的原生函数eval；也可以使用原生对象JSON提供的parse方法和stringify方法
C选项说法错误。AJAX为Asynchronous JavaScript and Xml 即异步的JavaScript和Xml。AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发请求。