知识点列表
编号名称描述级别
1 练习：级联下拉列表掌握使用Ajax完成级联下拉列表的写法**
2 ajax技术的优点了解*
3 JSON 掌握JSON技术**
4 JQuery 理解并掌握JQuery框架，对比prototype的使
用，在今后开发中多加应用，提高开发效率。
**
jquery字符串截取
注："*"理解级别"**"掌握级别"***"应用级别
目录
1. 练习：级联下拉列表** ................................................................................................. 错误！未定义书签。
1.1. 【案例1】级联下拉列表 (3)
2. ajax技术的优点* ........................................................................................................... 错误！未定义书签。
3. Json ** (6)
3.1. 知识点 (6)
3.2. 课堂练习 (21)
4. JQuery ** (31)
4.1. 知识点 (31)
1.练习：级联下拉列表**
【案例1】级联下拉列表**
1)city.jsp
<%@ page contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript"
src="js/prototype-1.6.0.3.js"></script>
<script type="text/javascript">
function getXmlHttpRequest(){
var xhr = null;
if((typeof XMLHttpRequest)!='undefined'){
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
function change(v1){
var xhr = getXmlHttpRequest();
xhr.open('post','city.do',true);
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
/
/服务器返回yy，岳阳;cs，长沙;hh，怀化
adyState == 4){
var txt = sponseText;
var arr = txt.split(';');
$('s2').innerHTML = '';
for(i=0;i<arr.length;i++){
var arr1 = arr[i];
var arr2 = arr1.split(',');
var op = new Option(arr2[1],arr2[0]);
$('s2').options[i] = op;
}
}
};
xhr.send('name=' + v1);
}
</script>
</head>
<body >
<select id="s1"
onchange="change(this.value);">
<option value="hn">湖南</option>
<option value="bj">北京</option>
</select>
<select id="s2" >
</select>
</body>
</html>
2)ActionServlet
package web;
import java.io.IOException;
import java.io.PrintWriter;
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 {
String uri = RequestURI();
String path = uri.substring(uri.lastIndexOf("/"),
uri.lastIndexOf("."));
response.setContentType("text/html;charset=utf-8");
PrintWriter out = Writer();
if(path.equals("/city")){
String name = Parameter("name");
if(name.equals("hn")){
out.println("yy，岳阳;hh，怀化;cs，长沙");
}else if(name.equals("bj")){
out.println("cy，朝阳;hd，海淀;dc，东城;xc，西城");
}
}
out.close();
}
}
3)访问localhost:8080/web13_ajax/city.jsp
2.ajax技术的优点*
1)页面无刷新
2)不打断用户的操作，用户的体验好。
3)按需获取数据，浏览器与服务器之间数据的传输量减少。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。