原生js实现jsonpcallback函数

2024-11-07

原生js实现简单JSONP

JSONP是一种非常常见的实现跨域请求的方法.其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输. 用原生JS实现JSONP非常简单,无非几点: 1)定义一个函数,用于处理接收到的跨域数据. 2)生成一个dom节点(script节点),然后src属性上面记入发送的目的URL以及参数. 3)在跨域服务器端接收GET请求,返回数据(返回之前定义函数的调用的字符串). 4)删除之前生成的script节点. 演示如下: 1)首先需要一个是同源服务器,一个跨域访问的服务器. 最简

原生JS封装_new函数，实现new关键字的功能

1.前言众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 2.原生的new 首先,我们先new一个对象看看: //创建Person构造函数,参数为name,age function Person(name,age){ this.name = name; this.age = age; } //实例化对象小明 xm = new Person('xiaoming',1

原生JS实现动画函数的封装

封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if(obj.currentStyle){ //IE浏览器 return obj.currentStyle[attr]; }else{ //chrome.firefox等浏览器 return getComputedStyle(obj,null)[attr]; } } 动画函数: var timer =

编写原生JS的insertAfter函数

DOM里有insertBefore函数,但没有insertAfter函数,所以自己编写一个该函数: function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newElement); }else{ parent.insertBefore(newElement,tar

关于原生js中bind函数的实现

今天继续研究了bind函数的实现,也知道了shim和polyfill的说法,现在总结一下, if (!Function.prototype.bind) { Function.prototype.bind = function (oThis) { if (typeof this !== "function") { // closest thing possible to the ECMAScript 5 internal IsCallable function throw new Typ

兼容IE9以下和非IE浏览器的原生js事件绑定函数

事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"/> <title>测试事件绑定函数</title> <scrip

原生JS实现bind()函数

一.bind()函数的两个特性: 1.bind和curring,函数科里化 function add(a, b, c) { var i = a+b+c; console.log(i); return i; } );//给add()传了第一个参数a func(, );//103,继续传入b和c );//给func2传入第一个参数,也就是b,此前func已有参数a=100 func2();//310,继续传入c,100+200+10 可以利用此种特性方便代码重用,如下,可以不同的页面中只需要配置某几

关于原生js中函数的三种角色和jQuery源码解析

原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关系: 分三小类: 1.普通函数 function fn(){ console.log('我是一个最基础的函数'); } fn(); 2.类包括(内置类,自定义类)也就是构造函数内置类是通过构造函数的形式创建的自定义类形式和内置类一样创建内置类的使用:其实上述fn函数就是内置Function

原生JS实现旋转木马轮播图特效

大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me

原生JS写的ajax函数

参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax({}); 调用的方法参照JQuery的ajax,只是不需要写$.ajax ,只需要写 ajax 就可以了. 代码如下: !function () { var jsonp_idx = 1; var ajax = function (url, options) { if (typeof url ==

js原生的url操作函数，及使用方法。（附：下边还有jquery对url里的中文解码函数）

js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var LG=(function(lg){ var objURL=function(url){ this.ourl=url||window.location.href; this.href="";//?前面部分 this.params={};//url参数对象 this.jing="&q

原生JS研究：学习jquery源码，收集整理常用JS函数

原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/article/details/24308413 function getClass (classname,obj) {//obj就是找的标签范围; var obj=obj||document;//如果obj没有参数传进来的话就为假,就返回document; var arr=[];/

原生js判断css动画结束 css 动画结束的回调函数

原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件: transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍然需要使用webkit前缀,所以,我们不得不根据各种浏览器分别检测事件 var transitions = { 'transition':'tra

原生JS封装创建多级菜单函数

手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构废话不多说,展示代码.先展示数据代码,注意,使用此封装函数需要满足此数据结构. var data = [{ id: 1, address: "安徽", parent_id: 0 }, { id: 2, address: "江苏", parent_id: 0 }, { id: 3, addre

JavaScript中函数和类(以及this的使用<重点>，以及js和jquery讲解，原生js实现jquery)

1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一致的 Name = "root" Age = function Foo(name,age){ this.Name = name; this.Age = age; this.Func = function(){ console.log(this.Name,this.Age); #this是当

原生JS实现call,apply,bind函数

1. 前言使用原生JS实现call和apply函数,充分了解其内部原理.call和apply都是为了解决改变this的指向.作用都相同,只是传参的方式不同.除了第一个参数外,call可以接受一个参数列表,apply只接受一个参数数组. 2. call函数 2.1 描述 call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数. 2.2 语法 fun.call(thisArg, arg1, arg2, ...) 2.3 参数 thisArg:可选的.在 fun 函数

使用原生JS封装一个动画函数

最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一个动画,看了一下以前封装的函数,千疮百孔,又进行了重新封装,先上代码,有详细的备注. function animate(el, target, step, dtime) { /** * 参数说明: * - el 表示操作的元素对象 * - target 表示移动的目标距离单位 px * - ste

常用原生JS函数和语法集合

luoyishan-2017-10-08 1. 输出语句:document.write(""); 2. JS中的注释为// 3. 传统的HTML文档顺序是:document->html->(head,body)4. 一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)5. 得到表单中元素的名称和值:document.getElementById("表单中元素的ID号"

AJAX请求和跨域请求详解（原生JS、Jquery）

一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 本博客实验环境: python: web框架:tonado jquery:2.1.1 二.“伪”AJAX 由于HTML标签

原生js实现常见的jquery的功能

原生选择器充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <li class="lione">2222</li> <li class="lione">3333</li> </ul> </div> <div id="box2"> <

Ajax进阶之原生js与跨域jsonp

什么是Ajax? 两个数求和: 用Jquery和数据用json格式 viws函数: from django.shortcuts import render,HttpResponse # Create your views here. def index(request): return render(request,"sum_two.html") import json def sendAjax(request): print(request.body) print(request.G

原生js实现jsonpcallback函数

热门专题