Ajax

最新推荐文章于 2022-06-19 13:50:53 发布
最新推荐文章于 2022-06-19 13:50:53 发布
阅读量97 收藏 3
点赞数 1
分类专栏： 学习笔记 文章标签： ajax js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beast___/article/details/116234670
版权

Ajax基础

概念

ASynchronous JavaScript And XML （异步的JavaScript 和 XML）

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

好处

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。所以Ajax可以大大提升用户的体验。

异步和同步的区别

在客户端和服务器端相互通信的基础上：

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

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

实现方式

1.原生的JS实现方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js实现Ajax</title>
    <script>

        function fun() {
            //发送异步请求
            
            //1.创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
            }

            //2.建立连接
            //使用GET请求方式时，请求参数写在请求路径后用?隔开
            xmlhttp.open("GET","ajaxServlet?username=tom",true);
            //使用POST请求方式时，请求参数写在send()中
            //xmlhttp.open("GET","ajaxServlet",true);
            //3.发送请求
            //GET
            xmlhttp.send();
            //POST
            //xmlhttp.send("username=tom");
            //4.接收并处理来自服务器的响应结果
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }

        }

    </script>
</head>
<body>

    <input type="button" value="发送异步请求" onclick="fun();">

</body>
</html>

2.JQuery实现方式

2.1 $.ajax()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery实现Ajax方式一</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>

        function fun() {

            //使用$.ajax()发送异步请求
            $.ajax({
                url:"ajaxServlet",  //请求路径
                type:"POST",        //请求方式
                data: {"username":"jack","age":"18"},  //请求参数
                success:function (data) {
                    alert(data);
                },//响应成功后的回调函数
                error:function () {
                    alert("出错了...");
                },//响应请求出错后会执行的的回调函数
                dataType:"json"     //设置接收到的响应数据的格式

            });
        }

    </script>
</head>
<body>

    <input type="button" value="发送异步请求" onclick="fun();">

</body>
</html>
2.2 $.get()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery实现Ajax方式二</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>

        function fun() {

            //使用$.get()发送异步请求
            // 参数：
			//	* url：请求路径
			//	* data：请求参数
			//	* callback：回调函数
			//	* type：响应结果的类型
            $.get("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");
            
        }

    </script>
</head>
<body>

    <input type="button" value="发送异步请求" onclick="fun();">

</body>
</html>
2.3 $.post()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery实现Ajax方式三</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>

        function fun() {


            //使用$.post()发送异步请求(参数与$.get()一致)
            $.post("ajaxServlet",{username:"rose"},function (data) {
                 alert(data);
            },"text");
            
        }

    </script>
</head>
<body>

    <input type="button" value="发送异步请求" onclick="fun();">

</body>
</html>
beast___
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
ajax
huangyh技术栈
09-28 3万+
1.1 什么是ajax: Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新...
Ajax详解
07-22
资源名称：Ajax详解内容简介：《Ajax 详解》电子书 chm格式，是《四天学会Ajax》一书扩展，更加详细的讲述Ajax的方方面面。 内容简要给大家说明一下：Ajax简介、使用Javaｓｃｒｉｐｔ和Ajax发出异步请求、Ajax中的...
看这一篇就够了！-Ajax详解
Oriental_的博客
03-15 16万+
今天来聊一聊前后端交互的重要工具Ajax 结合上次跟大家分享的前后端交互基础，如果还没有看过的童鞋，以下是传送门 前后端交互详解 AJAX - 到底什么是Ajax? ajax 全名 async javascript and XML 是前后台交互的能⼒ 也就是我们`客户端给服务端发送消息的⼯具，以及接受响应的⼯具 是⼀个 默认异步执⾏机制的功能AJAX分为同步（async = false...
AJAX 详解
06-19 2万+
Ajax基础知识，及常见问题详解
Ajax请求的五个步骤
热门推荐
chaopingyao的博客
06-02 17万+
Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。 2、同步与异步的区别 同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。 异步提交：当用户发送请
AJAX简介
xpmhhh的博客
03-20 6847
AJAX: 全称Asynchronous JavaScript And XML，即异步JS和XML。 通过AJAX可以在浏览器中向服务器发送异步请求。 最大的优势：无刷新的获取数据。 Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 XML: 可扩展标记语言，被设计用来传输和存储数据。 与HTML的区别：HTML中都是预定义的标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。 以前Ajax是用XML格式的字符串进行数据交换，现在已经被JSON取代了。
Ajax请求
weixin_45030426的博客
03-25 1万+
ajax请求简介： ajax是利用前端的技术，向服务器发送一个异步请求 原有的请求在请求后需要刷新整张页面，
AJAX
风间琉璃の博客
08-04 4015
AJAX AJAX 不是一种新的编程语言而是一种使用现有标准的新方法，与服务器交换数据并更新部分网页的新技术（不用重新加载整个界面）。 AJAX = 异步JavaScript和xml。 1.创建AJAX对象 XMLHttpRequest 对象用于在后台与服务器交换数据 var xhr = new XMLHttpRequest(); 老版本的ie var xhr = new ActiveXObj...
Ajax 封装
weixin_47505105的博客
03-09 4894
介绍了原生ajax存在的问题，以及一步步完善对ajax进行封装
java Ajax入门
qq_54088719的博客
12-01 7322
java Ajax入门 文章目录java Ajax入门前言一、同步和异步二、Ajax的使用JavaScript方法JQuery方法总结 前言 接下来整理一下Ajax相关的内容，AJAX（asynchronous js and xml），即异步的JavaScript和xml，它的主要作用就是让页面不必等待服务器返回整个页面信息，而可以通过异步的方式给服务器发送数据和获取数据，对页面进行局部刷新，是一种提高用户体验的技术。 一、同步和异步 同步和异步的主要区别如下； （1）同步：一个响应结束后才能发送下
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
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 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），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况...
AJAX 实例
12-13
AJAX 实例 为了帮助您理解 AJAX 的工作原理，我们创建了一个小型的 AJAX 应用程序: 实例 使用 AJAX 修改该文本内容 修改内容 AJAX 实例解析 上面的 AJAX 应用程序包含一个 div 和一个按钮。 div 部分用于显示来自...
致远OA-ajax.do未授权文件上传漏洞1
最新发布
08-08
近日，致远OA ajaxAction 文件上传漏洞利用代码披露,由于致远OA旧版本中某些接口存在未授权访问，以及部分函数过滤不足，攻击者通过构造恶意请求，可在无
Ajax技术深度探索
"ajax in Action" 《Ajax in Action》是由Dave Crane、Eric Pascarello与Darren James合著的一本技术书籍，专门探讨Ajax（Asynchronous JavaScript and XML）技术在实际开发中的应用。这本书由Manning出版社出版，...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值