介绍:
Ajax 是什么?
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法(把原有的技术整合)。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
学习Ajax 需要 提前学习 HTML/CSS JavaScript 基础
结合的技术:
- 使用CSS和XHTML来表示
- 使用DOM模型来交互和动态显示
- 使用XMLHttpRequest来和服务器进行异步通信
- 使用javascript来绑定和调用
## Ajax 作用?
设想,没有使用Ajax有的网页需要 刷新局部 就必须要刷新整个网页 ,列如:用户名是否存在 等,这样重新刷新网页 就会让用户体验降低,而使用Ajax就可以 提高用户体验,提前提示该用户名是否被注册。
Ajax 内部的实现?
传统方式:
客户端(浏览器)从服务器加载网页完毕后,网页中的内容如果需要更改,那么就必须让浏览器重新发送一次请求到服务器,服务器接收请求并处理完毕后会把一个完整的网页返回给客户端(浏览器),浏览器将返回的整个网页内容(HTML/CSS)直接(渲染)显示给用户。
setTimeout(function(){
Location.href=’getTime.jsp’;
},1000) setInterval()
AJAX交互方式:”异步(局部数据)提交”
客户端(浏览器)从服务器加载网页完毕后,网页中的内容如果需要更改,不使用浏览器发送请求,而是使用JavaScript中的XMLHttpRequest(Ajax对象)对象发送请求到服务器,服务器接收请求并处理完毕后,只返回页面需要的内容,XMLHttpRequest对象接收服务器返回的内容后,程序员需要手动的处理返回的内容(如更新内容到页面中或处理客户端逻辑);
二者的区别:
传统方式:由浏览器发送请求,使用浏览器发送请求会导致整个页面刷新,而且需要服务器返回处理完成的整个页面,浏览器直接把页面内容展示给用户。
AJAX方式:由AJAX(XMLHttpRequest)对象发送请求,当前加载完成的页面不会被刷新,而且只需要服务器返回页面的局部数据即可,最后由AJAX接收数据,并通过编程的方式把内容添加到页面中去,从而达到局部更新的目的。
异步和同步:
同步:
当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,也就是说这时候执行的是两个线程,ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程)
异步:
当执行当前AJAX的时候会停止执行后面的JS代码,直到AJAX执行完毕后时,才能继续执行后面的JS代码。
例子:
数据请求 Get.
不带参数的get请求:
get.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<script type="text/javascript">
//执行get请求
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
function get(){
//1.创建xmlhttprequest对象
var request=ajaxFunction()
//2.发送请求
/*
参数一:代表请求的方式:get or post
参数二:代表请求的路径
参数三:代表是否异步 :true or false
**/
request.open("GET","/AjaxDemo/GetServlet",true);
request.send();
}
</script>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3><a href="" onclick="get()">这是一个Ajax的get请求页面</a></h3>
</body>
</html>
GetServlet.java
package com.web.st.servlet;
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;
public class GetServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("获得一个get请求 !");
}
/**
* @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);
}
}
运行结果:
带参数的get请求:
get.jsp
function get(){
//1.创建xmlhttprequest对象
var request=ajaxFunction()
//2.发送请求
/*
参数一:代表请求的方式:get or post
参数二:代表请求的路径
参数三:代表是否异步 :true or false
**/
//不带参数的
//request.open("GET","/AjaxDemo/GetServlet",true);
//带参数的
request.open("GET","/AjaxDemo/GetServlet?name=zhangsan&age=18",true);
//3.获取响应数据注册监听的意思。一会准备的状态发生了改变,那么就执行等号右边的方法
request.onreadystatechange=function(){
//右边表示已经能够正常处理/在判断状态码是否为200
if(request.readyState==4 && request.status==200){
alert(request.responseText);
}
}
request.send();
}
GetServlet.java
package com.web.st.servlet;
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;
public class GetServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String name=request.getParameter("name");
String age=request.getParameter("age");
System.out.println("获得一个get请求 !"+name+age);
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("收到了一个请求");
}
/**
* @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);
}
}
运行结果:
数据请求 Post.
看文档:
要是不带数据的请求 就是:
request.send();
带参数的请求:
post.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<script type="text/javascript">
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
function post(){
//1.创建xmlhttprequest对象
var request=ajaxFunction()
//2.发送请求
/*
参数一:代表请求的方式:get or post
参数二:代表请求的路径
参数三:代表是否异步 :true or false
**/
//不带参数的
//request.open("GET","/AjaxDemo/GetServlet",true);
//带参数的
request.open("POST","/AjaxDemo/GetServlet",true);
//这里使用的是post方式 带数据,那么这里要添加头,说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去,在send里面写表单数据
request.send("name=lisi&age=19");
}
</script>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>
<a href="" onclick="post()">这是一个Ajax的post请求页面</a>
</h3>
</body>
</html>
GetServlet.java
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("这是一个post请求,走的是post代码");
doGet(request, response);
}
结果:
获得参数:
在jsp中的 function post中加上:
request.onreadystatechange=function(){
//右边表示已经能够正常处理/在判断状态码是否为200
if(request.readyState==4 && request.status==200){
alert(request.responseText);
}
}
结果:
Ajax效验用户名案例:
搭建环境:
引入配置文件。
目录如下
搭建数据库:
dome.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<script type="text/javascript">
//执行get请求
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
function checkName(){
//获取输入框的值 document 整个网页
var name = document.getElementById("name").value; // value value() val val()
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open("POST" ,"/AjaxDemo/CheckServlet" , true );
//注册状态改变监听,获取服务器传送过来的数据
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
//alert(request.responseText);
var data = request.responseText;
if(data == 1){
//alert("用户名已存在");
document.getElementById("span1").innerHTML = "<font color='red'>用户名已存在!</font>";
}else{
document.getElementById("span1").innerHTML = "<font color='green'>用户名可用!</font>";
//alert("用户名未存在");
}
}
}
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name="+name);
}
</script>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" width="400">
<tr>
<td>用户名:</td>
<td><input type="text" name="name" id="name" onblur="checkName()"><span id="span1"></span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" name="password" id="password"></span>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</body>
</html>
CheckServlet.java
package com.web.st.servlet;
import java.io.IOException;
import java.sql.SQLException;
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 com.st.web.dao.AjaxDemoDao;
import com.st.web.dao.imp.AjaxDemoDaoImp;
public class CheckServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
try {
String name=request.getParameter("name");
AjaxDemoDao dao=new AjaxDemoDaoImp();
boolean isExist=dao.ChecheUserName(name);
if(isExist){
response.getWriter().println(1); //存在用户名
}else{
response.getWriter().println(2); //不存在该用户名
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/**
* @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);
}
}
AjaxDemoDao.java
package com.st.web.dao;
import java.sql.SQLException;
public interface AjaxDemoDao {
boolean ChecheUserName(String username) throws SQLException;
}
AjaxDemoDaoImp.java
package com.st.web.dao.imp;
import java.sql.SQLException;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ScalarHandler;
import com.st.web.dao.AjaxDemoDao;
import com.st.web.util.JDBCUtil02;
public class AjaxDemoDaoImp implements AjaxDemoDao{
@Override
public boolean ChecheUserName(String username) throws SQLException {
// TODO Auto-generated method stub
QueryRunner runner=new QueryRunner(JDBCUtil02.getDataSource());
String sql="select count(*) from t_user where username =?";
Long result=(Long) runner.query(sql, new ScalarHandler(),username);
return result>0;
}
}
运行结果如下: