传统的Web开发技术和Ajax技术有什么区别?
无论使用哪种开发技术,流程都是先有客户端发送HTTP请求,然后由服务器对请求生成响应。但传统的Web开发技术和Ajax技术之间还是存在很多差异的。
差异一:发送请求方式不同。
传统Web应用通过浏览器发送请求,而Ajax技术则是通过JavaScript的XMLHTTPRequest对象发送请求。
差异二:服务器响应不同。
针对传统的Web应用,服务器的响应时一个完整的页面,而采用Ajax技术后,服务器的响应只是需要的数据。
差异三:客户端处理的响应方式不同。
传统的Web应用发送请求后,浏览器将等待服务器响应完成后重新加载整个页面。而采用Ajax技术后,浏览器不再专门等待请求的响应,而只是通过Javascript动态更新页面中需要跟新的部分。
要实现发送get/post请求到服务器,并处理文本方式响应,需要以下4个步骤实现
1、创建XMLHttpRequest对象
2、设置回调函数
3、初始化XMLHttpRequest对象
4、发送请求
使用get发送请求
package servlet;
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 java.io.IOException;
import java.io.PrintWriter;
/**
*使用get发送请求的servlet
*/
@WebServlet(name = "LoginServlet",urlPatterns = "/loginServlet")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name=request.getParameter("name");
//System.out.println(name);
boolean userd=false;
if("tom".equals(name)){
userd=true;
}
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
out.print(userd);
out.flush();
out.close();
}
}
使用get发送请求的jsp页面
<%--
Created by IntelliJ IDEA.
User: Aston_Marty
Date: 2019/4/1
Time: 10:32
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<form action="">
用户名:<input id="name" type="text" name="username" value=""
onblur="checkUserName()" ><span id="nameDiv"></span>
</form>
<script src="../js/jquery-1.12.4.js"></script>
<script type="text/javascript">
function checkUserName() {
//1、创建xmlHttpRequset
if(window.XMLHttpRequest){
xMLHttpRequest=new XMLHttpRequest();//返回为true说明新版本的浏览器
}else{
//返回值为false说明是老版本IE浏览器
xMLHttpRequest=new ActiveXObject("microsoft.XMLHTTP")
}
//2、设置回调函数
xMLHttpRequest.onreadystatechange=callBack;
//3、初始化XMLHttpRequest组件 使用get发送请求
var url="/loginServlet?name="+$("#name").val();//服务器端URL地址,name为从“用户名”文本框获取的值
xMLHttpRequest.open("GET",url,true);
//4、发送请求
xMLHttpRequest.send(null);
//在回调函数callBack()中处理服务器响应的关键代码
function callBack() {
if(xMLHttpRequest.readyState==4 && xMLHttpRequest.status==200){
var data=xMLHttpRequest.responseText;
if(data=="true"){
$("#nameDiv").html("用户名已被使用!")
}else{
$("#nameDiv").html("用户名可以使用!")
}
}
}
}
</script>
</body>
</html>
使用post发送请求的servlet页面
package servlet;
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 java.io.IOException;
import java.io.PrintWriter;
@WebServlet(name = "LoginServlet",urlPatterns = "/loginServlet")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
request.setCharacterEncoding("utf-8");
String name=request.getParameter("name");
boolean userd=false;
if("tom".equals(name)){
userd=true;
}
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
out.print(userd);
out.flush();
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
doPost(request,response);
}
}
使用post发送请求的jsp页面
<%--
Created by IntelliJ IDEA.
User: Aston_Marty
Date: 2019/4/1
Time: 10:32
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<form action="">
用户名:<input id="name" type="text" name="username" value=""
onblur="checkUserName()"><span id="nameDiv"></span>
</form>
<script src="../js/jquery-1.12.4.js"></script>
<script type="text/javascript">
function checkUserName() {
//1、创建xmlHttpRequset
if(window.XMLHttpRequest){
xMLHttpRequest=new XMLHttpRequest();//返回为true说明新版本的浏览器
}else{
//返回值为false说明是老版本IE浏览器
xMLHttpRequest=new ActiveXObject("microsoft.XMLHTTP")
}
//2、设置回调函数
xMLHttpRequest.onreadystatechange=callBack;
//3、初始化XMLHttpRequest组件
//使用post发送请求
var url="/loginServlet";//服务端URL地址
xMLHttpRequest.open("POST",url,true);
xMLHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var userName="name="+document.getElementById("name").value;//需要发送的数据信息
//发送请求
xMLHttpRequest.send(userName);
//在回调函数callBack()中处理服务器响应的关键代码
function callBack() {
if(xMLHttpRequest.readyState==4 && xMLHttpRequest.status==200){
var data=xMLHttpRequest.responseText;
if(data=="true"){
$("#nameDiv").html("用户名已被使用!")
}else{
$("#nameDiv").html("用户名可以使用!")
}
}
}
}
</script>
</body>
</html>
使用Ajax发送请求的servlet页面
package servlet;
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 java.io.IOException;
import java.io.PrintWriter;
@WebServlet(name = "LoginServlet",urlPatterns = "/loginServlet")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
request.setCharacterEncoding("utf-8");
String name=request.getParameter("name");
boolean userd=false;
if("tom".equals(name)){
userd=true;
}
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
out.print(userd);
out.flush();
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
doPost(request,response);
}
}
使用Ajax发送请求的jsp页面
<%--
Created by IntelliJ IDEA.
User: Aston_Marty
Date: 2019/4/1
Time: 10:32
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<form action="">
用户名:<input id="name" type="text" name="username" value="" ><span id="nameDiv"></span>
</form>
<script src="../js/jquery-1.12.4.js"></script>
<script type="text/javascript">
//使用ajax异步刷新
/*$(function () {
$("#name").blur(function () {
$.ajax({
"url":"/loginServlet",//要提交的URL路径
"type":"POST", //发送请求的方式
"data":"name="+$("#name").val(), //要发送到服务器的数据
"dataType":"text", //指定返回的数据格式
"success":callBack, //响应成功后执行的代码
"error":function () { //请求失败后执行的代码
alert("用户名验证出现错误");
}
})
})
});
//响应成功时的回调函数
function callBack(data) {
if(data=="true"){
$("#nameDiv").html("用户名已被使用!")
}else{
$("#nameDiv").html("用户名可以使用!")
}
}
</script>
</body>
</html>