Ajax学习札记01-简单实现数据异步交互
日期：2014-05-16 浏览次数：20658 次
Ajax学习笔记01-简单实现数据异步交互
Ajax的简单实现：
①．Demo-1：以简单数据段的形式返回给前台页面:
页面代码：index.html
后台servlet代码：
1. AjaxServer---以out.println()的形式往前台输出数据段，并不是刷新页面
Import…
Js文件代码：
①. 利用Jquery简单实现ajax与后台服务器的交互：
//定义用户名校验的方法
Demo1可以实现数据以字符串的形式与服务器进行数据交互，其实js文件也去掉注释，利用jquery链式编程的思想，也可以简单的写为：verity1.js
function verify(){
var userName = $("#userName").val();
$.get("AjaxServer?name="+userName,null,function(data){
$("#result").html(data);
Ajax的简单实现：
①．Demo-1：以简单数据段的形式返回给前台页面:
页面代码：index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/verify.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
</script>
<title>用户名验证</title>
</head>
<body>
用户名校验ajax实例，请输入用户名：<br/>
<!--
<form action="AjaxServer" method="post">
用户名：<input type="text" name="name"/>
<input type="submit" value="检验"/>
</form>
-->
<!--ajax可以不需要使用表单来进行数据提交，因此不用写表单标签 -->
<!--ajax方式不需要name属性，需要一个id的属性-->
用户名：<input type="text" id="userName"/>
<input type="button" value="检验一下" onclick="verify()"/>
<!--这个div用于存放服务器端返回的信息开始为空，id属性利用dom的方式找到某个节点-->
<div id="result"></div>
</body>
</html>
后台servlet代码：
1. AjaxServer---以out.println()的形式往前台输出数据段，并不是刷新页面
Import…
/**
* Created by IntelliJ IDEA.
* User: 赵光鹏
* Date: 2011-11-16
* Time: 15:35:55
* Alt+enter 导入包修复的功能
* To change this template use File | Settings | File Templates.
*/
public class AjaxServer extends HttpServlet{
@Override
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
//解决乱码问题,一定要在获取getWriter对象之前
httpServletResponse.setCharacterEncoding("utf-8");
httpServletResponse.setContentType("text/html;charset-utf-8");
PrintWriter out = httpServletResponse.getWriter();
//1.取页面端传过来的页面信息
String old = httpServletRequest.getParameter("name"); //name是从js中定义的url中参数获取的
// String name = new String(old.getBytes("iso8859-1"),"utf-8");
String name = URLDecoder.decode(old,"UTF-8");
System.out.println("转换编码前"+old);
System.out.println("转换编码前"+old);
//2.检查参数是否有问题
if(name==null||name.length()==0){
out.println("用户名不能为空");
}else{
//3. 校验操作
if(name.equals("guangpeng")){
//4 .和传统应用不同，这一步是将用户感兴趣的数据返回给页面段，而不是将新的页面传递给用户
out.println("欢迎您"+name+"!");
} else{
out.println(name+"--11用户尚未注册，请先注册！");
}
}
}
@Override
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
}
Js文件代码：
①. 利用Jquery简单实现ajax与后台服务器的交互：
//定义用户名校验的方法
function verify(){
// var url = "AjaxServer?name="+encodeURI(encodeURI($("#userName").val()));
/*
* jquery链式编程
* var userName = $("#userName").val();
* */
//jquery返回都是jquery对象，可以继续在上面执行其他的方法
var jqueryObj = $("#userName");
//获取节点的值
var userName = jqueryObj.val();
// alert(userName);
//2.将文本框中的数据发送给服务器段的servlet
//使用jquery的XMLHTTPrequest对象请求的封装
$.get("AjaxServer?name="+userName,null,callback);
//
}
//回调函数，是数据异步交互的一个体现
function callback(data){
//3. 接收服务器端返回的数据
// alert("服务器的数据回来了！！！");
//alert(data);
$("#result").html(data);
//4.将服务器返回的数据动态的显示在网页上面
}
Demo1可以实现数据以字符串的形式与服务器进行数据交互，其实js文件也去掉注释，利用jquery链式编程的思想，也可以简单的写为：verity1.js
function verify(){
var userName = $("#userName").val();
$.get("AjaxServer?name="+userName,null,function(data){
$("#result").html(data);
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
