初识Ajax
2017-07-18 16:35
435 查看
为什么使用Ajax？
无刷新：不刷新整个页面，只刷新局部
无刷新的好处：只更新部分页面，有效利用宽带
提供连续的用户体验
提供类似C/S的互交效果，操作更方便
传统Web和Ajax的差异：
发送请求方式不同： 传统Web：浏览器发送同步请求
Ajax技术：异步引擎对象发送请求
服务器响应不同： 传统Web：响应内容是一个完整页面
Ajax技术：响应内容只是需要的数据
客户端处理方式的不同： 传统Web：需等待服务器响应完成并重新加载整个页面后用户才能进行操作
Ajax技术：可以动态更新页面中的部分内容不影响用户在页面进行其他操作
Ajax工作流程：
Ajax案例：
1.jsp
运行结果：
输入正确：
输入错误：
无刷新：不刷新整个页面，只刷新局部
无刷新的好处：只更新部分页面，有效利用宽带
提供连续的用户体验
提供类似C/S的互交效果，操作更方便
传统Web和Ajax的差异：
发送请求方式不同： 传统Web：浏览器发送同步请求
Ajax技术：异步引擎对象发送请求
服务器响应不同： 传统Web：响应内容是一个完整页面
Ajax技术：响应内容只是需要的数据
客户端处理方式的不同： 传统Web：需等待服务器响应完成并重新加载整个页面后用户才能进行操作
Ajax技术：可以动态更新页面中的部分内容不影响用户在页面进行其他操作
Ajax工作流程：
Ajax案例：
package cn.happy.servlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* Created by java on 2017/7/17.
*/
@javax.servlet.annotation.WebServlet(name = "Firservlet")
public class Firservlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String uname=request.getParameter("uname");
if(uname.equals("admin")){
response.getWriter().write("true");
}else{
response.getWriter().write("false");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}1.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
/* $("[name=uname]").blur(function(){
$.ajax({
url:"/Firservlet",
type:"POST",
data:"uname="+$("[name=uname]").val(),
success:function (data) {
$("#msg").html(data);
}
})
})*/
$("[name=uname]").blur(function(){
//向servlet发送一个ajax
//
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP")
}
//能发送请求的方式 目标地址 是否异步 true同步
xhr.open("post","/Firservlet",true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var date=xhr.responseText;
$("#msg").html(date);
}
};
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("uname="+$("[name=uname]").val());
})
})
</script>
</head>
<body>
<input name="uname"/><span id="msg"></span>
</body>
</html>运行结果：
输入正确：
输入错误：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 