3、原生JS的AJAX、jQuery方式的AJAX（配合Tomcat服务器）

最新推荐文章于 2024-09-01 19:13:21 发布
最新推荐文章于 2024-09-01 19:13:21 发布
阅读量355 收藏 1
点赞数 2
分类专栏： jQuery AJAX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ShawnYue_08/article/details/107675089
版权

文章目录

原生AJAX请求

在演示AJAX请求时需要一个WEB服务器支持，这里选择Tomcat服务器。

新建Web项目，配置Tomcat环境，编写Servlet代码。

package org.westos.login;

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.util.Enumeration;
import java.util.HashMap;
import java.util.Map;

/**
 * @author lwj
 * @date 2020/7/28 15:45
 */
@WebServlet(value = "/login", name = "LoginServlet")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Map<String,String> map = new HashMap<>();
        Enumeration<String> parameterNames = request.getParameterNames();
        while (parameterNames.hasMoreElements()) {
            String key = parameterNames.nextElement();
            String value = request.getParameter(key);
            map.put(key,value);
        }
        // 设置允许跨域
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.getWriter().write(map.toString());
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

@WebServlet：value属性代表请求路径，name属性代表这个Servlet的名称。

在响应中添加响应头，Access-Control-Allow-Origin：*，代表允许跨域请求。

GET

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        var ele = document.getElementById('btn');
        ele.onclick = function() {
            var xhr = new XMLHttpRequest();
            // 请求本地的web项目，但是也是跨域请求
            xhr.open('get', 'http://127.0.0.1:8081/login?username=john&password=123456', true);
            // GET请求，参数封装在url的后面
            xhr.send();

            // 接收服务端响应
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.response);
                }
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

POST

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#" method="POST">
        用户名：<input type="text" name="username"><br>
        密码：<input type="password" name="password"><br>
        <input type="submit" value="提交">
    </form>
    <script>
        document.getElementsByTagName('form')[0].onsubmit = function(e) {
            // 阻止表单的默认提交行为
            e.preventDefault();

            var username = document.getElementsByTagName('input')[0].value;
            var password = document.getElementsByTagName('input')[1].value;

            const xhr = new XMLHttpRequest();
            xhr.open('POST','http://127.0.0.1:8081/login', true);

            // 设置POST请求的请求头
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

            let s = `username=${username}&password=${password}`;
            // ES6中可以使用EL表达式和``来代替+拼接字符串
            xhr.send(s);

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.response);
                }
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

jQuery方式的AJAX请求

为了满足客户端需要的数据格式为"json"，那么Tomcat服务器端需要返回一个"json"字符串。

新建一个Servlet，返回"json"格式的字符串。

package org.westos.login;

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.util.Enumeration;

/**
 * @author lwj
 * @date 2020/7/29 20:13
 */
@WebServlet(name = "RegisterServlet", value = "/register")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setHeader("Access-Control-Allow-Origin", "*");
        // 为了给客户端返回JSON字符串，手动拼接一个固定的JSON字符串，而不是采用request的参数
        String s = "{\"username\":\"johhn\",\"password\":\"zxcvbnm\"}";
        response.getWriter().write(s);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

GET

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $('button').first().on('click', function () {
            $.ajax({
                method: "GET",
                url: "http://127.0.0.1:8081/register",
                data: {
                    username: 'Seven',
                    password: 'tsy'
                },
                success: function (resData) {
                    console.log("Hi");
                    console.log(resData);
                },
                error: function (error) {
                    console.log("Hello");
                    console.log(error);
                },
                dataType: 'json'
                // 规定了服务器返回的数据格式
            })
        });

        $('button').last().on('click', function () {
            $.get({
                url: "http://127.0.0.1:8081/register",
                data: {
                    num: 1
                },
                success: function (res) {
                    console.log(res);
                },
                dataType: "json"
            });
        })
    </script>
</body>

</html>

在这里插入图片描述

在这里插入图片描述

POST

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $('button:first').click(function(){
            $.ajax({
                method:"post",
                url:"http://127.0.0.1:8081/register",
                data:{
                    username:'Seven',
                    password:'tsy'
                },
                success:function(res){
                    console.log('Hi');
                    console.log(res);
                },
                error:function(error){
                    console.log('Hello');
                    console.log(error);
                },
                dataType:"json"
            });
        });

        $('button:last').click(function(){
            $.post({
                url:'http://127.0.0.1:8081/register',
                data:{
                    username:'Seven',
                    password:'tsy'
                },
                success:function(res){
                    console.log(res);
                },
                dataType:"json"
            });
        });
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

ShawnYue_08
关注
专栏目录
Ajax跨域访问Tomcat服务器
繁城落叶
12-16 5023
在学习jQuery的时候进行到AJax时，需要与服务器进行交互练习。我毫不犹豫的打开了我的Tomcat服务器运行起来，并使用普通的ajax方法访问运行中的服务器网址的时候，发现 XMLHttpRequest对象使用open和send后，在与onreadystatechange绑定的函数中检查到readyState为4，这说明请求已经完成且相应已经就绪，但是此时的status却提示为0。但是我查看
第9讲：使用ajax技术实现增删改查及分页显示功能（jQuery）
软件之家的博客
06-23 1350
本讲内容首先讲解jQuery对ajax的支持，分别讲解$.post,$.get,$.ajax等方法，这些方法的参数，使用方法及区别。最后对ajax的综合应用举例：在同一个页面实现新增，修改，删除学校资料，分页列表等功能，前端使用html静态页面，使用MySQL数据库，后台使用servlet技术实现。
纯js封装原生ajax
04-04
纯js封装原生ajax，XMLHttpRequest/ActiveXObject对象封装
js原生Ajax代码
Wangdiankun的博客
02-26 472
var Ajax = { get: function(url,fn){ // XMLHttpRequest对象用于在后台与服务器交换数据 var xhr=new XMLHttpRequest(); xhr.open('GET',url,false); xhr.onreadystatechange=function(){ ...
前端技术(六)—— AJAX详解
最新发布
kejizhentan的博客
09-01 1820
ajax详解
Js原生Ajax
风继续吹
06-21 558
Ajax技术概述： 它是一种允许浏览器与服务器之间通信而无须刷新整个页面的局部交互技术。在Ajax中，数据在客户端与服务器之间独立传输，服务器不在返回整个页面。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。 同步和异步： 同步请求：当浏览器发出去请求之后，只有当服务器端完成响应后回来，才能做其他事情。这个过程中，浏览器处于等待状态。什么都不能干只能一直等着，在那卡着） 异步请求：当浏览器发出去请求之后，等待服务器响应。在此期间，浏览器不阻塞。（客户端可以去做其他事
js原生ajax
你的微笑像拥抱
02-26 8696
AJAX 准备工作-服务器环境的搭建 ajax可以在本地使用，但是牵扯到不同源问题，需要跨域操作。下面是两个文件的代码，test.html放在桌面上，cors.php放在搭好的服务器上面，我这里配置的端口号是9096，端口号可以自行配置，默认的话是80端口，双击打开test.html文件，控制台会输出下面信息 {"code":200,"msg":"success"} test....
原生JS中的Ajax
莫不静好
09-26 517
一、什么是AJAX Ajax即“Asynchronous Javascript And XML”(异步Javascript和XML)，是指一种创建交互式应用的网页开发技术。 Ajax不是新的编程语言，而是一种使用现有标准的新方法。 Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器...
ajax jQuery demo
03-16
Ajax（Asynchronous JavaScript and XML）技术允许我们在不刷新整个网页的情况下，通过JavaScript与服务器进行异步数据交换，从而提升用户体验。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理以及...
Java——Ajax+Tomcat完成异步请求
邵鸿鑫
10-30 4639
Ajax最为网页异步交互技术相信大家并不陌生，这里我也不做过多介绍，详情点击（百度百科）。很多框架也封装了Ajax技术，使用起来更加简单，比如jQuery等等，这里为了了解原理，我们使用原生的Ajax。   我们以注册用户时，判断用户ID是否存在为例，实现一个最简单的异步请求，当我们鼠标离开输入框时自动判该用户ID是否存在，同时我们可以继续填写其他注册信息。 界面如下： HTML代码
tomcat-servlet-ajax最基础例子
02-13
在这个基础实例中，我们将探讨如何在Tomcat服务器上使用Servlet和Ajax技术实现一个简单的交互功能。Tomcat是一个流行的开源Java Servlet容器，它允许开发者运行和部署基于Java的Web应用程序。而Ajax（Asynchronous ...
Ajax与Servlet ,Tomcat结合分析与测试
u011252234的专栏
05-05 169
&lt;script type='text/javascript'&gt; //实现功能，对用户名是否被注册进行验证 //验证时间onblur //服务器是tomacat与servlet结合作为服务器端 //浏览器在ff与chrome下测试，版本应就是近期才装的 //服务器端假设各位已会 //ajax函数 var ajax=function(ur...
原生js实现ajax
陈浩的博客
05-19 335
Ajax的原理： 简单来说就是 通过XmlHttpRequest对象向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作DOM更新页面的技术。 一般来说，大家可能都会习惯用JQuery提供的Ajax方法，但是用原生的js怎么去实现Ajax方法呢？ JQuery提供的Ajax方法： $.ajax({ url: , type: '', dataType: '', data: { }, success: f.
原生js实现Ajax
左安青的博客
10-22 267
一般来说，大家可能都会习惯用JQuery提供的Ajax方法，但是用原生的js怎么去实现Ajax方法呢？ JQuery提供的Ajax方法： $.ajax({ url: , type: "", dataType: "", data: { }, success: function(){ }, erro...
js原生ajax的使用
m0_49022755的博客
06-07 163
当我们需要更新某一页面中的某一部分数据，如果我们刷新整个页面，就会使得用户得不到良好的体验，这是我们可以使用ajax技术。 ajax Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。又称局部刷新技术，可以在不加载整个页面的情况下于服务器交换数据。属于异步请求，不会影响前台页面 常用方法：open(method,url,async)；method：请求的类型；GET 或 POST；url：文件在服务器上的位置；async：true（异步）或 fals
原生JS Ajax操作
chongxiaocheng的博客
04-29 1396
原生JS Ajax操作  Ajax不是一个新技术！是前端页面与后台数据交互的一种手段 Ajax用在什么地方？             需要用向服务器请求数据的环境中！             核心：操作XMLHttpRequest对象         操作步骤：         **1. 创建XMLHttpRequest对象         **2. 打开和服
js中的原生Ajax总结
CSDN_of_wmy的博客
06-16 507
一、什么是Ajax？ AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 通过 AJAX，JavaScript 无需等待服务器的响应，而是：在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理 (1)ajax的优点： 1.减少冗余请求和响应对服务...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值