1.Ajax工作原理及其优缺点
1.什么是AJAX?
-
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。它使用：
- 使用XHTML+CSS来标准化呈现；
- 使用XML和XSLT进行数据交换及相关操作；
- 使用XMLHttpRequest对象与Web服务器进行异步数据通信；
- 使用Javascript操作Document Object Model进行动态显示及交互；
- 使用JavaScript绑定和处理所有数据。
2.Ajax过程
- 创建XMLHttpRequest对象,也就是创建一个异步调用对象
- 创建一个新的HTTP请求,并指定其请求的方法、URL及验证信息
- 设置响应 HTTP 请求状态变化的函数
- 发送 HTTP 请求
- 获取异步调用返回的数据
- 使用 JavaScript 和 DOM 实现局部刷新
var xhr = null; // 创建异步对象
xhr = new XMLHttpRequest();
//xhr.open(get[post],url,true[false])
/*第一个参数提交方式：GET、POST最为常见。
* 第二个参数： 提交的路径
* 第三个参数：是以异步的方式还是同步的方式提交。
*/
xhr.open('get','http://localhost:4000/test',true); // true是异步，可省略
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //
xhr.onreadystatechange = function(){ // 若为同步，此代码不用写，直接在send后，用`xhr.responseText`即可。
if(xhr.readyState==4 && xhr.status==200){
/*readyState
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status
200 OK
404 Not Found*/
xhr.responseText;
xhr.responseXML.children[0].children;
JSON.parse(xhr.responseText);
}
}xhr.send(String); // 用于post传参，形式："a=1&b=2"，而get传参就在url后面用“?”拼接
3.Ajax的优缺点
优点： 可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户
不断刷新或者跳转页面，提高用户体验
缺点：对搜索引擎不友好，要实现ajax下的前进后退功能成本较大；跨域问题限制
4.jQuery中的Ajax
jQuery代码：
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
$.ajax({url: ""}) 关于传参项，下面列举一些常用的：
-
url：String，一个用来包含发送请求的URL字符串
-
data：Object、String，发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后面。必须为 Key/Value 格式。
-
dataType ：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:"xml": 返回 XML 文档，可用 jQuery 处理。 "html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载) "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 "text": 返回纯文本字符串 -
success(data, textStatus, jqXHR) Function,Array
请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。success:function (data, textStatus) { // data 可能是 xmlDoc, jsonObj, html, text, 等等... this; // 调用本次AJAX请求时传递的options参数 }
``
4.Ajax实例：验证码功能的实现
1.实验要求：
1.根据后台传过来的数据实时改变验证码
2.利用ajax实现异步刷新，页面不能跳转
2.使用技术
Spring SpringMVC Mybatis Mysql
-基本数据库知识Mysql
-Spring + SpringMVC + Mybatis
-框架MVC设计模式的应用
-前端页面（CSS+JS)
1.3开发环境
操作系统：Win10系统
开发语言：JavaEE JavaWeb
开发工具：Eclipse navicat
3.实验具体实现
- 登陆页面展示
- 具体代码
login.jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆页面</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
window.onload=function(){
var is_flag = "${is_flag}";
if(is_flag == "up_false"){
$("#span1").css('display','inline-block');
$("#span1").css('color','red');
}
if(is_flag == "cd_false"){
$("#span2").css('display','inline-block');
$("#span2").css('color','red');
}
createCode();
}
function createCode(){//ajax实现创建验证码
var divshow = $(".code");
$.ajax({
url : "create_code",//所跳转的servlet
type: "post",//提交方式
dataType : 'text',//服务器返回的数据类型
async : true,
success : function(data) {//data为后台传过来的数据
divshow.text("");//把之前的用空串代替，再添加上data
divshow.append(data);
},
error : function() {
}
});
}
</script>
</head>
<body>
<div id="head">
<img src="images/logo.png" />
<p class="text">软件学院学生信息管理系统</p>
</div>
<div id="body">
<div id="body-left">
<img src="images/login_bg.jpg">
</div>
<div id="body-right">
<h4 style="margin: 60px 0 5px 125px;"><strong style="color: #CC3300;">欢迎使用本系统</strong></h4>
<span id="span1" style="display: none">用户名或密码有误，请重新输入或<a>找回密码</a></span>
<span id="span2" style="display: none">验证码输入有误</span>
<form class="form-horizontal" style="margin: 25px auto; width: 400px;" action="login" method="post">
<div class="form-group" style="width: 600px; margin-bottom: 20px;">
<label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input style="width: 200px;" type="text" class="form-control" name = "username" id="inputEmail3" placeholder="用户名">
</div>
</div>
<div class="form-group" style="width: 600px; margin-bottom: 20px;">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input style="width: 200px;" type="password" class="form-control" name = "password" placeholder="密码">
</div>
</div>
<div class="form-group" style="width: 600px; margin-bottom: 20px;">
<label for="inputPassword3" class="col-sm-2 control-label">验证码</label>
<div class="col-sm-10" >
<input style="width: 80px; float: left;" type="text" class="form-control" name="code" placeholder="验证码">
<div class="code" id="checkCode" onclick="createCode()"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox" style="margin-left: 30px;">
<label><input type="checkbox" > 记住密码<a href="" style="margin-left: 55px;">忘记密码?</a></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10" style="width: 200px; margin-left: 100px;">
<button style="width: 200px;" type="submit" class="btn btn-danger">登陆</button>
</div>
</div>
<a href="regist.jsp" style="margin-left: 240px; margin-top: 30px;">立即注册</a>
</form>
</div>
</div>
</body>
</html>
控制器实现创建验证码
@RequestMapping("create_code")//create_codeServlet
public void create_code(HttpServletResponse res,HttpServletRequest req) throws IOException {
String result = null;//定义一个字符串用于返回前台数据
PrintWriter out = res.getWriter();
String string = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";//保存数字0-9 和 大小写字母
StringBuffer code = new StringBuffer();
for (int i = 0; i < 5; i++) {
Random random = new Random();
int index = random.nextInt(string.length());
char ch = string.charAt(index);
code.append(ch);//随机验证码的实现过程
}
req.getSession().setAttribute("Code",code.toString());
result=code.toString();//将验证码赋给要向前端返回的result
out.write(result);//将result返回给前端
}
4602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
