Ajax

于 2020-03-09 21:58:43 发布
阅读量154 收藏
点赞数
文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AJ_007/article/details/104762605
版权

AJAX

​ 1.概念：ASynchronous JavaScript And Xml 异步的JavaScript 和 Xml，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。最终目的：提高用户体验。
在这里插入图片描述

​ --异步和同步：客户端和服务器端相互通信的基础上来讲

​ 同步-客户端必须等服务器端的响应。在等待的期间客户端不能做其他操作

​ 异步-客户端不须等服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他操作

2.实现方式：

  • 原生的js实现方式(了解)

    服务器端代码：

    package edu.xalead;

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;

@WebServlet(name = "AjaxServlet",urlPatterns = "/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取请求参数
        String username = request.getParameter("username");
        //处理业务逻辑，会耗时，模拟
        try {
            Thread.sleep(5000);//睡5s
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        //2.打印username
        System.out.println(username);
        //3.响应
        response.getWriter().write("hello :"+username);
    }

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

    客户端代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input>
</body>
<script type="text/javascript">
    function fun() {
        //实现异步请求
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        }else{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.建立链接
        /**
         *  三个参数：
         *  请求方法：GET POST
         *      -get方式请求参数在url后拼接，send方法为空参
         *      -post 在send中定义参数
         *  请求路径url
         *  同步或异步，true为异步
         */
        xmlhttp.open("GET","ajaxServlet?username=tom",true);
        //3.发送请求
        xmlhttp.send();
        //4.处理服务器的响应结果
        //获取方式 xmlhttp.responseText
        //什么是否获取？服务器响应成功后获取

        //当xmlhttp对象状态盖面时，触发事件
        xmlhttp.onreadystatechange=function () {
            //判断就绪状态是否为4，再判断响应状态码是否为200及相应成功
            if(xmlhttp.readyState == 4 && xmlhttp.status==200){
                //获取服务器响应结果
                var responseText=xmlhttp.responseText;
                alert(responseText);
            }
        }

    }
</script>
</html>

  • JQeury实现方式

    1. $.ajax()
      • 语法：$.ajax({key,value})

    客户端代码：服务器端与上面原生实现的代码一致

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    function fun() {
        //使用$.ajax()发送异步请求

        $.ajax({
            url: "ajaxServlet",//请求路径
            type: "POST",//请求方式
            // data:"username=jack&age=23",//携带参数
            data:{"username":"jack","age":23},//第二种格式
            success:function (data) {
                alert(data);
            },//响应成功后的回调函数
            error:function () {
                alert("出错啦...");
            },//表示请求响应出现错误
            dataType:"text"//设置接受到的响应数据的格式
        });
    }
</script>
</html>

    1. $.get() ：发送get请求

      • 语法 ：$.get(url,[data],[callback],[type])

        -参数：

        -url:请求路径

        -data:请求参数

        -callback:回调函数

        -type:响应结果的类型

    客户端代码：服务器端与上面原生实现的代码一致

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    function fun() {
        //使用$.get()发送异步请求
        $.get("ajaxServlet",
            {username:"rose"},
            function (data){
                alert(data)
            },
            "text");
    }
</script>
</html>

      3. $.post()：发送post请求

    客户端代码：服务器端与上面原生实现的代码一致

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    function fun() {
        //使用$.get()发送异步请求
        $.post("ajaxServlet",
            {username:"haha"},
            function (data){
                alert(data)
            },
            "text");
    }
</script>
</html>

​

Arjen_ai
关注
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
Ajax详解
07-22
资源名称：Ajax详解内容简介：《Ajax 详解》电子书 chm格式，是《四天学会Ajax》一书扩展，更加详细的讲述Ajax的方方面面。 内容简要给大家说明一下：Ajax简介、使用Javaｓｃｒｉｐｔ和Ajax发出异步请求、Ajax中的...
jquery.unobtrusive-ajax.rar
05-14
2. **事件处理**：库内部监听`ajaxStart`、`ajaxSend`、`ajaxSuccess`、`ajaxError`等事件，提供了对Ajax请求生命周期的控制。开发者可以通过自定义事件处理器来扩展功能或处理错误。 3. **内容替换**：默认情况下...
ajax 检测用户名是否被占用
01-21
try { ajax = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!=’...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
ajax笔记ajax笔记ajax笔记
04-03
ajax笔记
AJAX结课项目：黑马头条-数据管理平台
最新发布
11-26
AJAX结课项目：黑马头条-数据管理平台
ajax smarty
06-15
form表单的enctype属性：设置表单的编码类型 1、enctype="application/x-... 说明：代表当前表单只能提交字符信息 2、enctype="multipart/form-data" 说明：代表当前表单不仅能提交字符信息也可以提交字节信息
Ajax高级程序设计pdf
05-16
**Ajax高级程序设计** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新，提高了用户体验，尤其...
SpringBoot整合Ajax
06-01
SpringBoot整合Ajax（无坑源码） 亲测有效，最简单实例 Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况...
C# 如何使用ajax请求
12-17
C# 使用 AJAX 请求的核心在于利用 ASP.NET AJAX 库来实现在客户端与服务器之间的异步通信。AJAX（异步JavaScript和XML）技术允许我们在不刷新整个页面的情况下更新网页的特定部分，提高用户体验。以下是详细步骤和...
AJAX 实例
12-13
AJAX 实例 为了帮助您理解 AJAX 的工作原理，我们创建了一个小型的 AJAX 应用程序: 实例 使用 AJAX 修改该文本内容 修改内容 AJAX 实例解析 上面的 AJAX 应用程序包含一个 div 和一个按钮。 div 部分用于显示来自...
致远OA-ajax.do未授权文件上传漏洞1
08-08
近日，致远OA ajaxAction 文件上传漏洞利用代码披露,由于致远OA旧版本中某些接口存在未授权访问，以及部分函数过滤不足，攻击者通过构造恶意请求，可在无
Ajax在请求过程中显示进度的简单实现
12-11
在进行Ajax调用过程中一般都具有这样的做法：显示一个GIF图片动画表明后台正在工作，同时阻止用户操作本页面（比如Ajax请求通过某个按钮触发，用户不能频繁点击该按钮产生多个并发Ajax请求）；调用完成后，图片消失...
Ajax安全技术
06-14
众所周知，Ajax具备变革互联网的潜力，但危险的新安全威胁同样随之而来。《AJAX安全技术》揭示Ajax框架与生俱来的安全弱点密集区域，为开发人员创造安全应用提供指导。每一章由一个Ajax安全谬误开始，随后即将其揭穿...
webform AJAX
12-29
WebForm AJAX 是一种在ASP.NET框架中实现异步更新页面的技术，它允许部分网页内容在不重新加载整个页面的情况下进行更新，从而提供更流畅、更快速的用户体验。本DEMO演示了如何在WebForm中应用AJAX技术，下面将详细...
快速解决ajax请求出错状态码为0的问题
12-09
今天在使用 ajax 向后台请求数据时出现错误，提示状态码为 0 ，后台采用的是 spring mvc 架构。 状态码为0是什么意思呢？查找了下，原来它意味着 （未初始化）即没有调用到send（）方法，我原来代码如下 ： $.ajax...
jQuery的ajax发送FormData的方式
01-23
// 2 使用$.ajax发送fd // 需要指定两个属性 // - processData : false // - contentType : false $.ajax({ method : 'POST', url : '/ajax_Day5/datas03.php', data : fd, success : function (data) { ...
Ajax从入门到精通.pdf
05-09
Ajax从入门到精通.pdf 本书籍旨在深入浅出地介绍 Ajax 技术，从基础知识到高级应用，全面覆盖 Ajax 的核心概念、技术原理、实现方法和实践应用。书籍的主要内容包括： 1. Ajax 概述：本书首先介绍了 Ajax 的概念、...
Ajax到JQuery Ajax学习指南
"这篇教程主要关注的是从基本的Ajax技术过渡到使用JQuery的Ajax功能的学习。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值