- 博客(32)
- 收藏
- 关注
原创 【Ajax学习】跨域与JSONP
1、什么是同源如果两个页面的协议、域名和端口都相同,则两个页面具有相同的源。例如,下表给出了相对于页面的同源检测:协议:http域名:www.test.com端口号:默认802、什么是同源策略同源策略(英文全称Same origin policy)是浏览器提供的一个安全功能。MDN官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
2022-11-19 14:16:36 444
原创 【Ajax学习】axios
Axios是专注于网络数据请求的库。相比于原生的XMLHttpRequest 对象,axios简单易用。相比于jQuery,axios更加轻量化,只专注于网络数据请求。
2022-11-17 13:25:56 187
原创 【Ajax学习】jQuery高级用法
1、定义UI结构2、验证是否选择了文件注意:获取文件列表前,必须要将jQuery对象转换为DOM对象,因为files是DOM对象的属性jQuery对象转换为DOM对象的方法:$('名称')[0]3、向FormData中追加文件4、使用jQuery发起上传文件的请求注意:因为formdata自带setRequeseHeader,所以一定不要在ajax函数中再设置了,也就是说,在是同jQuery上传文件时,要固定写上contentType和processData为false。
2022-11-17 12:29:45 278
原创 XMLHttpRequest Level2的新特性
1、认识XMLHttpRequest Level2只支持文本数据的传输,无法用来读取和上传文件传送和接收数据时,没有进度信息,只能提示有没有完成2、XMLHttpRequest Level2的新功能可以设置HTTP请求的时限可以使用FormData对象管理表单数据可以上传文件可以获得数据传输的进度信息。
2022-11-17 10:07:35 228
原创 【Ajax学习】数据交换格式
数据交换格式,就是服务器端与客户端之间进行数据传输与交换的格式。前端领域,经常提及的两种数据交换格式分别是XML和JSON。其中XML用的非常少,所以,我们重点要学习的数据交换格式就是JSON。
2022-11-16 16:17:58 120
原创 【Ajax加强】XMLHttpRequest的基本使用
XMLHttpRequest(简称xhr)是浏览器提供的Javascript对象,通过它,可以请求服务器上的数据资源。之前所学的jQuery 中的Ajax函数,就是基于xhr对象封装出来的。
2022-11-16 14:11:43 233
原创 【Ajax学习】正则
exec()函数用于检索字符串中的正则表达式的匹配。如果字符串中有匹配的值,则返回该匹配值。否则返回null。注意:一次只能匹配到一个符合条件的,如果想得到多个符合条件的,则要多次调用exec()函数。
2022-11-16 11:16:29 121
原创 【Ajax学习】模板引擎
1 渲染Ul结构时遇到的问题上述代码是通过字符串拼接的形式,来渲染UI结构。如果UI结构比较复杂,则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化,修改起来也非常麻烦.2 什么是模板引擎模板引擎,顾名思义,它可以根据程序员指定的模板结构和数据,自动生成一个完整的HTML页面。3 模板引擎的好处减少了字符串的拼接操作使代码结构更清晰使代码更易于阅读与维护。
2022-11-16 09:59:57 212
原创 【Ajax学习】通过Ajax提交表单数据
注意:在使用serialize()函数快速获取表单数据时,必须为每个表单元素添加name属性!serialize()函数的好处:可以一次性获取到表单中的所有的数据。注意:是给form标签绑定submit事件,而不是给里面的表单组件绑定。在jQuery 中。1.serialize()函数。
2022-11-15 09:58:36 1490
原创 【Ajax学习】form表单
表单在网页中主要负责数据采集功能。表单在网页中主要负责数据采集功能。HTML中的标签,就是用于采集用户输入的信息,并通过标签的提交操作,把采集到的信息提交到服务器端进行处理。
2022-11-14 20:10:47 204
原创 【Ajax学习】jQuery中的Ajax
浏览器中提供的XMLHttpRequest用法比较复杂,所以jQuery对xhr进行了封装,提供了一系列Ajax相关的函数,极大的降低了Ajax的使用难度。功能单一,专门用来发起get请求,,从而将服务器上的资源请求到客户端来使用。是一个功能比较综合的函数,可以允许我们对Ajax请求进行更详细的配置。该函数功能单一,专门用来发起post请求,从而向服务器提交数据。使用$.ajax()发起GET请求。$.ajax()发起post请求。$.get()发起不带参数的请求。$.get()发起带参数的请求。
2022-11-14 12:23:36 323
原创 【Ajax学习】Ajax概念以及应用场景
异步JavaScript和XML通俗的理解:在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式,就是Ajax。Ajax可以轻松实现网页与服务器之间的数据交互。
2022-11-14 09:11:46 382
原创 【ajax学习】服务器与客户端相关概念以及数据资源
如果要在网页中请求服务器上的数据资源,则需要用到XMLHttpRequest对象,简称xhr,他是浏览器提供的js成员,通过它,可以请求服务器上的数据资源。例如:登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作。例如:根据URL地址,从服务器获取 HTML文件、css文件、js文件、图片文件、数据资源等。服务器是指上网过程中,负责存放和对外提供资源的电脑,叫做服务器。1、get请求通常用于获取服务器的资源(向服务器要资源)
2022-11-14 08:58:37 150
原创 js本地存储
sessionStorage可以存储约5M,localStorage可以存储约20M。4、只能存储字符串,可以将对象JSON.stringify()编码后存储。1、生命周期永久有效,除非手动删除,否则关闭页面也会存在。2、可以多窗口/页面共享,同一浏览器可以共享。2、设置、读取方便,刷新页面不会丢失数据。2、在同一个窗口/页面下 数据可以共享。1、生命周期为关闭浏览器窗口。1、数据存储在用户浏览器中。3、以键值对形式存储使用。3、以键值对形式存储。
2022-11-13 15:51:09 303
原创 【jQuery学习】jQuery拷贝对象
5、深拷贝,前面加true,完全克隆,拷贝的是对象而不是地址,修改目标对象不会影响被拷贝对象。想把某个对象拷贝(合并)给另外一个对象使用,此时可以用$.extend()方法。1、deep为true则为深拷贝,默认为false浅拷贝。2、target 要拷贝的目标对象(拷贝到他身上)拷贝给目标对象,修改目标对象会影响被拷贝对象。被拷贝对象里面的复杂数据类型中的地址。2、释放jQuery对$的控制。3、object1 被拷贝的。1、将$符号换为jQuery。jQuery多库共存。
2022-11-13 10:18:37 799
原创 【jQuery学习】jQuery事件对象
事件被触发就会有事件对象的产生。function(event)中的event就是事件对象。阻止默认行为:event.preventDefault()或者return false。阻止事件冒泡:event.stopPropagation() 原生js中也有这个方法。
2022-11-12 19:42:27 213
原创 【jQuery学习】jQuery事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数。element.事件(function() {})selector:元素的子元素选择器。2 事件处理 on()绑定事件。1 jQuery事件注册。
2022-11-10 21:12:39 161
原创 【jQuery学习】jQuery尺寸 位置方法
注意:只有元素才能做动画,所以animate()前面一定是获取到的元素,如果对整个文档进行动画设置,则需要用$("body,html")来包装成元素。位置主要有三个:offset() position() scrollTop()/scrollLeft()offset()里面有top和left属性,offset().left offset().top。2、position() 返回相对于带有定位的父级的偏移量,如果父级没有定位,则相对于文档。1、offset()获得或设置元素偏移。只能获取,不能设置。
2022-11-10 20:29:49 201
原创 【jQuery学习】jQuery内容文本值
parents("选择器"):选择祖先中对应的元素。substr(1):截取第一个字符后面的字符串。相当于原生中的innerText()toFixed(n):保留n位小数。相当于原生的innerHtml。修改内容html("内容")更改文本text("内容")获取文本 text()获取内容html()
2022-11-10 14:12:48 279
原创 【jQuery学习】 jQuery常用API
children():返回亲儿子,也就是最近一级,相当于css中的 ul>li。siblings(): 返回除了自己之外的所有兄弟元素,适用于排除自己的操作。用到了siblings()方法的本质:改变除了自己之外的其他所有兄弟。隐式迭代:把匹配的所有元素内部进行遍历循环,给每一个元素添加方法。find():返回所有符合的孩子, 相当于css中的ul li。parent():返回最近一级的父亲元素,不会返回爷爷元素。$("选择器") //css怎么写 括号里面就怎么写。1.1 jQuery基础选择器。
2022-11-09 12:26:14 204
原创 【jQuery学习】.jQuery的基本使用
因为原生js比jQuery更大,原生的一些属性和方法jQuery并没有封装进去,想要使用这些属性和方法就要把jQuery对象转变为DOM对象。2、$为jQuery中的顶级对象,相当于原生js中的window。3、jQuery对象只能使用jQuery方法,DOM对象只能使用原生js的属性和方法。2、jQuery对象, 用jQuery方式获取过来的对象就是jQuery对象。1、 DOM对象, 原生js获取过来的就是DOM对象。DOM对象与jQuery对象可以相互转换。1. DOM对象转换为jQuery对象。
2022-11-09 09:32:27 388
原创 【jQuery学习】jQuery概述
JavaScript库:即library,是一个封装好的特定的集合(方法和函数)。封装好了很多预先定义好的函数,比如animate、hide、show等。jQuery封装了JavaScript的常用代码,优化了DOM操作、事件处理、动画设计和Ajax交互。jQurey就是一个库,为了快速方便操作DOM,里面基本都是函数(方法).学习jQuery的本质即是:学习调用这些函数。5、很多插件,比如日期控件 轮播图。4、对事件、样式、动画支持。3、链式编程、隐式迭代。
2022-11-09 08:50:27 60
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人