正文

javascript原生实现jsonp(代码片段)

author  author  2022-12-07  192

关键词：

import getRandom from 'getRandom.jsx';
import Serialize from 'string.jsx';
import locationOpts from 'url.jsx';
/**
 * 跨域请求
 * @param options
 *
    import jsonp from '../../../common/components/Utils/jsonp.jsx';

	jsonp(
		url:'https://activity.lagou.com/activityapi/lamp/getJZPositionList',
		success: function (result) 
			debugger;
		,
		data:user:11
	);
 */
export function jsonp (options)
	var randomId = getRandom();
	let CallBackName = options.callback || 'callback'+randomId;
	let scriptName = 'script'+randomId;
	let boxName = 'box'+randomId;
	window[CallBackName] = function (data) 
		options.success(data);
	
	let currentRequest = document.createElement('div');
	currentRequest.setAttribute('id',boxName);
	document.body.appendChild(currentRequest);
	var queryUrl = locationOpts.reset(options.url);
	var params = options.data || ;
	params[options.callback||'jsoncallback'] = CallBackName;
	let script = document.createElement('script');
	script.id = scriptName;
	script.name = scriptName;
	script.src = queryUrl.getFullUrl()+(Serialize(params)?('?'+Serialize(params)):'');
	document.head.appendChild(script);




export function jsonpIframe (options)
	var randomId = getRandom();
	let CallBackName = options.callback || 'callback'+randomId;
	let formName = 'form'+randomId;
	let iframeName = 'iframe'+randomId;
	let boxName = 'box'+randomId;
	window[CallBackName] = function (data) 
		options.success(data);
	
	let currentRequest = document.createElement('div');
	currentRequest.setAttribute('id',boxName);
	document.body.appendChild(currentRequest);
	let iframe = getIframeByName(iframeName);
	var queryUrl = locationOpts.reset(options.url);
	var params = options.data || ;
	params[options.callback||'jsoncallback'] = CallBackName;
	let form =  getFormByKeys(params,formName,formName,queryUrl.getFullUrl(),iframeName);
	currentRequest.appendChild(iframe);
	currentRequest.appendChild(form);
	iframe.onload = function () 
		debugger;
		window[CallBackName](iframe)
	

	form.submit();


/**
 *通过相关参数获取form表单
 * @param params
 * @param name
 * @param id
 * @param url
 * @param target
 * @returns Element
 */
function getFormByKeys(params,name,id,url,target)
	let form = document.createElement('form');
	form.setAttribute('name',name);
	form.setAttribute('id',id);
	form.setAttribute('action',url);
	form.setAttribute('target',target||'_blank');
	var itemsText = '';
	for(var item in params)
		if(typeof params[item] != 'function')
			itemsText += '<input value="'+params[item]+'" name="'+item+'" />'
		
	
	form.innerHTML = itemsText||'';
	return form;


/**
 * 获取一个iframe元素
 * @param name
 */
function getIframeByName(name)
	let iframe = document.createElement('iframe');
	iframe.setAttribute('id',name);
	iframe.setAttribute('name',name);
	iframe.setAttribute('width',0);
	iframe.setAttribute('height',0);
	iframe.style.display = 'none';
	return iframe;

原生javascript里jsonp的实现原理

ajax不能跨域，jsonp可以跨域跨域的核心思想：调用（拿到的接口），定义（jsonp核心处理器）分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据) jsonp传进来的数据是{url:‘‘,data:{ ... 查看详情

原生javascript里jsonp的实现原理

原生js发送ajax请求jsonp(代码片段)

一、JS原生AjaxAjax=异步Javascript+XML；ajax是一种数据请求的方式，不需要刷新整个页面。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。ajax的核心技术当然是XMLHttpRequest对象；ajax请求过程：创建XMLHttpReque... 查看详情

javascript原生js实现ajax(代码片段)

查看详情

javascript原生js实现阿贾克斯(代码片段)

查看详情

javascript的jsonp

目录索引：一、AJAX的概念二、POST&&GET三、原生实现AJAX简单示例　　3.1实现代码　　3.2重点说明四、框架隐藏域　　4.1基本概念　　4.2后台写入脚本　　4.3JS主动判断Iframe的改变　　4.4表单提交数据实战五、JQ的AJAX　　... 查看详情

[javascript]原生js实现ajax(代码片段)

一.首先看JQuery提供的Ajax方法： $.ajax(url:,type:‘‘,dataType:‘‘,data:,success:function(),error:function()) 二.原生js实现Ajax方法： varAjax=get:function(url,fn)//XMLHttpRequest对象用于在后台与服务器交换数据var 查看详情

vue+html5+原生dom+原生javascript实现跨区域拖放(代码片段)

目录1、关键代码2、完整代码1、关键代码//放functiondrop(ev) letdata=ev.dataTransfer.getData("Text"), i=ev.path[1].getAttribute("i"), text=document.getElementById(data).cloneNode(true).inner 查看详情

javascript原生javascript方法的实现（foreach，map，filter，reduce，every，some）(代码片段)

查看详情

原生实现javascript的call()apply()bind()(代码片段)

前言call、apply、bind作用是改变函数执行时的上下文，简而言之就是改变函数运行时的this指向。我们先来看一个例子letobj= name:"大卫"functionperson() console.log("name",this.name)//用原生apply调用person.apply(obj)//name:大卫实... 查看详情

使用chrome开发者工具研究javascript里函数的原生实现(代码片段)

AsthesizeofmyblogChromeDevelopmentTooltipsusedinmydailyworkturnstobelargerIcreateaseparateposttorecorddownthissmalltip.Areyoucuriousaboutthe“nativecode”here?AtleastIam.TodayIfindthattheProfilestabinCh 查看详情

原生实现javascript的call()apply()bind()(代码片段)

javascript原生实现二级联动下拉菜单(代码片段)

JS原生实现二级联动菜单（市/区县）🍅Java学习路线：搬砖工的Java学习路线🍅作者：程序员小王🍅程序员小王的博客：https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF🍅扫描主页左侧二维码，查看详情

ajax解决跨域--原生jsonp实践(代码片段)

1.原生jsonp实践需求：验证用户名是否存在，如果用户名不存在，则在失去焦点的时候边框变红。ajaxDemo.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname 查看详情

javascript手动实现jsonp代码

浏览器的同源策略不允许我们直接通过ajaxcall别的域名上的url，但是script，img标签却米有这个限制，jsonp便是利用了这一点，通过在页面上生成一个src为我们所要调用url的script标签，能拿到服务器返回的结果，当然这个只支持get... 查看详情

js原生javascript轮播图渐变淡入淡出效果实现（附代码）(代码片段)

目录前言轮播图的组成以及实现思想左右按钮的隐藏与显示核心思想代码实现动态生成底部小圆圈核心思想代码实现右左按钮实现核心思想代码实现实现自动播放核心思想代码实现整体代码（复制可用）总结前... 查看详情

基于原生js的jsonp方法的实现

基于原生JS的jsonp方法的实现jsonp，相信大家并不陌生，是在js异步请求中解决跨域的方法之一，原理很简单，有不清楚的同学可以google下，这里就补详细解释了。在Jquery库中，jQuery直接封装有jsonp的方法，很简便，只需在ajax请求... 查看详情

jsonp实现跨域请求

...求方式是有特定应用场景的，并不是跨域都能用这种。1.javascript方式< 查看详情