什么是跨域？

例如，ajax必须在其自己的域(名称)下才能发出异步请求。如果它不在同一个域下，它就不能发出请求，并将报告错误。比如我们用ajax请求腾讯的API。如果我们的域名不在腾讯界面的‘白名单’里，腾讯界面会拒绝给我返回数据。但是，在大多数情况下，我们不能每次都去相应的网站申请‘白名单’。此时，我们需要使用跨域方法。跨域的方式有很多，比如iframe，但是这种可操作性太差，无法操作框架中的DOM元素。最流行的方法是使用jsonp。

什么是JSONP

Jsonp是英语中带填充的json的缩写。简单来说，jsonp就是一个脚本标签。通常，我们称脚本、链接和img为资源标签，这意味着我们可以连接资源。只要记住jsonp是一个脚本标签。我们来谈谈下一部分：

脚本标签如何引入数据

如果我们知道操作系统不是通过文件的后缀名称来识别文件，而是通过文件的内容来识别文件，那么后缀名称的知识对第三方软件查看更有利。例如，如果我们将a.txt更改为a.txt，当我们用图片查看器打开它时，显示的图片将不会存在(如果学习过Linux的学生会更好地理解它)。【感兴趣的同学可以尝试把一个js文件的后缀改成另一种格式，然后再尝试介绍一下】。然后我们将解决如何将数据引入脚本的问题，也就是说，我们可以使用脚本标签来引用一个json或。php资源文件。

即使可以引入资源，如何使用资源

让我们举一个简单的例子。例如，我们在一个. json中定义了以下变量

文本'；我们用HTML加载它，然后执行它，如下所示：

脚本src='http:/a . JSON '/script script alert(str)；//text/script可以正确执行，但是我们也知道json数据中没有定义变量和方法，类似于下面的方式：

var str=' text我们用HTML加载它，然后执行它，如下所示：

脚本src='http:/a . JSON '/script script alert(str)；//error/script，很明显会报错，所以跨域解决后就解决了如何使用这个资源的问题。

我们首先用后台定义一种调用函数的方式，将所有数据作为函数的参数。当然，这个函数是我们预定义的，如下格式所示：

函数求解(数据){//使用数据}脚本src=' http :/a.json/脚本让我们来看看a . JSON是如何定义的

求解(100)；求解({ })；//相当于a.json中的数据作为参数传递给求解函数，然后就可以在求解函数中对数据进行操作。资源中有几种方法

首先看下面的例子，当我们引入一个PHP动态资源时，

？php$t=isset($_GET['t'])？$ _ GET[' t ']: ' num '；$ a=' 111$ b=' aaaif($ t==' num '){ $ data=JSON _ encode($ a)；} else { $ data=JSON _ encode($ b)；} echo only ($ data)例如，如果我们有两个按钮，一个按钮请求接收$a，另一个按钮请求接收$b，我们该怎么办？在pho文件中添加一个solve()？虽然这是可取的，但如果有n种请求，只需添加n个方法，这肯定行不通。怎么解决？一个好的方法是在您请求时添加函数名，例如，以下列方式：

？php$t=isset($_GET['t'])？$ _ GET[' t ']: ' num '；$ callback=isset($ _ GET[' callback '])？$_GET['回调']: ' fn1 '；$arr1=array('111111 '，' 22222222 '，' 33333333 '，' 4444444 '，' 555555555555555555555 ')；$arr2=数组(' aaaaaaaaaaaa '，' bbbbbbbb '，' cccccccccccc '，' dddddddd '，' eeeeeeeeee ')；if($ t==' num '){ $ data=JSON _ encode($ arr 1)；} else { $ data=JSON _ encode($ arr 2)；} echo $回调。'('.$数据。');'；这样，我们就可以很好地避免这个问题。

好吧，如果把以上的事情都联系起来，那么你就差不多知道什么是跨域，怎么解决了，所以不练说不好。让我们用百度的搜索API做一个简单的联系。

当然，还有一个重要的问题。jsonp应该在加载时动态加载，我们应该用代码创建它。

Jsonp实现百度主页跨域关联功能

主要思路是使用jsonp的跨域，使用百度的后台界面，根据输入框的内容从后台取数据，然后在搜索框下显示。li使用了A标签包，基本实现了与百度主页的收缩和跳转功能

结果截图

脚本var timer=null //图像稳定器vardominput=document . getelementbyid(' input ')vardomul=document . getelementsbyname(' ul ')[0]Dominput。on input=function(e){ clear time out(timer)//图像稳定器timer=settimeout(function(){ var DOM script=document . create element(' script ')DOM script . src=' https://sp 0 . Baidu.com/5a 1 fazu 8 aa 54 nxgko9 wthanf6 hy/su？wd=' e . target . value ' CB=jsoncb '/jsonp实现document . body . append child(DOM script)}。100)}函数jsoncbb(data)回调函数的实现{//jsonp let result=' ' data . s . foreach(element={ result=' lia href=' ' https://www . Baidu.com/s？wd=' element ' ' element '/a/Li ' })；domul . innerhtml=result }/script

点击关联词跳转即可实现

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。