传统的Web开发技术和Ajax技术有什么区别？

其他 2019-04-25 13:52:21 阅读次数: 0

传统的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>

猜你喜欢

转载自blog.csdn.net/qq_40948117/article/details/88953761
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022