在web项目开发中,我们经常会使用到ajax,那么接下来就对其做个总结吧!
1、定义
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。
2、原生ajax
接下来将通过原生的ajax实现动态验证用户名是否可用的案例。
(1)在web 工程下创建index.jsp 文件,添加如下HTML元素实现文本框+按钮的样式布局
<%@ page language="java" import="java.util.*" pageEncoding="gbk" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<input οnblur="btn_cl(this)" id="txt"><span id="s1"></span><br>
<input type="button" value="请求" οnclick="">
</body>
</html>
(2)添加js代码,实现btn_cl()方法
<script type="text/javascript">
var xmlhttp=new XMLHttpRequest();
function btn_cl(e){
xmlhttp.onreadystatechange=processRequest;
xmlhttp.open("post","ShowMsgSerl?uname="+e.value);
xmlhttp.send();
}
function processRequest(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
if(xmlhttp.responseText=="false"){
document.getElementById("s1").innerHTML="用户已存在!";
}else{
document.getElementById("s1").innerHTML="用户名可以使用!";
}
}
}
</script>
(3)创建名为ShowMsgSerl的servlet文件实现验证并返回验证状态
package edu.zzuli.web.demo;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ShowMsgSerl extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("gbk");
PrintWriter out= response.getWriter();
List<String> user=Arrays.asList("zs","ls");
String uname=request.getParameter("uname");
for (String u : user) {
if(u.equals(uname)){
out.print(false);
}
}
}
}
接下来,运行项目即可实现ajax验证功能!
注:
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status | 200: "OK" 404: 未找到页面 |
3、jquery ajax
将通过jquery的ajax实现动态验证用户名是否可用的案例。
(1)在web 工程下添加jquery的依赖文件jquery-1.7.2.min.js,创建index.jsp 文件,添加如下HTML元素实现文本框+按钮的样式布局
<span style="font-size: 18px;"><%@ page language="java" import="java.util.*" pageEncoding="gbk" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
</head>
<body>
<input οnblur="btn_cl(this)" id="txt"><span id="s1"></span><br>
<input type="button" value="请求" οnclick="">
</body>
</html>
</span>
(2)添加js代码,实现btn_cl()方法
<pre name="code" class="java"><script type="text/javascript">
var xmlhttp=new XMLHttpRequest();
function btn_cl(e){
$.post("ShowMsgSerl",{uname:e.value},function(data){
if(data=="false"){
Document.getElementById("s1").innerHTML="用户已存在!";
}else{
Document.getElementById("s1").innerHTML="用户名可以使用!";
}
});
}
</script>
(3)创建名为ShowMsgSerl的servlet文件实现验证并返回验证状态
package edu.zzuli.web.demo;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ShowMsgSerl extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("gbk");
PrintWriter out= response.getWriter();
List<String> user=Arrays.asList("zs","ls");
String uname=request.getParameter("uname");
for (String u : user) {
if(u.equals(uname)){
out.print(false);
}
}
}
}
接下来,运行项目即可实现ajax验证功能!
注:
参数 | 描述 |
---|---|
URL | 必需。规定将请求发送到哪个 URL。 |
data | 可选。规定连同请求发送到服务器的数据。 |
function(data,status,xhr) | 可选。规定当请求成功时运行的函数。 额外的参数:
|
dataType | 可选。规定预期的服务器响应的数据类型。 默认地,jQuery 会智能判断。 可能的类型:
|
4、区别
JQuery、AJAX都是Javascript的一个框架,JQuery是轻量级的js库,他所实现的ajax不过是对底层的封装,实现了它的主旨:WRITE LESS,DO MORE。正因为的jquery 更容易实现ajax,所以项目开发中更偏向于jquery.