程序博客网 > 淘宝的柠檬

JSON 、使用JSON实现数据交换 、jQuery对AJAX的支持

来源：互联网 发布：淘宝的柠檬 编辑：程序博客网 时间：2024/05/31 18:42

 

 
 

1 简述对JSON的理解

参考答案

JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式。

2 编写程序，使用JSON实现三级联动的下拉列表

参考答案

实现本案例可按照如下步骤进行。

步骤一：新建实体类City、Street

新建实体类City表示城市；新建实体类Street表示街道，City类的代码如下所示：

copytextpop-up
  1. package bean;
  2.  
  3. public class City {
  4.     private String cityName;
  5.     private String cityValue;    
  6.     
  7.     public City() {
  8.         super();
  9.     }
  10.     public City(String cityName, String cityValue) {
  11.         super();
  12.         this.cityName = cityName;
  13.         this.cityValue = cityValue;
  14.     }
  15.     public String getCityName() {
  16.         return cityName;
  17.     }
  18.     public void setCityName(String cityName) {
  19.         this.cityName = cityName;
  20.     }
  21.     public String getCityValue() {
  22.         return cityValue;
  23.     }
  24.     public void setCityValue(String cityValue) {
  25.         this.cityValue = cityValue;
  26.     }
  27. }
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类的代码如下所示：

copytextpop-up
  1. package bean;
  2.  
  3. public class Street {
  4.     private String streetName;
  5.     private String streetValue;
  6.  
  7.     public Street() {
  8.         super();
  9.     }
  10.  
  11.     public Street(String streetName, String streetValue) {
  12.         super();
  13.         this.streetName = streetName;
  14.         this.streetValue = streetValue;
  15.     }
  16.  
  17.     public String getStreetName() {
  18.         return streetName;
  19.     }
  20.  
  21.     public void setStreetName(String streetName) {
  22.         this.streetName = streetName;
  23.     }
  24.  
  25.     public String getStreetValue() {
  26.         return streetValue;
  27.     }
  28.  
  29.     public void setStreetValue(String streetValue) {
  30.         this.streetValue = streetValue;
  31.     }
  32. }
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，在该类中实现城市和街道的获取，代码如下所示：

copytextpop-up
  1. package web;
  2.  
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5. import java.util.ArrayList;
  6. import java.util.List;
  7.  
  8. import javax.servlet.ServletException;
  9. import javax.servlet.http.HttpServlet;
  10. import javax.servlet.http.HttpServletRequest;
  11. import javax.servlet.http.HttpServletResponse;
  12.  
  13. import net.sf.json.JSONArray;
  14. import bean.City;
  15. import bean.Street;
  16.  
  17. public class ActionServlet extends HttpServlet {
  18.  
  19.     public void service(HttpServletRequest request, HttpServletResponse response)
  20.             throws ServletException, IOException {
  21.         request.setCharacterEncoding("UTF-8");
  22.         response.setContentType("text/html;charset=UTF-8");
  23.         PrintWriter out = response.getWriter();
  24.         String uri = request.getRequestURI();
  25.         String action = uri.substring(uri.lastIndexOf("/")
  26.                 ,uri.lastIndexOf("."));
  27.         if (action.equals("/city")) {
  28.             String name = request.getParameter("name");
  29.             if (name.equals("bj")) {
  30.                 City c1 = new City("海淀", "hd");
  31.                 City c2 = new City("东城", "dc");
  32.                 City c3 = new City("西城", "xc");
  33.                 List<City> cs = new ArrayList<City>();
  34.                 cs.add(c1);
  35.                 cs.add(c2);
  36.                 cs.add(c3);
  37.                 JSONArray obj = JSONArray.fromObject(cs);
  38.                 String str = obj.toString();
  39.                 out.println(str);
  40.             } else if (name.equals("sh")) {
  41.                 City c1 = new City("徐汇", "xh");
  42.                 City c2 = new City("静安", "ja");
  43.                 City c3 = new City("黄浦", "hp");
  44.                 List<City> cs = new ArrayList<City>();
  45.                 cs.add(c1);
  46.                 cs.add(c2);
  47.                 cs.add(c3);
  48.                 JSONArray obj = JSONArray.fromObject(cs);
  49.                 String str = obj.toString();
  50.                 out.println(str);
  51.             }
  52.         }else if(action.equals("/street")){            
  53.             String area = request.getParameter("area");
  54.             System.out.print("area"+area);
  55.             if ("hd".equals(area)) {//海淀
  56.                 Street s1=new Street("中关村大街","zgc");
  57.                 Street s2=new Street("四道口","sdk");
  58.                 List<Street> cs = new ArrayList<Street>();
  59.                 cs.add(s1);
  60.                 cs.add(s2);
  61.                 JSONArray obj = JSONArray.fromObject(cs);
  62.                 String str = obj.toString();
  63.                 out.println(str);
  64.             } else if ("xc".equals(area)) {//西城
  65.                 Street s1=new Street("牛街","nj");
  66.                 Street s2=new Street("广安门大街","gam");
  67.                 List<Street> cs = new ArrayList<Street>();
  68.                 cs.add(s1);
  69.                 cs.add(s2);
  70.                 JSONArray obj = JSONArray.fromObject(cs);
  71.                 String str = obj.toString();
  72.                 out.println(str);
  73.             }
  74.         }
  75.         out.close();
  76.     }
  77. }
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异步获取城市下的区、以及区下的街道的代码。代码如下所示：

copytextpop-up
  1. <html>
  2. <head>
  3. <meta http-equiv="content-type" content="text/html;charset=utf-8">
  4.     <title></title>    
  5.     <script type="text/javascript" src="js/json.js"></script>
  6.     <script type="text/javascript">
  7.         functiongetXmlHttpRequest(){
  8.             var xhr = null;
  9.         if((typeof XMLHttpRequest)!='undefined'){
  10.         xhr = new XMLHttpRequest();
  11.     }else {
  12.         xhr = new ActiveXObject('Microsoft.XMLHttp');
  13.     }
  14.     return xhr;
  15.         }
  16.  
  17.         functionchange(v1){
  18.             var xhr = getXmlHttpRequest();
  19.             xhr.open('post','city.do',true);
  20.             xhr.setRequestHeader("Content-Type",
  21.                 "application/x-www-form-urlencoded");
  22.             xhr.onreadystatechange=function(){
  23.                 if(xhr.readyState == 4){
  24.                     var txt = xhr.responseText;
  25.                     var citys = txt.parseJSON();
  26.                     document.getElementById('s2').innerHTML = '';
  27.                     for(i=0;i<citys.length;i++){
  28.                         var op = 
  29.                         new Option(citys[i].cityName,
  30.                         citys[i].cityValue);
  31.                         document.getElementById('s2').options[i] = op;
  32.                     }
  33.                 }
  34.             };
  35.             xhr.send('name=' + v1);
  36.         }
  37.         functionchangeCity(v2){
  38.             var xhr = getXmlHttpRequest();
  39.             xhr.open('post','street.do',true);
  40.             xhr.setRequestHeader("Content-Type",
  41.                 "application/x-www-form-urlencoded");
  42.             xhr.onreadystatechange=function(){
  43.             
  44.                 if(xhr.readyState == 4){
  45.                     var txt = xhr.responseText;
  46.                     var streets = txt.parseJSON();
  47.                     document.getElementById('s3').innerHTML = '';
  48.                     
  49.                     for(i=0;i<streets.length;i++){
  50.                         var op = 
  51.                         new Option(streets[i].streetName,
  52.                         streets[i].streetValue);
  53.                         document.getElementById('s3').options[i] = op;
  54.                     }
  55.                 }
  56.             };
  57.             xhr.send('area=' + v2);
  58.         }
  59.     </script>
  60. </head>
  61. <body>
  62.     <select id="s1" style="width:120px;"
  63.     onchange="change(this.value);">
  64.         <option value="sh">上海</option>
  65.         <option value="bj">北京</option>
  66.     </select>
  67.     <select id="s2" style="width:120px;"
  68.     onchange="changeCity(this.value);">
  69.     </select>
  70.     <select id="s3" style="width:120px;">
  71.     </select>
  72. </body>
  73. </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>

步骤四：运行查看结果

访问city.html，页面显示效果如图-1所示。

图– 1

本案例的完整代码如下。

City类的完整代码如下所示：

copytextpop-up
  1. package bean;
  2.  
  3. public class City {
  4.     private String cityName;
  5.     private String cityValue;    
  6.     
  7.     public City() {
  8.         super();
  9.     }
  10.     public City(String cityName, String cityValue) {
  11.         super();
  12.         this.cityName = cityName;
  13.         this.cityValue = cityValue;
  14.     }
  15.     public String getCityName() {
  16.         return cityName;
  17.     }
  18.     public void setCityName(String cityName) {
  19.         this.cityName = cityName;
  20.     }
  21.     public String getCityValue() {
  22.         return cityValue;
  23.     }
  24.     public void setCityValue(String cityValue) {
  25.         this.cityValue = cityValue;
  26.     }
  27. }
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类的完整代码如下所示：

copytextpop-up
  1. package bean;
  2.  
  3. public class Street {
  4.     private String streetName;
  5.     private String streetValue;
  6.  
  7.     public Street() {
  8.         super();
  9.     }
  10.  
  11.     public Street(String streetName, String streetValue) {
  12.         super();
  13.         this.streetName = streetName;
  14.         this.streetValue = streetValue;
  15.     }
  16.  
  17.     public String getStreetName() {
  18.         return streetName;
  19.     }
  20.  
  21.     public void setStreetName(String streetName) {
  22.         this.streetName = streetName;
  23.     }
  24.  
  25.     public String getStreetValue() {
  26.         return streetValue;
  27.     }
  28.  
  29.     public void setStreetValue(String streetValue) {
  30.         this.streetValue = streetValue;
  31.     }
  32. }
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类的完整代码如下所示：

copytextpop-up
  1. package web;
  2.  
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5. import java.util.ArrayList;
  6. import java.util.List;
  7.  
  8. import javax.servlet.ServletException;
  9. import javax.servlet.http.HttpServlet;
  10. import javax.servlet.http.HttpServletRequest;
  11. import javax.servlet.http.HttpServletResponse;
  12.  
  13. import net.sf.json.JSONArray;
  14. import bean.City;
  15. import bean.Street;
  16.  
  17. public class ActionServlet extends HttpServlet {
  18.  
  19.     public void service(HttpServletRequest request, HttpServletResponse response)
  20.             throws ServletException, IOException {
  21.         request.setCharacterEncoding("UTF-8");
  22.         response.setContentType("text/html;charset=UTF-8");
  23.         PrintWriter out = response.getWriter();
  24.         String uri = request.getRequestURI();
  25.         String action = uri.substring(uri.lastIndexOf("/")
  26.                 ,uri.lastIndexOf("."));
  27.         if (action.equals("/city")) {
  28.             String name = request.getParameter("name");
  29.             if (name.equals("bj")) {
  30.                 City c1 = new City("海淀", "hd");
  31.                 City c2 = new City("东城", "dc");
  32.                 City c3 = new City("西城", "xc");
  33.                 List<City> cs = new ArrayList<City>();
  34.                 cs.add(c1);
  35.                 cs.add(c2);
  36.                 cs.add(c3);
  37.                 JSONArray obj = JSONArray.fromObject(cs);
  38.                 String str = obj.toString();
  39.                 out.println(str);
  40.             } else if (name.equals("sh")) {
  41.                 City c1 = new City("徐汇", "xh");
  42.                 City c2 = new City("静安", "ja");
  43.                 City c3 = new City("黄浦", "hp");
  44.                 List<City> cs = new ArrayList<City>();
  45.                 cs.add(c1);
  46.                 cs.add(c2);
  47.                 cs.add(c3);
  48.                 JSONArray obj = JSONArray.fromObject(cs);
  49.                 String str = obj.toString();
  50.                 out.println(str);
  51.             }
  52.         }else if(action.equals("/street")){            
  53.             String area = request.getParameter("area");
  54.             System.out.print("area"+area);
  55.             if ("hd".equals(area)) {//海淀
  56.                 Street s1=new Street("中关村大街","zgc");
  57.                 Street s2=new Street("四道口","sdk");
  58.                 List<Street> cs = new ArrayList<Street>();
  59.                 cs.add(s1);
  60.                 cs.add(s2);
  61.                 JSONArray obj = JSONArray.fromObject(cs);
  62.                 String str = obj.toString();
  63.                 out.println(str);
  64.             } else if ("xc".equals(area)) {//西城
  65.                 Street s1=new Street("牛街","nj");
  66.                 Street s2=new Street("广安门大街","gam");
  67.                 List<Street> cs = new ArrayList<Street>();
  68.                 cs.add(s1);
  69.                 cs.add(s2);
  70.                 JSONArray obj = JSONArray.fromObject(cs);
  71.                 String str = obj.toString();
  72.                 out.println(str);
  73.             }
  74.         }
  75.         out.close();
  76.     }
  77. }
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文件的完整代码如下所示：

copytextpop-up
  1. <html>
  2. <head>
  3. <meta http-equiv="content-type" content="text/html;charset=utf-8">
  4.     <title></title>    
  5.     <script type="text/javascript" src="js/json.js"></script>
  6.     <script type="text/javascript">
  7.         functiongetXmlHttpRequest(){
  8.             var xhr = null;
  9.         if((typeof XMLHttpRequest)!='undefined'){
  10.         xhr = new XMLHttpRequest();
  11.     }else {
  12.         xhr = new ActiveXObject('Microsoft.XMLHttp');
  13.     }
  14.     return xhr;
  15.         }
  16.  
  17.         functionchange(v1){
  18.             var xhr = getXmlHttpRequest();
  19.             xhr.open('post','city.do',true);
  20.             xhr.setRequestHeader("Content-Type",
  21.                 "application/x-www-form-urlencoded");
  22.             xhr.onreadystatechange=function(){
  23.                 if(xhr.readyState == 4){
  24.                     var txt = xhr.responseText;
  25.                     var citys = txt.parseJSON();
  26.                     document.getElementById('s2').innerHTML = '';
  27.                     for(i=0;i<citys.length;i++){
  28.                         var op = 
  29.                         new Option(citys[i].cityName,
  30.                         citys[i].cityValue);
  31.                         document.getElementById('s2').options[i] = op;
  32.                     }
  33.                 }
  34.             };
  35.             xhr.send('name=' + v1);
  36.         }
  37.         functionchangeCity(v2){
  38.             var xhr = getXmlHttpRequest();
  39.             xhr.open('post','street.do',true);
  40.             xhr.setRequestHeader("Content-Type",
  41.                 "application/x-www-form-urlencoded");
  42.             xhr.onreadystatechange=function(){
  43.             
  44.                 if(xhr.readyState == 4){
  45.                     var txt = xhr.responseText;
  46.                     var streets = txt.parseJSON();
  47.                     document.getElementById('s3').innerHTML = '';
  48.                     
  49.                     for(i=0;i<streets.length;i++){
  50.                         var op = 
  51.                         new Option(streets[i].streetName,
  52.                         streets[i].streetValue);
  53.                         document.getElementById('s3').options[i] = op;
  54.                     }
  55.                 }
  56.             };
  57.             xhr.send('area=' + v2);
  58.         }
  59.     </script>
  60. </head>
  61. <body>
  62.     <select id="s1" style="width:120px;"
  63.     onchange="change(this.value);">
  64.         <option value="sh">上海</option>
  65.         <option value="bj">北京</option>
  66.     </select>
  67.     <select id="s2" style="width:120px;"
  68.     onchange="changeCity(this.value);">
  69.     </select>
  70.     <select id="s3" style="width:120px;">
  71.     </select>
  72. </body>
  73. </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对象异步地向服务器发请求。

4 编写程序，实现类似于百度搜索时的自动完成功能。

使用jQuery实现类似于百度搜索时的自动完成功能，界面效果如图-6所示。

图– 6

参考答案

首先在输入框上注册keyup事件，然后在事件中通过AJAX获取JSON对象。取得数据后，每一项数据创建一个li标签，在标签上注册click事件，这样当我们点击每一项的时候，就可以响应事件。键盘导航的关键是记录当前高亮的索引值，根据索引值来调整背景高亮。显示下拉列表的位置要根据输入框的位置来设置，当浏览器的大小改变时，随时调整下拉列表的位置。

完成本案例可按照如下步骤进行。

步骤一：新建baidu.html文件

新建baidu.html文件，在该文件中创建如图-6所示的界面，代码如图-7所示。

图– 7

步骤二：引入jQuery.js文件

在baidu.html文件中引入jQuery.js文件，代码如图-8所示。

图– 8

步骤三：设置页面的样式

在baidu.html文件中，添加页面样式信息，代码图-9所示。

图– 9

步骤四：创建ActionServlet

新建ActionServlet，在其中模拟服务器提供的数据，代码如图-10所示。

图– 10

步骤五：配置ActionServlet

在web.xml文件中，配置ActionServlet，代码如图-11所示。

图– 11

步骤六：获取jQuery对象

获取id为“search”的div层对应的jQuery对象以及获取id为“search-text”的文本框对应的jQuery对象，代码如图-12所示。

图– 12

步骤七：创建自动完成的下拉列表

首先，关闭浏览器对输入框的自动完成功能；然后创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，待显示的时候再调整位置，代码如图-13所示。

图– 13

步骤八：创建clear方法并给输入框注册blur事件

首先，创建clear方法，用于清空下拉列表的内容并且隐藏下拉列表区；然后给输入框注册blur事件，当输入框失去焦点的时候清空下拉列表并隐藏，代码如图-14所示。

图– 14

步骤九：设置下拉项的高亮背景

新建方法setSelectedItem，该方法用于设置下拉项的高亮背景，代码如图-15所示。

图– 15

步骤十：发送AJAX请求

新建方法ajax_request，在该方法中发送AJAX请求，通过AJAX请求获取JSON对象。取得数据后，每一项数据创建一个li标签，在标签上注册click事件，这样当点击每一项的时候，就可以响应事件，代码如图-16、图-17所示。

图– 16

图– 17

步骤十一：在输入框上注册keyup事件

在输入框上注册keyup事件，然后在事件中通过AJAX获取JSON对象。取得数据后，每一项数据创建一个li标签，在标签上注册click事件，这样当点击每一项的时候，就可以响应事件。键盘导航的关键是记录当前高亮的索引值，根据索引值来调整背景高亮，代码如图-18、图-19所示。

图– 18

图–19

步骤十二：调整下拉列表框的位置

注册窗口大小改变的事件，重新调整下拉列表的位置，代码如图-20所示。

图– 20

本案例的完整代码如下。

baidu.html文件的完整代码如下所示：

copytextpop-up
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <title>搜索词自动完成</title>
  7.         
  8. <style type="text/css">
  9. #search {
  10.     text-align: center;
  11.     position: relative;
  12. }
  13.  
  14. .autocomplete {
  15.     border: 1px solid #9ACCFB;
  16.     background-color: white;
  17.     text-align: left;
  18. }
  19.  
  20. .autocomplete li {
  21.     list-style-type: none;
  22. }
  23.  
  24. .clickable {
  25.     cursor: default;
  26. }
  27.  
  28. .highlight {
  29.     background-color: #9ACCFB;
  30. }
  31. </style>
  32.  
  33. <script type="text/javascript" src="js/jquery-1.11.1.js">
  34. </script>
  35. <script type="text/javascript">
  36. $(function() {
  37.     //取得div层 
  38.     var $search = $('#search');
  39.     //取得输入框JQuery对象 
  40.     var $searchInput = $search.find('#search-text');
  41.     //关闭浏览器提供给输入框的自动完成 
  42.     $searchInput.attr('autocomplete', 'off');
  43.     //创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，等显示的时候再调整位置 
  44.     var $autocomplete = $('<div class="autocomplete"></div>').hide()
  45.             .insertAfter('#submit');
  46.             
  47.     //清空下拉列表的内容并且隐藏下拉列表区 
  48.     var clear = function() {
  49.         $autocomplete.empty().hide();
  50.     };
  51.     //注册事件，当输入框失去焦点的时候清空下拉列表并隐藏 
  52.     $searchInput.blur(function() {
  53.         setTimeout(clear, 500);
  54.     });
  55.     
  56.     //下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的上下键就会移动高亮的项目，像百度搜索那样 
  57.     var selectedItem = null;
  58.     //timeout的ID 
  59.     var timeoutid = null;
  60.     //设置下拉项的高亮背景 
  61.     var setSelectedItem = function(item) {
  62.         //更新索引变量 
  63.         selectedItem = item;
  64.         //按上下键是循环显示的，小于0就置成最大的值，大于最大值就置成0 
  65.         if (selectedItem < 0) {
  66.             selectedItem = $autocomplete.find('li').length - 1;
  67.         } elseif (selectedItem > $autocomplete.find('li').length - 1) {
  68.             selectedItem = 0;
  69.         }
  70.         //首先移除其他列表项的高亮背景，然后再高亮当前索引的背景 
  71.         $autocomplete.find('li').removeClass('highlight').eq(selectedItem)
  72.                 .addClass('highlight');
  73.     };
  74.     var ajax_request = function() {
  75.         //ajax服务端通信 
  76.         $.ajax( {
  77.             'url' : 'search.do', //服务器的地址 
  78.             'data' : {
  79.                 'search-text' : $searchInput.val()
  80.             }, //参数 
  81.             'dataType' : 'json', //返回数据类型 
  82.             'type' : 'POST', //请求类型 
  83.             'success' : function(data) {
  84.                 if (data.length) {
  85.                     //遍历data，添加到自动完成区 
  86.                  $.each(data, function(index, term) {
  87.                     //创建li标签,添加到下拉列表中 
  88.                     $('<li></li>').text(term).appendTo($autocomplete).addClass(
  89.                             'clickable').hover(function() {
  90.                         //下拉列表每一项的事件，鼠标移进去的操作 
  91.                             $(this).siblings().removeClass('highlight');
  92.                             $(this).addClass('highlight');
  93.                             selectedItem = index;
  94.                         }, function() {
  95.                             //下拉列表每一项的事件，鼠标离开的操作 
  96.                             $(this).removeClass('highlight');
  97.                             //当鼠标离开时索引置-1，当作标记 
  98.                             selectedItem = -1;
  99.                         }).click(function() {
  100.                         //鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中 
  101.                             $searchInput.val(term);
  102.                             //清空并隐藏下拉列表 
  103.                             $autocomplete.empty().hide();
  104.                         });
  105.                 });//事件注册完毕 
  106.             //设置下拉列表的位置，然后显示下拉列表 
  107.             var ypos = $searchInput.position().top;
  108.             var xpos = $searchInput.position().left;
  109.             $autocomplete.css('width', $searchInput.css('width'));
  110.             $autocomplete.css( {
  111.                 'position' : 'relative',
  112.                 'left' : xpos + "px",
  113.                 'top' : ypos + "px"
  114.             });
  115.             setSelectedItem(0);
  116.             //显示下拉列表 
  117.             $autocomplete.show();
  118.         }
  119.     }
  120.         });
  121.     };
  122.     //对输入框进行事件注册 
  123.     $searchInput
  124.             .keyup(function(event) {
  125.                 //字母数字，退格，空格 
  126.                     if (event.keyCode > 40 || event.keyCode == 8
  127.                             || event.keyCode == 32) {
  128.                         //首先删除下拉列表中的信息 
  129.                         $autocomplete.empty().hide();
  130.                         clearTimeout(timeoutid);
  131.                         timeoutid = setTimeout(ajax_request, 100);
  132.                     } elseif (event.keyCode == 38) {
  133.                         //上 
  134.                         //selectedItem = -1 代表鼠标离开 
  135.                         if (selectedItem == -1) {
  136.                             setSelectedItem($autocomplete.find('li').length - 1);
  137.                         } else {
  138.                             //索引减1 
  139.                             setSelectedItem(selectedItem - 1);
  140.                         }
  141.                         event.preventDefault();
  142.                     } elseif (event.keyCode == 40) {
  143.                         //下 
  144.                         //selectedItem = -1 代表鼠标离开 
  145.                         if (selectedItem == -1) {
  146.                             setSelectedItem(0);
  147.                         } else {
  148.                             //索引加1 
  149.                             setSelectedItem(selectedItem + 1);
  150.                         }
  151.                         event.preventDefault();
  152.                     }
  153.                 }).keypress(function(event) {
  154.                 //enter键 
  155.                     if (event.keyCode == 13) {
  156.                         //列表为空或者鼠标离开导致当前没有索引值 
  157.                         if ($autocomplete.find('li').length == 0
  158.                                 || selectedItem == -1) {
  159.                             return;
  160.                         }
  161.                         $searchInput.val($autocomplete.find('li').eq(
  162.                                 selectedItem).text());
  163.                         $autocomplete.empty().hide();
  164.                         event.preventDefault();
  165.                     }
  166.                 }).keydown(function(event) {
  167.                 //esc键 
  168.                     if (event.keyCode == 27) {
  169.                         $autocomplete.empty().hide();
  170.                         event.preventDefault();
  171.                     }
  172.                 });
  173.     //注册窗口大小改变的事件，重新调整下拉列表的位置 
  174.     $(window).resize(function() {
  175.         var ypos = $searchInput.position().top;
  176.         var xpos = $searchInput.position().left;
  177.         $autocomplete.css('width', $searchInput.css('width'));
  178.         $autocomplete.css( {
  179.             'position' : 'relative',
  180.             'left' : xpos + "px",
  181.             'top' : ypos + "px"
  182.         });
  183.     });
  184. });
  185. </script>
  186.     </head>
  187.     <body>
  188.         <div id="search">
  189.             <label for="search-text">
  190.                 请输入关键词
  191.             </label>
  192.             <input type="text" id="search-text" name="search-text" />
  193.             <input type="button" id="submit" value="搜索" />
  194.         </div>
  195.     </body>
  196. </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>搜索词自动完成</title><style type="text/css">#search {text-align: center;position: relative;}.autocomplete {border: 1px solid #9ACCFB;background-color: white;text-align: left;}.autocomplete li {list-style-type: none;}.clickable {cursor: default;}.highlight {background-color: #9ACCFB;}</style><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript">$(function() {//取得div层 var $search = $('#search');//取得输入框JQuery对象 var $searchInput = $search.find('#search-text');//关闭浏览器提供给输入框的自动完成 $searchInput.attr('autocomplete', 'off');//创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，等显示的时候再调整位置 var $autocomplete = $('<div class="autocomplete"></div>').hide().insertAfter('#submit');//清空下拉列表的内容并且隐藏下拉列表区 var clear = function() {$autocomplete.empty().hide();};//注册事件，当输入框失去焦点的时候清空下拉列表并隐藏 $searchInput.blur(function() {setTimeout(clear, 500);});//下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的上下键就会移动高亮的项目，像百度搜索那样 var selectedItem = null;//timeout的ID var timeoutid = null;//设置下拉项的高亮背景 var setSelectedItem = function(item) {//更新索引变量 selectedItem = item;//按上下键是循环显示的，小于0就置成最大的值，大于最大值就置成0 if (selectedItem < 0) {selectedItem = $autocomplete.find('li').length - 1;} elseif (selectedItem > $autocomplete.find('li').length - 1) {selectedItem = 0;}//首先移除其他列表项的高亮背景，然后再高亮当前索引的背景 $autocomplete.find('li').removeClass('highlight').eq(selectedItem).addClass('highlight');};var ajax_request = function() {//ajax服务端通信 $.ajax( {'url' : 'search.do', //服务器的地址 'data' : {'search-text' : $searchInput.val()}, //参数 'dataType' : 'json', //返回数据类型 'type' : 'POST', //请求类型 'success' : function(data) {if (data.length) {//遍历data，添加到自动完成区      $.each(data, function(index, term) {    //创建li标签,添加到下拉列表中 $('<li></li>').text(term).appendTo($autocomplete).addClass('clickable').hover(function() {//下拉列表每一项的事件，鼠标移进去的操作 $(this).siblings().removeClass('highlight');$(this).addClass('highlight');selectedItem = index;}, function() {//下拉列表每一项的事件，鼠标离开的操作 $(this).removeClass('highlight');//当鼠标离开时索引置-1，当作标记 selectedItem = -1;}).click(function() {//鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中 $searchInput.val(term);//清空并隐藏下拉列表 $autocomplete.empty().hide();});});//事件注册完毕 //设置下拉列表的位置，然后显示下拉列表 var ypos = $searchInput.position().top;var xpos = $searchInput.position().left;$autocomplete.css('width', $searchInput.css('width'));$autocomplete.css( {'position' : 'relative','left' : xpos + "px",'top' : ypos + "px"});setSelectedItem(0);//显示下拉列表 $autocomplete.show();}}});};//对输入框进行事件注册 $searchInput.keyup(function(event) {//字母数字，退格，空格 if (event.keyCode > 40 || event.keyCode == 8|| event.keyCode == 32) {//首先删除下拉列表中的信息 $autocomplete.empty().hide();clearTimeout(timeoutid);timeoutid = setTimeout(ajax_request, 100);} elseif (event.keyCode == 38) {//上 //selectedItem = -1 代表鼠标离开 if (selectedItem == -1) {setSelectedItem($autocomplete.find('li').length - 1);} else {//索引减1 setSelectedItem(selectedItem - 1);}event.preventDefault();} elseif (event.keyCode == 40) {//下 //selectedItem = -1 代表鼠标离开 if (selectedItem == -1) {setSelectedItem(0);} else {//索引加1 setSelectedItem(selectedItem + 1);}event.preventDefault();}}).keypress(function(event) {//enter键 if (event.keyCode == 13) {//列表为空或者鼠标离开导致当前没有索引值 if ($autocomplete.find('li').length == 0|| selectedItem == -1) {return;}$searchInput.val($autocomplete.find('li').eq(selectedItem).text());$autocomplete.empty().hide();event.preventDefault();}}).keydown(function(event) {//esc键 if (event.keyCode == 27) {$autocomplete.empty().hide();event.preventDefault();}});//注册窗口大小改变的事件，重新调整下拉列表的位置 $(window).resize(function() {var ypos = $searchInput.position().top;var xpos = $searchInput.position().left;$autocomplete.css('width', $searchInput.css('width'));$autocomplete.css( {'position' : 'relative','left' : xpos + "px",'top' : ypos + "px"});});});</script></head><body><div id="search"><label for="search-text">请输入关键词</label><input type="text" id="search-text" name="search-text" /><input type="button" id="submit" value="搜索" /></div></body></html>
隐藏
代码

ActionServlet完整代码如下所示：

copytextpop-up
  1. package web;
  2.  
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5. import java.util.ArrayList;
  6. import java.util.Date;
  7. import java.util.List;
  8.  
  9. import javax.servlet.ServletException;
  10. import javax.servlet.http.HttpServlet;
  11. import javax.servlet.http.HttpServletRequest;
  12. import javax.servlet.http.HttpServletResponse;
  13.  
  14. public class ActionServlet extends HttpServlet {
  15.     public void service(HttpServletRequest request, HttpServletResponse response)
  16.             throws ServletException, IOException {
  17.         request.setCharacterEncoding("UTF-8");
  18.         response.setContentType("text/html;charset=UTF-8");
  19.         PrintWriter out = response.getWriter();
  20.         String uri = request.getRequestURI();
  21.         String action = uri.substring(uri.lastIndexOf("/"), uri
  22.                 .lastIndexOf("."));
  23.         if (action.equals("/search")) {
  24.             String[] words = { "amani", "abc", "apple", "abstract", "an",
  25.                     "bike", "byebye", "beat", "be", "bing", "come", "cup",
  26.                     "class", "calendar", "china" };
  27.             if (request.getParameter("search-text") != null) {
  28.                 String key = request.getParameter("search-text");
  29.                 if (key.length() != 0) {
  30.                     String json = "[";
  31.                     for (int i = 0; i < words.length; i++) {
  32.                         if (words[i].startsWith(key)) {
  33.                             json += "\"" + words[i] + "\"" + ",";
  34.                         }
  35.                     }
  36.                     json = json.substring(0, json.length() - 1 > 0 ? json
  37.                             .length() - 1 : 1);
  38.                     json += "]";
  39.                     System.out.println("json:" + json);
  40.                     out.println(json);
  41.                 }
  42.             }
  43.         }
  44.         out.close();
  45.     }
  46. }
package web;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.Date;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;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("/search")) {String[] words = { "amani", "abc", "apple", "abstract", "an","bike", "byebye", "beat", "be", "bing", "come", "cup","class", "calendar", "china" };if (request.getParameter("search-text") != null) {String key = request.getParameter("search-text");if (key.length() != 0) {String json = "[";for (int i = 0; i < words.length; i++) {if (words[i].startsWith(key)) {json += "\"" + words[i] + "\"" + ",";}}json = json.substring(0, json.length() - 1 > 0 ? json.length() - 1 : 1);json += "]";System.out.println("json:" + json);out.println(json);}}}out.close();}}
隐藏
代码

web.xml文件的完整代码如下所示：

copytextpop-up
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app version="2.5" 
  3.     xmlns="http://java.sun.com/xml/ns/javaee" 
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
  6.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  7.  
  8. <servlet>
  9. <servlet-name>ActionServlet</servlet-name>
  10. <servlet-class>web.ActionServlet</servlet-class>
  11. </servlet>
  12.  
  13. <servlet-mapping>
  14. <servlet-name>ActionServlet</servlet-name>
  15. <url-pattern>*.do</url-pattern>
  16. </servlet-mapping>
  17.  
  18. </web-app>
<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"><servlet><servlet-name>ActionServlet</servlet-name><servlet-class>web.ActionServlet</servlet-class></servlet><servlet-mapping><servlet-name>ActionServlet</servlet-name><url-pattern>*.do</url-pattern></servlet-mapping></web-app>
隐藏
代码
阅读全文
0 0
淘宝的柠檬 淘宝的柠檬
原创粉丝点击
热门IT博客
mysql怎么修改数据库名mysql怎么修改数据库名
算法分析的两个方面是算法分析的两个方面是
python多进程共享对象
排名优化软件点击
淘宝买兔子 吃了
网络用语98什么意思
2017nba新秀表现数据
linux c udp socket
finereport 阿里云
电商数据分析淘宝实战
python 可视化 d3.js
海南儋州网络诈骗
主力建仓优化指标
淘宝登录名可以修改吗
大数据的网络资源
阿里云计算招聘
剑三 点绛唇捏脸数据
北京大学gpa算法
node sass 安装
上海证券软件下载
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 初中学物理网 中学英语学科网英语 5156中学语文网 中学网 云南师大实验中学校园网 中宁县酒店查询预订 保利中宇广场 中安信业好贷款吗 中安信业贷款怎么样 中安信业是正规公司吗 中安信业上征信吗 中安信业怎么样 中安信业贷款可靠吗 中安信 中安消千股千评 中安消股票 中消安 消安结胶囊 601188 龙江交通股吧 601188龙江交通 龙江交通股票 600654股票 东阳光科 飞乐股份 信邦制药 北京利尔 丰原药业 美利云 浙江众成 600654股吧 600654 宝泰隆 中安科股份有限公司 中安网脉怎么样 中安网脉 中安人才网 中安网培网络安全培训 中审众环会计师事务所 中审网校 中审众环

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里