全栈---JSONP

讲一讲你对JSONP的理解?

    1.前端网页中用ajax请求跨域服务器的网址  会报跨域错误

用script标签的src属性去请求跨域服务器的网址 不会报跨域错误,但是 会直接把请求过来的编码用v8引擎去运行

2. 我们可以在后端写一个js引擎能识别的字符串发送给前端,这个字符串是这样的:

' fn({"name":"karen"}) '

前端可以用script标签的src属性去请求这个网址,请求完毕以后 v8就会直接运行这个编码 去调用fn函数,所以我们必须提前创建这个函数

3.函数的名称问题:  前端可以通过querystring把函数名以参数的形式发送给后端

后端解析了以后 直接拼接到数据中(比如那个fn)

举例：

新建两个文件夹，一个main一个first,main设置路由让first去访问main中的数据。

first的端口号为8082，main的端口号为8080

main>index.js

first>index.js

first>src>index.html

当我们运行first页面时点击按钮获取数据就会报错，因为跨域了。上一个知识点我们讲了利用setHeader来解决这个问题

还可以利用另外一种方法，将后端发送给我们的数据转化成字符串，存入文件中，利用页面中的标签来读取这份文件并渲染到页面上，可以读取文件的标签有a标签，img标签，script标签；所以我们可以利用a标签或者img标签或者script标签来发送请求接收字符串，然后再渲染到页面上。

小试一下：

在first页面上添加script标签，将数据的网址添加scr路径中；通过点击按钮来读取这个script中的数据

运行代码：

可以成功的打印main文件中的数据

将前面的代码进行改进：

当我们点击按钮想要获取后端的数据是，运行函数；函数运行添加一个script标签，添加进我们想要访问的服务器的网址，添加进body标签中；声明一个全局函数，接收发送过来的数据，利用script发送请求然后运行我们后端发送过来的数据，当然后端的数据就要修改发送过来的样式。

后端数据

改进first>src>index.html

运行代码，后台打印出数据。

这样虽让能很好的解决了跨域的问题，但是需要前端和后端程序员的配合；后端数据使用什么函数名包裹数据，前端就需要在html文件中声明一个怎样的全局函数。如果后端声明的函数名被前端页面所占用，那么就只有让后端换一个函数名，麻烦。

怎样修改呢？

我们可以想到在网址上去获取，利用域名后面的querystring将函数名传递给后端工程师。

改进：