ajax基本调用以及说明

最新推荐文章于 2022-01-19 10:29:41 发布

小花皮猪

最新推荐文章于 2022-01-19 10:29:41 发布

阅读量6.1k

点赞数 3

分类专栏：前端(Web) Java SpringBoot 文章标签： js ajax jsp html jquery

本文链接：https://blog.csdn.net/weixin_46713508/article/details/117433124

版权

Java 同时被 3 个专栏收录

142 篇文章 10 订阅

订阅专栏

SpringBoot

46 篇文章 5 订阅

订阅专栏

前端(Web)

44 篇文章 5 订阅

订阅专栏

ajax在项目中主要用作前后端交互,用的还是很多的,开发者应该掌握,面试的时候也是经常会被问到一些基本理论,先总结以下常用理论再举例说明实例

1 什么是ajax

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2 ajax的工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求

3 ajax的优缺点

AJAX的优点

<1>AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
<2>AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
<3>AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
<4>.基于标准被广泛支持。
AJAX 基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化 Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
<5>.界面与应用分离。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

AJAX的缺点

<1>.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
<2>.AJAX的安全问题。
AJAX 技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。
<3>.对搜索引擎支持较弱。
对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
<4>.破坏程序的异常处理机制。
至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题，曾在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来做了一次试验，分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。
<5>.违背URL和资源定位的初衷。
例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
<6>.AJAX不能很好支持移动设备。
一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax，比如说我们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。

4get和post区别

Get和Post都是向服务器发送的一种请求，只是发送机制不同。

. GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的。

首先是"GET方式提交的数据最多只能是1024字节"，因为GET是通过URL提交数据，那么GET可提交的数据量就跟URL的长度有直接关系了。而实际上，URL不存在参数上限的问题，HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。注意这是限制是整个URL长度，而不仅仅是你的参数值数据长度。
GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。

get请求和post请求在服务器端的区别:

在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数.

HTTP标准包含这两种方法是为了达到不同的目的。POST用于创建资源，资源的内容会被编入HTTP请示的内容中。例如，处理订货表单、在数据库中加入新数据行等。

当请求无副作用时（如进行搜索），便可使用GET方法；当请求有副作用时（如添加数据行），则用POST方法。一个比较实际的问题是：GET方法可能会产生很长的URL，或许会超过某些浏览器与服务器对URL长度的限制。

若符合下列任一情况，则用POST方法：

请求的结果有持续性的副作用，例如，数据库内添加新的数据行。
若使用GET方法，则表单上收集的数据可能让URL过长。
要传送的数据不是采用7位的ASCII编码。

若符合下列任一情况，则用GET方法：

请求是为了查找资源，HTML表单数据仅用来帮助搜索。
请求结果无持续性的副作用。
收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。

5怎么开启异步请求,异步请求和同步区别

async:true时开启异步请求 async:false时关闭异步请求
先解释一下同步和异步的概念
同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

同步通信方式与异步通信的概念
同步通信方式要求通信双方以相同的时钟频率进行，而且准确协调，通过共享一个单个时钟或定时脉冲源保证发送方和接收方的准确同步，效率较高；
异步通信方式不要求双方同步，收发方可采用各自的时钟源，双方遵循异步的通信协议，以字符为数据传输单位，发送方传送字符的时间间隔不确定，发送效率比同步传送效率低。

使用者用于调用WEB服务的通信选择：同步或异步。
使用者可以同步或异步实现服务调用。从使用者的观点来看，这两种方式的不同之处在于：
同步——使用者通过单个线程调用服务；该线程发送请求，在服务运行时阻塞，并且等待响应。
异步——使用者通过两个线程调用服务；一个线程发送请求，而另一个单独的线程接收响应。
术语同步和异步经常与顺序和并发混淆了。后面的这两个术语与执行单独的任务必须遵循的顺序有关，而同步和异步与线程执行单个任务（如调用单个服务）的方式有关。理解同步和异步调用之间的不同的一种很好的方法是考虑崩溃恢复的后果：
同步——如果使用者在服务运行的过程中阻塞时崩溃了，当它重新启动时，将无法重新连接到正在进行的调用，所以响应丢失了。使用者必须重复调用过程，并且期望这次不会崩溃。
异步——如果使用者在发送了请求之后等待响应时崩溃了，当它重新启动时，可以继续等待响应，所以响应不会丢失。

6ajax基本参数

url: 发送请求的地址
data: 发送到服务器的数据。
dataType: 服务器返回的数据类型(json 、text、html)
type: 请求方式( get 或者 post )
success: 类型 function 请求成功后的回调函数,以及包含成功代码的字符串
error: 类型 function 请求失败后的回调函数以及包含失败代码的字符串有三个参数 XMLhttpRequest textSatus errotThrown
第一个参数:XMLhttpRequest 这里的XMLhttpRequest 是一个XMLhttpRequest 对象,该对象是一个超集，就是该对象不仅包括XMLHttpRequest对象，还包含其他更多的详细属性和信息,
这里主要有4个属性：
readyState :当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
status ：返回的HTTP状态码，比如常见的404,500等错误代码。
statusText ：对应状态码的错误信息，比如404错误信息是not found,500是Internal Server Error。
responseText ：服务器响应返回的文本信息
(获取信息的办法有 JSON.parse(XMLhttpRequest .responseText).msg 只获取返回的错误提示另一种方法XMLhttpRequest .responseJSON.msg )
第二个参数: textStatus：返回的是字符串类型，表示返回的状态，根据服务器不同的错误可能返回下面这些信息：“timeout”（超时）, “error”（错误）, “abort”(中止), “parsererror”（解析错误），还有可能返回空值。
第三个参数:errotThrown 是字符串类型，表示服务器抛出返回的错误信息，如果产生的是HTTP错误，那么返回的信息就是HTTP状态码对应的错误信息，比如404的Not Found,500错误的Internal Server Error。

7.AJAX注意点及适用和不适用场景

(1).注意点
Ajax 开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应，没有恰当的预读数据，或者对 XMLHttpRequest的不恰当处理，都会使用户感到延迟，这是用户不希望看到的，也是他们无法理解的。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。
(2).Ajax适用场景
<1>.表单驱动的交互
<2>.深层次的树的导航
<3>.快速的用户与用户间的交流响应
<4>.类似投票、yes/no等无关痛痒的场景
<5>.对数据进行过滤和操纵相关数据的场景
<6>.普通的文本输入提示和自动完成的场景
(3).Ajax不适用场景
<1>.部分简单的表单
<2>.搜索
<3>.基本的导航
<4>.替换大量的文本
<5>.对呈现的操纵

接下来进入实际例子,以用数据库的表中用户名密码登录页面为例

1 写登录页面

%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!--引入layui的css-->
    <link rel="stylesheet" href="../layui/css/layui.css">
    <!--引入jquery的js -->
    <script type="text/javascript" src="../jquery/jquery.js"></script>
    <!--引入layui的js-->
    <script type="text/javascript" src="../layui/layui.js"></script>
</head>
<body>
    用户名<input type="text" id="username"><br>
    密码<input type="password" id="password"><br>
    <input type="button" value="登录" onclick="login();">
</body>

</html>

2 ajax访问后端方法

<script>
    function login(){
        var username=$("#username").val();
        var password=$("#password").val();
        $.ajax({
            type: "post", // 提交方式
            // 返回数据类型，*注意如果返回值为String类型则需要去掉此条
            dataType: "json",
            url: "/ajaxLogin", // 访问路径
            data: { // 提交数据
                "username": username, // 前者为字段名，后者为数据 键值对应的类型
                "password": password
            },
            async:true,
            success(data) { // 成功调用的回调函数
                if(data=="1"){
                    layer.msg("登录成功",{icon:6,anim:3})
                    window.setTimeout("window.location.href='http://localhost:8080/goShowJSP'",5000);
                }else{
                    layer.msg("登录失败",{icon:5,anim:6})
                }
            },
            error() { // 调用失败
                alert("ajax出错，未能成功访问路径");
            }
        })
    }
</script>

3 后端controller中的方法这里我写两种查询,一种不妨问数据库写的死值字符串,第二种用数据库查询账号密码

3.1 账号密码都必须是admin才能登录成功

@RequestMapping("/ajaxLogin")
    @ResponseBody
    public int ajaxLogin(String username, String password){
       if(username.equals("admin") && password.equals("admin")){
           return 1;
       }else{
           return  0;
       }
    }

3.1 账号密码都必须是数据库中存储的数据才能登录成功

pom

   <!-- 数据库驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.11</version>
        </dependency>

application.properties

#连接数据库的驱动(数据源)
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#url
spring.datasource.url=jdbc:mysql://localhost:3306/db_test1?serverTimezone=GMT&allowPublicKeyRetrieval=true&useSSL=false&characterEncoding=utf8
#用户名
spring.datasource.username=root
#密码
spring.datasource.password=root
#扫描mapper文件所在的位置：
mybatis.mapper-locations=classpath:mapper/*.xml
#配置视图的前缀
spring.mvc.view.prefix=/WEB-INF/
#配置试图的后缀
spring.mvc.view.suffix=.jsp
#开启日志打印sql语句
logging.level.com.wyh.dao=debug
#简写包的路径
mybatis.type-aliases-package=com.wyh

dao:

 List<User> queryUserByUsernameAndPassword(User user);

mapper

<select id="queryUserByUsernameAndPassword" resultType="user">
         select * from t_user where username=#{username} and password=#{password}
</select>

controller

@RequestMapping("/ajaxLogin")
    @ResponseBody
    public int ajaxLogin(User user){
        System.out.println(user.getUsername());
        List<User> users = userService.queryUserByUsernameAndPassword(user);
        int size = users.size();
        if(size>0){
            return 1;
        }else{
            return  0;
        }
    }

ajax代码还是和上面一致的

<script>
    function login(){
        var username=$("#username").val();
        var password=$("#password").val();
        $.ajax({
            type: "post", // 提交方式
            // 返回数据类型，*注意如果返回值为String类型则需要去掉此条
            dataType: "json",
            url: "/ajaxLogin", // 访问路径
            data: { // 提交数据
                "username": username, // 前者为字段名，后者为数据 键值对应的类型
                "password": password
            },
            async:true,
            success(data) { // 成功调用的回调函数
                if(data=="1"){
                    layer.msg("登录成功",{icon:6,anim:3})
                    window.setTimeout("window.location.href='http://localhost:8080/goShowJSP'",5000);
                }else{
                    layer.msg("登录失败",{icon:5,anim:6})
                }
            },
            error() { // 调用失败
                alert("ajax出错，未能成功访问路径");
            }
        })
    }
</script>

小花皮猪

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
ajax基本调用以及说明

ajax在项目中主要用作前后端交互,用的还是很多的,开发者应该掌握,面试的时候也是经常会被问到一些基本理论,先总结以下常用理论再举例说明实例1 什么是ajaxAJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。2 ajax的工作原理Ajax的工作原理相当于在用户
复制链接

扫一扫