【www.bbyears.com--js教程】
1,在ajax与后台的交互中经常会出现乱码,
解决办法: 在后台获取数据的时候要改变其编码
//获取jsp页面传递过来的userName
代码如下 复制代码 String user= request.getParameter("userName");
//使用String来改变获取到的字符集编码
String userid = new String(user.getBytes("iso8859-1"),"GBK");
2,XMLHttpRequest实现Ajax局部更新效果
Ajax用于数据的更新等操作
xmlHttpRequest的属性和方法
方法描述
abort()停止当前请求
getAllResponseHeaders()把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")返回指定首部的串值
open("method", "url")建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数
send(content)向服务器发送请求
setRequestHeader("header", "value")把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()
属性描述
onreadystatechange每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
responseText服务器的响应，表示为一个串
responseXML服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
status服务器的HTTP状态码(200对应OK，404对应Not Found(未找到)，等等)
statusTextHTTP状态码的相应文本(OK或Not Found(未找到)等等)
使用XMLHttpRequest实现Ajax效果思路;
1,创建XMLHttpRequest
2,创建回调函数callback
3,设置请求的路径
4,发送数据
5,回调函数中判断是否交互完成,是否找到页面,接受servlet返回的数据
代码实现:
Servlet代码:记得web.xml中配置
代码如下 复制代码 package ajaxDemo;
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;
/**
*
* @author Administrator 通过局部刷新来实现数据的查找Ajax
*/
public class AjaxServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
response.setContentType("text/html");
request.setCharacterEncoding("GBK");
response.setCharacterEncoding("GBK");
//获取url传递的参数
String userName = request.getParameter("userName");
System.out.println(userName);
//假设连接上数据库,判断 并给予返回值 ,ok表示可以注册,ON表示不可以注册
if ("123".equals(userName)) {
out.write("ON");
} else {
out.write("OK");
}
}
}
注意:(重点)
Jquery和Ajax实现局部更新;需要引Jquery的包
ajax提交数据不需要通过form表单提交,不需要submit,
需要自己获取表单框中的值,
Html代码
代码如下 复制代码 用户名:
密 码:
Jquery+ajax关键代码:
Jquery+ajax代码
<script type="text/javascript" src="js/jquery-1.8.3.js">
</script>
<script type="text/javascript">
//javascript中需要引入Jquery包就不能将函数写在同一级下
var xmlHttp;
function fun_user() {
//使用Jquery获取id的值
var username = $("#userName").val();
//创建XMLHttpRequest的对象,js创建对象和java类似,也是使用new
//XMLHttpRequest的open(),send(),abort(),readyState,responseText
xmlHttp = new XMLHttpRequest();
// if(xmlHttp){
// alert("创建")
// }else{
// alert("出错了");
// }
//2,创建回调函数callback
xmlHttp.onreadystatechange = callback;
//3,创建与Servlet的连接符,定义连接的方式,是否为异步,是否需要账号和密码验证
xmlHttp.open("GET", "AjaxServlet?userName=" + username, true);
//4,发送数据,数据已经通过连接方式传送,所以这里只需要发送null
xmlHttp.send(null);
}
//回调函数callback
function callback() {
//判断是否Ajax交互完成
alert(xmlHttp.readyState);
//readyState的书中状态
if (xmlHttp.readyState == 4) {
//200表示网页是否找到
if (xmlHttp.status == 200) {
//以文本的方式返回值
var xmltext = xmlHttp.responseText;
//获取提示位置
var divname = document.getElementById("divName");
//设置提示信息
divname.innerHTML = xmltext;
}
}
}
</script>
运行结果:
账号存在
账号不存在
3,js解析xml格式的数据 例子: xml动态检查用户名是否存在
后台代码:
Java代码
代码如下 复制代码 /**xml传递数据*
* @author Administrator 通过局部刷新来实现数据的查找Ajax
*/
public class AjaxServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
//xml传递数据:response.setContentType("text/xml");必须是xml的
response.setCharacterEncoding("GBK");
request.setCharacterEncoding("GBK");
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
//获取url传递的参数
//解决js与servlet之间数据的乱码问题
String userName = request.getParameter("userName");
String str =new String(userName.getBytes("iso8859-1"),"GBK");
System.out.println(str);
//修改点二:xml的返回格式必须是有开始和结束的
StringBuffer buffer = new StringBuffer();
buffer.append("
//假设连接上数据库,判断 并给予返回值 ,ok表示可以注册,ON表示不可以注册
if ("123".equals(str)) {
buffer.append(str +"用户名已存在").append("
} else {
buffer.append(str +"可以注册!!!").append("");
}
//输出StringBuffer字符串
out.print(buffer);
}
}
jsp界面代码
Jsp代码
代码如下 复制代码
<script type="text/javascript" src="js/jquery-1.8.3.js">
</script>
<script type="text/javascript">
//javascript中需要引入Jquery包就不能将函数写在同一级下
var xmlHttp;
function fun_user() {
//使用Jquery获取id的值
var username = $("#userName").val();
//创建XMLHttpRequest的对象,js创建对象和java类似,也是使用new
//XMLHttpRequest的open(),send(),abort(),readyState,responseText
xmlHttp = new XMLHttpRequest();
// if(xmlHttp){
// alert("创建")
// }else{
// alert("出错了");
// }
//2,创建回调函数callback
xmlHttp.onreadystatechange = callback;
//3,创建与Servlet的连接符,定义连接的方式,是否为异步,是否需要账号和密码验证
var url="AjaxServlet?userName=" + username;
xmlHttp.open("GET", url, true);
//4,发送请求头信息
// xmlHttp.setRequestHeader("Content-Type", "application/x-www-from-urlencoded");
//5,发送数据,数据已经通过连接方式传送,所以这里只需要发送null
xmlHttp.send(null);
// xmlHttp.send("userName=" + username);
}
//回调函数callback
function callback() {
//判断是否Ajax交互完成
// alert(xmlHttp.readyState);
//readyState的书中状态
if (xmlHttp.readyState == 4) {
//200表示网页是否找到
if (xmlHttp.status == 200) {
var xmlobj=xmlHttp.responseXML;
//
//使用document来解析返回的xml数据获取节点,返回一组元素
var domxml =xmlobj.getElementsByTagName("msg");
if(domxml.length>0){
//获取domxml的第一个节点 firstChild
var responsexml =domxml[0].firstChild;
//获取节点的值nodeValue
var nodexml=responsexml.nodeValue;
alert("长度为:"+nodexml);
//以文本的方式返回值
// var xmltext = xmlHttp.responseText;
// alert(xmltext);
}else{
alert("解析出错:"+xmlHttp.responseText);
}
}
}
}
</script>
3,js解析json数据; json格式动态检查用户名是否存在
后台关键代码;
Java代码
代码如下 复制代码 //接受数据String user= request.getParameter("userName");
String userid = new String(user.getBytes("iso8859-1"),"GBK");
System.out.println(userid);
//创建java转json的数据对象
String jsonstr="{}";
JSONObject jsonsql = JSONObject.fromObject(jsonstr);
//00001
// id: 1 2 3
// menu: 工资 奖金 会议室的申请
// href: salary.jsp money.jsp meetingRoom.jsp
//存储Jsonobject对象的队列
ArrayList
try {
//连接数据库查询用户的权限
Connection conn=DBUilt.getConn();
String consql =" select parentnode, menuname,menuhref from role_menu where parentnode in (select menuid from role_role where userid=?)";
PreparedStatement pstm=conn.prepareStatement(consql);
pstm.setString(1, userid);
ResultSet rs=pstm.executeQuery();
while( rs.next()){
//创建java转json的对象
JSONObject pstmjson = JSONObject.fromObject(jsonstr);
pstmjson.put("id", rs.getString(1));
pstmjson.put("menu", rs.getString(2));
pstmjson.put("href", rs.getString(3));
jsonlist.add(pstmjson); //创建json队列存放数据库取出来的对象
}
rs.close();
} catch (Exception e) {
e.printStackTrace();
}
//写到jsp页面
out.write(jsonlist.toString());
jsp前台代码;
Java代码
代码如下 复制代码 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
//javascript中需要引入Jquery包就不能将函数写在同一级下
var xmlHttp;
function fun_user() {
//使用Jquery获取id的值
var username = $("#userName").val();
//创建XMLHttpRequest的对象,js创建对象和java类似,也是使用new
//XMLHttpRequest的open(),send(),abort(),readyState,responseText
xmlHttp = new XMLHttpRequest();
// if(xmlHttp){
// alert("创建")
// }else{
// alert("出错了");
// }
//2,创建回调函数callback
xmlHttp.onreadystatechange = callback;
//3,创建与Servlet的连接符,定义连接的方式,是否为异步,是否需要账号和密码验证
var url="AJAXJson?userName=" + username;
xmlHttp.open("POST", url, true);
//4,发送请求头信息
// xmlHttp.setRequestHeader("Content-Type", "application/x-www-from-urlencoded");
//5,发送数据,数据已经通过连接方式传送,所以这里只需要发送null
xmlHttp.send(null);
// xmlHttp.send("userName=" + username);
}
//回调函数callback
function callback() {
//判断是否Ajax交互完成
// alert(xmlHttp.readyState);
//readyState的书中状态
if (xmlHttp.readyState == 4) {
//200表示网页是否找到
if (xmlHttp.status == 200) {
//纯文本的方式返回
var xmltext=xmlHttp.responseText;
alert(xmltext);
//以文本的方式返回值 eval将json数据解析成
//var xmltext = eval(xmlHttp.responseText);
//alert(xmltext[0].menu+"连接"+ xmltext[0].href);
}
}
}
</script>
