JavaWeb_12_一小时掌握Ajax

最新推荐文章于 2024-08-18 10:54:05 发布

牛魔瘦了

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量97

点赞数 1

文章标签： ajax javascript ecmascript

本文链接：https://blog.csdn.net/yinuo_chao/article/details/123378316

版权

一小时掌握Ajax

点击跳转一小时掌握Ajax 视频

在这里插入图片描述

人生，一站有一站的风景，一岁有一岁的味道，你的年龄应该成为你生命的勋章而不是你伤感的理由。

什么是AJAX？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

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

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用 AJAX 创造出动态性极强得 web 界面：当您在谷歌的搜索框输入关键字时，

JavaScript会把这些字符发到服务器，然后服务器会返回一个搜索建议的列表。

就和国内的百度的搜索框一样：

在这里插入图片描述

传统的网页（即不用ajax技术的网页），想要更新内容或者提交一个表单，都需要重新加载整个网页。

使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。

使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

C/S

增加B/S的体验性

B/S：未来的主流，并且会爆发式的持续增长；

产品链：H5 + 网页 + 客户端 + 手机端（Android、IOS）+ 小程序

利用AJAX可以做什么？

注册时，输入用户名自动检测用户是否已经存在。

登陆时，提示用户名密码错误。

删除数据行时，将行ID发送到后台，后台的数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。

伪造Ajax

我们可以使用前端的一个标签来伪造一个ajax的样子。iframe标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>伪造Ajax</title>
</head>
<body>

<script type="text/javascript">

    window.onload = function f(){
        var myDate = new Date();
        document.getElementById('currentTime').innerText = myDate.getFullYear() + '-' + myDate.getMonth() + '-' + myDate.getDate() + ' ' + myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds();
    }

    function loadPage(){
        var targetURL = document.getElementById('url').value;
        console.log(targetURL);
        document.getElementById('iframePosition').src = targetURL;
    }

</script>

<div>
    <p>请输入要加载的地址：<span id="currentTime"></span></p>
    <p>
        <input type="text" id="url" value="https://uland.taobao.com/">
        <input type="button" value="提交" onclick="loadPage()">
    </p>
</div>

<div>
    <h3>
        加载页面的位置：
    </h3>
    <iframe style="width: 100%;height: 500px" id="iframePosition">

    </iframe>
</div>

</body>
</html>

jQuery Ajax

纯JS实现Ajax我们不去讲解，这里直接使用jQuery提供的，更方便学习，避免重复造轮子，有兴趣的同学可以去了解下本质XMLHttpRequest！

Ajax 的核心式XMLHttpRequest对象（XHR）。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

jQuery 提供多个与AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

jQuery 不是生产者，而是大自然的搬运工。

jQuery Ajax 本质就是 XMLHTTPRequest，对他进行了封装，方便调用！

使用jQuery需要先导入jQuery的js文件；点击 jQuery官网下载

在这里插入图片描述

我们来看下他的方法；

在这里插入图片描述

Ajax总结

使用jQuery需要导入jQuery，使用Vue导入Vue，两个都不用，自己原生态实现

三部曲

编写对应处理的Controller，返回消息或者字符串或者json格式的数据；
编写ajax请求
1. url：Controller请求
2. data：键值对
3. success：回调函数
给Ajax绑定事件，点击 click，失去焦点 onblur，键盘弹起 keyup

牛魔瘦了

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb_12_一小时掌握Ajax

一小时掌握Ajax点击跳转一小时掌握Ajax 视频人生，一站有一站的风景，一岁有一岁的味道，你的年龄应该成为你生命的勋章而不是你伤感的理由。什么是AJAX？AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。在 2005 年，Google 通过其 G
复制链接

扫一扫