day23对象、AJAX

最新推荐文章于 2024-11-03 23:16:52 发布
最新推荐文章于 2024-11-03 23:16:52 发布
阅读量89 收藏
点赞数
文章标签： ajax jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45637649/article/details/114946472
版权

文章目录

动画

show hide toggle

show: 显示 hide: 隐藏 toggle: 有就隐藏 没有就显示

show/hide/toggle(speed, easing, callback)

width + height + opacity

speed: 动画时间 ms

easing: linear swing

callback: 回调函数

// $('div').eq(0).hide(2000, 'linear', function(){
//     console.log('结束了');
//     $(this).show(1000, 'linear');
// });
// $('div').eq(1).hide(2000, 'swing');

$(document).click(function(){
    $('div').eq(0).toggle(1000, 'swing');
});

slide

slideDown: 显示 slideUp: 隐藏 slideToggle: 有就隐藏 没有就显示

slideDown/slideUp/slideToggle(speed, easing, callback)

height

speed: 动画时间 ms

easing: linear swing

callback: 回调函数

无参数的时候 有动画效果

// $('div').eq(0).slideUp(2000, 'linear', function(){
//     console.log('结束了');
//     $(this).slideDown(2000);
// });
// $('div').eq(1).slideUp(2000, 'swing');
$(document).click(function(){
    $('div').slideToggle(2000);
});

fade

fadeIn: 显示 fadeOut: 隐藏 fadeToggle: 有就隐藏 没有就显示

fadeIn/fadeOut/fadeToggle(speed, easing, callback)

opacity

speed: 动画时间 ms

easing: linear swing

callback: 回调函数

无参数的时候 有动画效果

fadeTo: 改变到某个透明度

fadeTo(speed, opacity, easing, callback)

// $('div').eq(0).fadeOut(2000, 'linear', function(){
//     // console.log('结束了');
//     $(this).fadeIn(2000);
// });
// $('div').eq(1).fadeOut(2000, 'swing');

$(document).click(function(){
    // $('div').fadeToggle(2000);
    $('div').fadeTo(2000, 0.1, 'linear', function(){
        console.log('结束了'); // 有几个元素执行动画 就会有几个回调函数执行
    });
});

animate

$对象.animate(params, speed, easing, callback);

params: 要改变的属性和对应的目标值 {}

常用

// $('div').eq(0).animate({
//     'width': 500,
//     height: 500,
//     margin: 100,
//     opacity: .5
// }, 3000, 'swing', function(){
//     console.log('结束');
// }).animate({
//     borderWidth: 30 
// }, 3000, 'swing', function(){
//     console.log('结束');
// });
jq对象.animate(params, options);

duration: 时长 ms

easing: 运动曲线 linear swing

complete: 动画执行结束后的回调函数

step: 每一步动画执行后的回调函数

queue: 是否队列, true–进入队列 false—不进入队列

$('div').eq(0).animate({
    'width': 500,
    height: 100
}, {
    duration: 3000,
    easing: 'linear',
    complete: function(){
        console.log('结束');
    },
    step: function(){
        console.log($(this).width());
    },
    queue: true
}).animate({
    borderWidth: 100
},{
    duration: 1000,
    queue: false
});

队列

  1. 动画连缀的时候 动画默认自动加入队列

  2. 可以直接使用show hide toggle

  3. .css设置样式 不属于动画 不会进入动画队列 跟随第一个动画再开始的一瞬间执行完成

  4. 手动添加队列

    jq对象.queue(函数) 手动加入队列之后 后续的动画不执行

/* 
    1. 动画连缀的时候  动画默认自动加入队列
*/
// $('div').eq(0).animate({
//     'width': 500
// }).animate({
//     'width': 100
// });

// 2. 可以直接使用show  hide  toggle
// $('div').eq(0).animate({
//     'width': 'hide'
// }, 2000).animate({
//     'width': 'show'
// }, 2000).animate({
//     width: '+=150'
// });

// 3. .css设置样式 不属于动画 不会进入动画队列 跟随第一个动画再开始的一瞬间执行完成
// $('div').eq(0).animate({
//     width: 1000
// }).animate({
//     height: 1000
// }).css('background', 'green').animate({
//     borderWidth: 100
// });

// 4. 手动添加队列 
// jq对象.queue(函数)  手动加入队列之后 后续的动画不执行
$('div').eq(0).animate({
    width: 1000
}).animate({
    height: 1000
}).queue(function(next){ // 形参: 是一个函数 函数调用 后续动画继续执行
    $(this).css('background', 'green');
    console.log(next);
    next();
}).animate({
    borderWidth: 100
});

is

is: is(‘选择器’) 是否符合选择器

console.log($('div').is(':animated'));
$('div').animate({
    'width': 1000
}, {
    step: function () {
        console.log($(this).is(':animated'));
    },
    complete: function () {
        console.log($(this).is(':animated'));
    }
});

// 点击页面的时候 如果div没有动画  开始动画 如果有 不添加动画
$(document).click(function () {
    if ($('div').is(':animated') == false) {
        // 添加动画
        $('div').animate({
            'height': 'toggle'
        }, 5000);
    }
});

stop

jq对象.stop(clearQueue, toEnd);

​ clearQueue: 是否清除队列 如果设置成true 表示清除队列 设置成false 不清除队列 执行下一个动画

​ toEnd: 是否到达结束值 如果设置成true 表示一瞬间到达结束值 如果设置成false 不到达结束值

$('button').eq(0).click(function () {
    // 添加动画
    $('div').animate({
        'height': 'toggle'
    }, 50000).animate({
        'width': 1000
    }, 20000);
});

/* 
    jq对象.stop(clearQueue, toEnd);
    clearQueue: 是否清除队列  如果设置成true  表示清除队列  设置成false 不清除队列 执行下一个动画
    toEnd: 是否到达结束值   如果设置成true  表示一瞬间到达结束值  如果设置成false  不到达结束值
*/
$('button').eq(1).click(function(){
    // $('div').stop(); // undefined----false undefined----false
    // $('div').stop(true, false); // 清除队列   不到达结束值
    // $('div').stop(true, true); // 清除队列   瞬间到达结束值
});

finish

jq对象.finish();
结束所有动画 并且到达目标值

$('button').eq(1).click(function(){
    $('div').finish();
});

delay

jq对象.delay(时间); ms

​ 上一个动画结束之后 等待多长时间执行下一个动画

$('button').eq(0).click(function () {
    // 添加动画
    $('div').animate({
        'height': 1000
    }, 500).delay(5000).animate({
        'width': 1000
    }, 20000);
});

AJAX

优缺点

优点:

​ \1. 不需要插件支持

​ \2. 良好的用户体验

​ \3. 少量的数据交互 web服务器的压力较小

​ \4. 减小带宽和服务器的压力

缺点:

​ \1. 破坏前进、后退按钮

​ \2. 对搜索引擎的支持不足

$.ajax

$.ajax();

​ url: 请求地址, 必传

​ data: 请求参数,

​ type: 请求方式, 默认值get

​ success: 请求成功的回调函数,

​ error: 请求失败的回调函数,

​ complete: 请求完成的回调函数,

​ dataType: 期望的返回数据的类型: xml\html\script\json\jsonp

​ cache: 是否缓存

​ timeout: 超时毫秒数

$.ajax({
    // url: 'https://easy-mock.com/mock/5ac31804c0c390592291124f/take/goods#!method=get',
    // url: 'a.txt',
    url: '../day21/jquery-3.6.0.min.js',
    // url: 'b.json',
    // url: 'c.json',
    success: function(res){ // 返回请求成功的数据   已经解析完成
        console.log(res);
    },
    error: function(aja){
        console.log(aja); // ajax对象
    },
    complete: function(aja){
        console.log(aja); // ajax对象
    },
    // type: 'post',
    cache: true,
    // timeout: 1,
    // dataType: 'script'
});

$.get

$.get(url, data, callback)

// $.get('b.json', function(res){
$.get('c.json', function(res){
    console.log(res);
});

$.post

// $.post('b.json', function(res){
$.post('c.json', function(res){
    console.log(res);
});

跨域

同源: 同服务器+同端口号

同源策略

跨域: js对于同源策略的限制

跨域:

​ 不同服务器 tmall jd

​ 同一个服务器 不同端口 5500 8080

​ 同一服务器 不同协议 http https file

报错:

​ has been blocked by CORS policy

jsonp: json with padding

原理: 动态的向页面中添加script标签, 将src设置成要请求的数据的地址, 利用回调函数接收返回值

function aa(res) {
    console.log(res);
}
$.ajax({
    'url': 'https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1',
    'dataType': 'jsonp', // 解决跨域
    'jsonpCallback': 'aa', // 只能是字符串
    'success': function (res) {
        console.log(res);
    },
    'error': function (err) {
        console.log(err);
    }
})

原理

<button>请求数据</button>
<script src="../day21/jquery-3.6.0.js"></script>

<script>
  /* 
      同源: 同服务器+同端口号
      同源策略
      跨域: js对于同源策略的限制
      跨域:
          不同服务器  tmall  jd
          同一个服务器 不同端口  5500  8080
          同一服务器 不同协议  http https file
      报错: 
          has been blocked by CORS policy
      jsonp: json with padding

      原理: 动态的向页面中添加script标签, 将src设置成要请求的数据的地址, 利用回调函数接收返回值
  */
  var url = 'https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1';

  /* 
      src
  */ 

  // 声明一个函数 来接收后台返回的数据
  function sd(res){
      console.log(1, res);
  }

  // 点击页面按钮 请求数据
  $('button').click(function(){
      // 用script标签请求数据 先创建script标签
      var sc = $('<script src="https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1&callback=sd"><\/script>');
      // 追加到页面
      $('body').append(sc);
  });
</script>
<!-- src设置成要请求数据的地址 -->
<!-- <script src="https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1&callback=sd"></script> -->

注意: jsonp只支持get请求，设置post也会被变成get

数据序列化

$(‘form’).serialize();

$(‘form’).serializeArray();

// 有独立单个数据
var str = $('form').serialize(); // name值=value值&name值=value值
console.log(str);

// 多个重复性数据 属性名都一样的时候
var arr = $('form').serializeArray(); 
console.log(arr);
console.log(JSON.stringify(arr));
/* 
    [{
        name: a,
        value: 123
    }, {
        name: b,
        value: 123456
    }]
*/
WEB-
关注
ajax-Day01
qq_43375584的博客
05-03 1089
什么是ajax Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法， 包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3]  使用Aj
Jquery 随便写些知识点
weixin_33725272的博客
12-21 84
针对jQuery随便写些觉得还挺实用的一些东西，也没系统的去理一番，只是想到哪写到哪，写的不完全也请多见谅。 jQuery和其他javascript库产生$符号冲突了？$符号想必用jQuery的人都不生疏，$即代表着jQuery函数。然而$符号并不是jQuery私有的一个符号，其他javascript库也可以使用$符号作为他们的主函数。那么，当我们用的其他的库与jQuery库发生$符号冲突时该怎...
Day23-Ajax&Json
欢迎来到Liu_zimo的博客
10-15 251
title: Day23-Ajax&Json date: 2020-08-10 11:49:12 author: 子陌 AJAX 概念：ASynchronous JavaScript And XML 异步的JavaScript和XML 异步和同步：客户端和服务端的相互通信的前提下 客户端必须等待服务端的响应。在等待的期间客户端不能做其他的操作 客户端不需要等待服务端的响应。在服务器处理请求过程中，客户端可以进行其他操作 ajax无需重新加载整个网页的情况下，能够更新部分网页.
day02_Ajax
Fufufusm的博客
07-04 128
ajax工作原理 浏览器端： 发生某个事件，创建XMLHttpRequest对象，发送HttpRequest 服务器端： 处理HttpRequest，创建响应并将数据返回给浏览器 浏览器端： 使用js处理被返回的数据，更新页面内容 XHR 创建对象 xmlHttpRequest 用于与服务器交换数据（xmlhttp=new XMLHttpRequest();） 请求 method： GET： 更简单，大部分情况都适用 POST： 1.无法使用缓存文件（更新服务器上的文
day03.ajax
m0_50617506的博客
01-15 430
1.正则 replace 函数用法 例子: 'dasdawdqdac'.replace(/[a]/,()=>{ ​ return 'h' // ​ }) //dhsdawdqdac 函数中可以跟参数 (a,b,c,d)=>{ } 第一个值 a:匹配到的内容 第二个值 b:分组中的内容 第三个值 c:匹配到的内容在字符串中的索引号 第四个值: d:原字符串 3.XMLHttpRequest 3.1使用xhr发送GET请求 1...
AJAX-day1：
2303_79590957的博客
07-05 1246
AJAX是浏览器与服务器进行数据通信的技术 =>把数据变活。
DAY04-1 Ajax
tang7mj的博客
10-27 645
我们前端页面中的数据，如下图所示的表格中的学生信息，应该来自于后台，那么我们的后台和前端是互不影响的2个程序，那么我们前端应该如何从后台获取数据呢？因为是2个程序，所以必须涉及到2个程序的交互，所以这就需要用到我们接下来学习的Ajax技术。Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2点：与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。异步交互：可以在的情况下，与服务器交换数据并。
Day 61 Ajax
Tao.的博客
09-07 315
ajax
day21 - Ajax
weixin_45274291的博客
06-29 445
Ajax就是在不刷新页面的情况下发送http请求 Ajax，全称：async javascript and XML，是一个异步执行和后台交互的技术（异步的JavaScript和XML） 1.ajax的get请求 （1）创建ajax对象 let ajax= new XMLHttpRequest( ); let ajax = new ActiveXObject("Microsoft.XMLHTTP"); // 兼容ie678 let ajax = new ActiveXObject("Msxml2.XMLHTT
AJAX 入门-day1
tang好好学习
06-18 996
2. 使用serialize函数，快速收集表单元素的值。* 建议name属性的值，最好和接口文档参数名一致。注意：axios 在运行时把参数名和值，会拼接到 url。需求：请求目标资源地址，拿到省份列表数据，显示到页面。* 表单元素设置name属性，值会作为。HTTP 协议：规定了浏览器发送及服务器返回内容的。HTTP 协议：规定了浏览器发送及服务器返回内容的。* - false：不获取空值。* 参数1：要获取哪个表单的数据。场景：再次注册相同的账号，会遇到报错信息。
崔希凡JavaWeb视频教程_day23_ajax登录验证
08-05
在本节崔希凡的JavaWeb视频教程中，我们聚焦于"day23_ajax登录验证"，特别是关于使用Ajax进行用户名注册时的实时验证。Ajax（异步JavaScript和XML）是一种网页开发技术，允许在不刷新整个页面的情况下与服务器交换...
day6_ajax01.zip
06-28
这个“day6_ajax01.zip”文件显然包含了关于Ajax的基础学习资源，可能是几个示例代码或教程，用于演示如何在Web开发中使用Ajax。让我们深入探讨Ajax的相关知识点。 1. **异步通信**：Ajax的核心是浏览器内置的...
day22_Ajax&Json教案_docx1
08-04
Ajax 的核心是利用 JavaScript 来创建 XMLHttpRequest 对象，通过这个对象与服务器进行通信，发送请求并接收响应。 【Ajax 的工作原理】 1. **创建 XMLHttpRequest 对象**：在大部分现代浏览器中，可以直接创建 ...
day03-前端(ajax&json).zip
10-07
在"day03-前端(ajax&json)"的学习中，你将有机会实践如何使用AJAX进行异步数据请求，以及如何处理和展示JSON数据。通过编写AJAX请求，你可以与服务器进行实时交互，例如动态加载数据、提交表单等。同时，了解如何...
day05_ajax02.zip
06-28
【标题】"day05_ajax02.zip" 涉及的是AJAX（Asynchronous JavaScript and XML）技术的一个小型示例，它在Web开发中扮演着至关重要的角色，用于实现页面无刷新的数据交互。这个压缩包可能包含了实现AJAX功能的各种...
AJAX入门
wozhaonue_w的博客
10-29 1186
异步的JS和XML => 使用XMLHttpRequest对象与服务器通信==>在不重新刷新页面的情况下与服务器通信。
AJAX学习笔记总结
最新发布
samroom的博客
11-03 784
AJAX简介、XML简介、AJAX特点、服务端框架、GET请求案例、跨域同源策略、使用JSONP和CORS解决跨域
React AJAX: Mastering Asynchronous JavaScript and XML in React Applications
lsx202406的博客
11-01 836
【代码】React AJAX: Mastering Asynchronous JavaScript and XML in React Applications。
ai说ajax
2301_78916954的博客
10-29 332
AJAX，全称为 Asynchronous JavaScript and XML，是一种用于在网页无需刷新整个页面的情况下，与服务器交换数据的技术。AJAX 使用 JavaScript 来执行异步 HTTP 请求，这些请求可以返回数据格式如 XML、JSON、HTML 或纯文本。这是一个术语，指的是一组 web 开发技术，它们被用来在无需刷新整个页面的情况下，通过异步方式与服务器交换数据。AJAX 的核心在于使用 JavaScript 来创建异步 HTTP 请求，并处理服务器的响应。
掌握Ajax基础与开发实战：异步JavaScript在Web应用中的关键
课程大纲分为两部分：Day1着重于Ajax的入门介绍，包括概念解释，工作原理，以及为什么学习Ajax（如提高用户体验，减少不必要的网络传输）。这部分讲解了Ajax如何利用DHTML、CSS、DOM、XML、XSLT和XMLHttpRequest对象...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值