AJAX
解释:Asynchronous JavaScript And XML 异步的JavaScript和XML
AJAX是多个技术的联合产物 是浏览器客户端上的前端技术 PHP .NET C# Python 等
注意 :只要做web开发,B/S架构,都要学习。不管服务器编程语言
通俗理解:
看视频时,看到一半的时候,网页视频已经缓存完毕,这时候如果登录的话,只会在账户小范围等部分刷新,不用完全刷新页面。
百度地图的扩大等, 只会扩大小范围,不会涉及到全局
多个下拉列表的联动,通过ajax,可以实时更新下一个列表的内容,不需要把全部的数据发送到客户
经典案例:
Google的输入框自动补全 auto_complete
Google的谷歌地图
浏览器本身软件也是支持多线程并发的,其中的ajax请求就是一个线程,一个页面可以可以发送多个请求
传统请求:
- 请求只要一发送,浏览器数据全部清除,准备迎接新的页面
- 如果上一个请求未完成,新的请求开始,则会放弃上个请求操作
- 传统请求会刷新整个页面,会造成一定时间的空白
AJAX操作 :
- 用户登录功能,输入错误的话,会在下面提示用户输入错误等,不会重新刷新页面,只刷新下面的块元素等。
- 用户请求不会间断,用户可以继续操作。在页面的其他地方继续操作
AJAX的发送请求全靠浏览器内置的这个对象:XMLHttpRequest 对象.
使用这个对象可以在浏览器中单独起用一个线程,通过浏览器线程发送该请求,达到异步效果
base标签可以用来设置基础地址<base href=""+>
${pageCOntext.request.scheme}---协议方式 如https
${pageCOntext.request.serverName}---服务器名字
${pageCOntext.request.serverPort}--- 服务器端口
${pageCOntext.request.contextPath}--- 基础路径
发送ajax的请求包含四步:
-
创建ajax核心对象,XMLHttpRequest,(浏览器内置的,可以直接使用);
var xhr = new XMLhttpRequest();
-
注册回调函数
// 程序执行到这里的时候,后面的回调函数并不会执行,只是将回调函数注册给xhr对象 // xhr的对象发生改变的时候,后面的回调函数会执行 /* * 对象在请求和响应的过程中,从 0 到 4 * 0: 请求未初始化 * 1: 服务器连接已建立 * 2: 请求已接收 * 3: 请求处理中 * 4: 请求已完成,且响应已就绪 */ xhr.onreadystatechange = function(){ // xhr 对象改变的时候,执行该函数(回调) if(xhr.readyState == 4){// 服务端响应结束 if(xhr.status == 200){// 200表示服务器正常响应结束 // 接收返回来的响应文本 var s = xhr.responseText; alert(s); }else{ //弹出错误代码 alert(xhr.status); } } } // 给按钮对象注册一个单击事件,鼠标单击时,回调函数 myBtn.onclick = function(){}
-
开启浏览器与服务器之间的通道
method:指定请求方式为get或post url:请求路径 async:true/false 支持异步/支持同步 xhr.open("GET","/checkusername.do?username="+username,true);// 这里只开启通道,不发送请求
-
发送ajax请求
xhr.send();//这里才会发送请求
简单案例
用户名:<input type="text" name="username" onblur="checkUsername(this.value);">
<span id="nameTipMsg"></span>
<script type="text/javascript">
function checkUsername(username){
// 发送ajax请求,验证用户名是否可用
}
</script>
表单案例
JSP页面:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登陆页面</title>
</head>
<script type="text/javascript">
function userLogin() {
//发送ajax Post 请求完成登陆
// 获取用户名和密码
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var msg = document.getElementById("tipMsg");
msg.innerHTML = "正在进行身份认证,请稍候";
// 创建ajax核心对象
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 注册回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 接收服务器端发送的数据
// 假设服务器响应的是JSON格式的数据
var jsonString = xhr.responseText;
// 变成json对象
eval("var jsonObj=" + jsonString);//
if (jsonObj.success) {
// 登录成功
//document.location="list.do"
msg.innerHTML = "登录成功";
} else {
msg.innerHTML = "用户名不存在或密码错误";
}
}
}
}
// 开启通道
// 注意,例如用户注册页面,表单项可以设置为true,使用异步验证.
// 但是注册按钮必须使用同步,为的是提交按钮的时候,锁住页面,不允许操作
xhr.open("POST", "/ajax/login.do", true);
// 发送POST请求,必须使用表单提交,只有form表单才能提交post请求
// 使用post请求必须使用以下代码
// ajax post请求的乱码 需要在这里处理,注意 字符集需要和浏览器和服务器字符集相同
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded;charset=UTF-8");// 模拟表单提交数据
// 发送请求
// post 请求数据在send 中提交
xhr.send("username=" + username + "&password=" + password);
}
</script>
<body>
<h1 align="center">用户登录</h1>
<hr>
<form action="" enctype="application/x-www-form-urlencoded"></form>
用户名:<input type="text" id="username" size="40"><br>
密 码:<input type="password" id="password" size="40"><br>
<input type="button" value="登录" onclick="userLogin();" /><br>
<span id="tipMsg" style="font-size: 12px; color: red;"></span>
</body>
</html>
servlet 页面:
package cn.lenk.ajax;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import cn.lenk.bean.User;
/**
* Servlet implementation class UserLogin
*/
@WebServlet("/login.do")
public class UserLogin extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public UserLogin() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
// 获取用户名和密码
String username = request.getParameter("username");
String password = request.getParameter("password");
User user = null;
if(username !=null && password!=null) {
if(username.equals("lenks") && password.equals("123")) {
user = new User();
user.setAddress("河北省保定市");
user.setId("0001");
user.setName(username);
}
}
StringBuilder json = new StringBuilder();
if(user!=null) {
HttpSession session = request.getSession();
session.setAttribute("user", user);
json.append("{\"success\":true}");
} else {
json.append("{\"success\":false}");
}
// 响应json
response.getWriter().print(json);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}