jQuery的插件和跨域、ajax
1. 插件: 也称组件
什么是: 拥有专属的HTML,CSS和js的独立页面区域
为什么: 重用!
何时: 只要一个功能/区域可能被反复使用时
如何:
3个来源:
1. 官方插件:jquery ui
依赖于jQuery, 必须先引入jQuery,再引入jQuery UI
如何:
1. 引入jQuery UI的css
2. 按组件的要求,自行编写HTML结构和内容
3. 引入jQuery.js, 再引入jQuery UI.js
4. 查找插件的父元素,调用jQuery UI的插件函数
$(插件的父元素).插件函数()
侵入性: 插件根据自己的需要,自动添加样式类或自定义扩展属性
2. 第三方插件:
3. 自定义插件:
定义:
前提: 已经用HTML,CSS,JS实现了插件的效果和功能
1. 将插件的CSS提取出来,保存在一个独立的css文件
要求: 为了避免和其他插件存在相同的样式类发生冲突,必须保证每个样式类都要以统一的插件类名作为前缀!
2. 定义插件的js: 向jQuery的原型对象中添加自定义插件函数
jQuery.fn.插件函数=function(){
//this->$(父元素)
//2件事:
//1. 侵入class:
//2. 绑定事件处理函数:
}//调用时: $(父元素).插件函数();
使用插件: 同使用jQueryUI的做法
1. 引入插件的css
2. 按照插件要求编写html
3. 引入jquery.js和插件.js
4. 查找插件父元素,调用插件函数
2. ajax:
$.ajax({
url:"服务端接口地址",
type:"get/post",
data:{ 参数1:值1, ... },
dataType:"json", //可自动将服务器返回的json字符串转为对象
success:function(res){//onreadystatechange 返回响应,且响应成功时自动触发
//res会自动获得服务端返回的数据
//用res执行DOM操作
}
})//jquery 3.x 支持Promise
.then(function(res){
})
3. 跨域:
什么是: 一个域名下网页,向另一个域名下发送请求,请求另一个域名下的资源
比如: 现在在http://localhost/index.html下
<script src="http://www.jquery.com/jquery.js"
<img src="http://tmooc.cn/stylesheet/img/logo.png"
<link rel="stylesheet"
href="http://v4.bootcss.com/bootstrap.css"
问题: ajax的xhr对象,禁止发送跨域请求
包括:
1. 一级域名不同: www.a.com -> www.b.com
2. 二级域名不同: oa.tedu.com -> hr.tedu.com
3. 端口不同: localhost:5500 -> localhost:3000
||
4. 协议不同: http:localhost -> https:localhost
80 443
5. 即使同一台机器: 域名 -> IP
localhost 127.0.0.1
如何发送异步跨域请求:
1. JSONP: JSON with Padding 填充式json
问题1: ajax不能发送跨域请求
解决1: 请<script>元素帮助发送请求
问题2: <script>发送请求,必须返回一条可执行的js语句
解决2: 修改服务端res.write(),其中,将要返回的数据,填充进一条可执行的js语句中,一起返回。
问题3: 服务端返回的js语句是写死的,众口难调
解决3: 在客户端定义一个处理函数
function show(res){
//对res执行任何想要的操作
}
服务端返回一条函数调用语句,函数名必须和客户端定义的函数名保持一致:
res.write(`show('${weather}')`)
返回: show('晴 -10~-2 from dong')
在客户端执行时:
调用show函数:
参数res自动得到了'晴 -10~-2 from dong'
实现了: 客户端操作与服务端的分离
问题4: 服务端将函数名规定死,也是众口难调
解决4: 客户端发送:
<script src="url?callback=客户端函数名"
服务端:
先获得req中callback变量中的函数名
再将函数名拼接到res.write()中,代替写死的函数名
实现了: 处理逻辑和函数名与服务端无关
问题5: <script>在客户端只写死一次,仅能在首次加载页面时执行一次,无法反复发送请求
解决5: 动态添加<script>元素
在单击事件中:
$('<script src="http://localhost:3000?callback=doit">').appendTo("body");
问题6: 新增的<script>无法自动删除,造成积压
解决6: 在自定义的回调函数结尾,查找最后一个script,删除。
其实: $.ajax可自动实现jsonp效果:
$.ajax({
url:"url",
... : ... ,
dataType:"jsonp", //使用jsonp方式请求服务端
success:function(res){ ... }
})
原理: 同以上6步:
1. 动态创建script元素发送请求
2. 自动为success匿名函数定义随机函数名拼接到url?callback=随机函数
3. success函数执行后,自动删除script元素
强调:jsonp单靠客户端无法实现,必须服务端负责拼接函数名和要返回的数据。所以必须客户端服务端同时修改才可支持。
jQuery的插件和跨域、ajax的更多相关文章
- 用JQuery的$.getJSON发起跨域Ajax请求
jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数.原型如下: jQuery.getJSON( url, [data], [callba ...
- jQuery插件select2跨域设置xhrFields参数
ajax跨越时默认不带cookie,如果需要带cookie调用,需要设置参数 xhrFields: { withCredentials: true },如: $.ajax({url : "h ...
- 第二百七十四节,同源策略和跨域Ajax
同源策略和跨域Ajax 什么是同源策略 尽管浏览器的安全措施多种多样,但是要想黑掉一个Web应用,只要在浏览器的多种安全措施中找到某种措施的一个漏洞或者绕过一种安全措施的方法即可.浏览器的各种保安措 ...
- 使用$.getJSON实现跨域ajax请求
jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数.原型如下: jQuery.getJSON( url, [data], [callba ...
- 前端 - jsonp 跨域ajax
jsonp 跨域ajax原理: 浏览器同源策略限制 如何解决同源策略限制: 方式一: 利用创建script块,在其中执行src属性为 远程url 异域 用函数(返回值) 的形式返回参数 方式二: jq ...
- Ajax与跨域Ajax
Ajax 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上.对于传统的Web应用,一个简单操作需 ...
- 06: AJAX全套 & jsonp跨域AJAX
目录: 1.1 AJAX介绍 1.2 jQuery AJAX(第一种) 1.3 原生ajax(第二种) 1.4 iframe“伪”AJAX(第三种) 1.5 jsonp跨域请求 1.6 在tornad ...
- 跨域Ajax -- jsonp和cors
跨域Ajax - jsonp - cors 参考博客: http://www.cnblogs.com/wupeiqi/articles/5703697.html http://www.cnblogs. ...
- 【HTTP header】【Access-Control-Allow-Credentials】跨域Ajax请求时是否带Cookie的设置
1. 无关Cookie跨域Ajax请求 客户端 以 Jquery 的 ajax 为例: $.ajax({ url : 'http://remote.domain.com/corsrequest', d ...
随机推荐
- union 的概念及在嵌入式编程中的应用
union 概念 union 在中文的叫法中又被称为共用体,联合或者联合体,它定义的方式与 struct 是相同的,但是意义却与 struct 完全不同,下面是 union 的定义格式: union ...
- java中的Volatile关键字使用
文章目录 什么时候使用volatile Happens-Before java中的Volatile关键字使用 在本文中,我们会介绍java中的一个关键字volatile. volatile的中文意思是 ...
- Linux系统管理第六次作业 进程和计划任务管理
1.通过ps命令的两种选项形式查看进程信息 [root@localhost ~]# ps aux USER PID %CPU %MEM VSZ RSS TTY STA ...
- js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- IDEA 之 ERROR:无法在web.xml或使用此应用程序部署的jar文件中解析绝对uri:[http://java.sun.com/jsp/jstl/core]
问题描述:在使用IDEA对JSTL进行测试时出现error:无法在web.xml或使用此应用程序部署的jar文件中解析绝对uri:[http://java.sun.com/jsp/jstl/core] ...
- Flutter仿网易云音乐:播放界面
写在前头 本来是要做一个仿网易云音乐的flutter项目,但是因为最近事情比较多,项目周期跨度会比较长,因此分几个步骤来完成.这是仿网易云音乐项目系列文章的第一篇.没有完全照搬网易云音乐的UI,借鉴了 ...
- P1457 城堡 The Castle 位运算+BFS+思维(难题,好题)
题目描述 我们憨厚的USACO主人公农夫约翰(Farmer John)以无法想象的运气,在他生日那天收到了一份特别的礼物:一张"幸运爱尔兰"(一种彩票).结果这张彩票让他获得了这次 ...
- Top 命令数据分析
一.top 命令详解 当前时间 20:27:12 当前系统运行时间 3:18秒 1个用户 系统负载平均长度为 0.00,0.00,0.00(分别为1分钟.5分钟.15分钟前到现在的平均值) 第二行为进 ...
- 基于thinkphp3.2.3开发的CMS内容管理系统(二)- Rbac用户权限
基于thinkphp3.2.3开发的CMS内容管理系统 thinkphp版本:3.2.3 功能: --分类栏目管理 --文章管理 --商品管理 --用户管理 --角色管理 --权限管理 --友情链接管 ...
- 王颖奇 201771010129《面向对象程序设计(java)》第一周学习总结
<面向对象程序设计(java)>第一周学习总结 第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.com wangyingqi 程序 ...