• Ajax学习：解决跨域_JSONP

    JSONP：非官方的跨域解决方案,纯粹依靠程序员的聪明才智，只支持get请求

    JSONP是怎么工作的：再页面中有一些标签天生具有跨域能力，就像是link,img,iframe,script

            JSONP就是利用script标签的跨域能力来发送请求

    如下所示：是跨域请求：源是file协议 路径是本地地址  目的是：http协议 域名和路径都他他不一样

    使用的是 script标签

     

     

    使用 script标签（原理）

    1. const data={
    2.     name:'张三'
    3. };
    4. console.log(data)
    5.  
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <script src="./app.js">script>
    11. body>
    12. html>

     使用file协议发起请求：这时候script请求的js也是file协议的

    使用http协议访问 这时候访问的资源app遵循的也是http协议

     

     

     这时候使用此http协议的url网址：代替原先的路径

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         #result {
    11.             width: 300px;
    12.             height: 100px;
    13.             border: solid 1px #890;
    14.         }
    15.     style>
    16. head>
    17.  
    18. <body>
    19.     <div id="result">div>
    20.     <script>
    21.         //处理数据
    22.         function handle(data) {
    23.             //获取result元素
    24.             const result = document.getElementById('result');
    25.             result.innerHTML = data.name;
    26.         }
    27.     script>
    28.     
    29.     <script src="http://127.0.0.1:8848/ECMAScript6-11/Ajax/%E5%8E%9F%E7%94%9Fajax/%E8%B7%A8%E5%9F%9F/app.js">script>
    30.  
    31. body>
    32.  
    33. html>

    js部分 

    1. const data={
    2.     name:'张tt三'
    3. };
    4.  
    5. handle(data)

    这时候使用本地资源打开此页面，访问成功：也就是使用file协议 使用script标签 访问的资源是http协议：跨域成功（实现了script跨域实现跨域）

    返回的数据是数据和函数调用，script标签做解析处理，然后在html页面显示

    script发送跨域请求，返回的结果是函数调用的内容==js代码，这样才可以被前端引擎解析使用

    服务器端 

    1. const { json } = require('express');
    2. const express=require('express')
    3.  
    4. const app=express();
    5. app.get('/home',function(requset,response){
    6.     //设置响应头 名称 值----设置允许跨域
    7.    // response.setHeader('Access-Control-Allow-Origin','*');
    8.     //设置响应体
    9.     response.sendFile(__dirname+'/同源策略.html');//绝对路径
    10. })
    11. app.get('/data',function(requset,response){
    12.     //设置响应头 名称 值----设置允许跨域
    13.    // response.setHeader('Access-Control-Allow-Origin','*');
    14.     //设置响应体
    15.     response.send('用户数据');//绝对路径
    16. })
    17. app.get('/jsonp',function(requset,response) {
    18.     response.send('console.log("jsonp")');
    19.     
    20. })
    21. app.listen(9000,()=>{
    22.     console.log('9000启动成功')
    23. })

    html端：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         #result {
    11.             width: 300px;
    12.             height: 100px;
    13.             border: solid 1px #890;
    14.         }
    15.     style>
    16. head>
    17.  
    18. <body>
    19.     <div id="result">div>
    20.     <script>
    21.         //处理数据
    22.         function handle(data) {
    23.             //获取result元素
    24.             const result = document.getElementById('result');
    25.             result.innerHTML = data.name;
    26.         }
    27.     script>
    28.     
    29.    <script src="http://127.0.0.1:9000/jsonp">script>
    30. body>
    31.  
    32. html>

    如果返回的不是js语句体，就会出错（因为使用script标签发起请求，js引擎无法解析非js代码） 

     服务器如果返回script的结果是 函数调用结果（js代码）

    1. app.get('/jsonp',function(requset,response) {
    2.  
    3.    const data={
    4.        name:'张三啊'
    5.    };
    6.    //将数据转化为字符串
    7.    let str=JSON.stringify(data);
    8.    //返回结果 不可以是数据 j代码 end防止添加不知名的响应头
    9.    //``模板字符串 方便拼接
    10.    response.end(`handle(${str})`)
    11.      
    12. })

     返回结果是函数调用，函数的参数就是想给客户端的结果数据

     

  • 相关阅读:
    微信小程序-request fail
    代码随想录算法训练营第五十七天| 392.判断子序列 115.不同的子序列
    Spring MVC中如何进行页面重定向呢？
    水果店活动朋友圈文案怎么写，水果店文字文案这么写
    京联易捷科技与劳埃德私募基金管理有限公司达成合作协议签署
    msvcp140.dll丢失怎么办？msvcp140.dll重新安装的解决方法
    Go语言高并发编程——互斥锁、条件变量
    github access token
    C#实现队列结构定义、入队、出队操作
    Pycharm VSCode快捷键设置 Duplicate CopyLine Down
  • 原文地址：https://blog.csdn.net/weixin_47295886/article/details/128145846