原生js的ajax和解决跨域的jsonp(实例讲解)

作者：女女的家_747 | 2022-11-14 19:59

下面小编就为大家带来一篇原生js的ajax和解决跨域的jsonp(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

最近慢慢感觉，学再多框架，库，都不如老老实实先把基础弄扎实了。

不说废话，先上一个用ajax请求下本地的一个.txt文件




  
  Title

执行效果如下，点击show就会通过ajax请求本地的.txt文件。

代码比较简单，加上注释，相信很容易就看得懂。

但是工作中我们经常会请求其他域下的资源（因为同源策略），这个时候就遇到了跨域（协议，端口，域名任何一个不同就算是跨域）。

解决跨域的一种常用办法就是jsonp，虽然他有局限性（只支持get请求），不过优点是兼容老式浏览器（不过现在好像很少有人在意老式浏览器了）。

jsonp的基本原理：就是通过动态创建script标签，script标签的src是没有跨域限制的。

接下来上一个类似百度搜索下拉的页面




  
  Title
  
  
  




















    

    
        
            
            
                
                    
                
            

            
                女女的家_747            

            
                这个屌丝很懒，什么也没留下！            
            
            

                                
                    
                    关注作者
                            

        
    


    
        Tags | 热门标签
        
            
                                
                    ajax
                
                                
                    bootstrap
                
                                
                    chart
                
                                
                    chrome
                
                                
                    css
                
                                
                    css3
                
                                
                    firebug
                
                                
                    firefox
                
                                
                    html
                
                                
                    html5
                
                                
                    javascript
                
                                
                    jquery
                
                                
                    json
                
                                
                    node.js
                
                                
                    npm
                
                                
                    postman
                
                                
                    vue.js
                
                                
                    webkit
                
                                
            
        
    


    
        RankList | 热门文章
        
            
                                
                    1我应该在什么情况下使用Ebean或EbeanServer？
                
                                
                    2如何在不触发浏览器SSL检查的情况下重定向www流量？
                
                                
                    3Pycharm调试器 - 帧不可用
                
                                
                    4退出儿童过程
                
                                
                    5使用+ =但不附加列表时的UnboundLocalError
                
                                
                    6将R自动安装SystemRequirements:对于尚未拥有该程序的用户
                
                                
                    7indexOf在javascript中的混乱
                
                                
                    8包含libxml2和LLVM模块映射
                
                                
                    9如果"14"LEQ"7"()失败
                
                                
                    10Python namedtuple的可变默认参数
                
                                
                    11自定义Firefox Developer开发工具颜色主题
                
                                
                    12无论密钥如何,Spark总结值
                
                                
                    13Numpy vectorize错误地将输出转换为整数
                
                                
                    14如何解决这种复发T(n)= T(n-1)+ lg(1 + 1/n),T(1)= 1？
                
                                
                    15全面列表中的两个for循环
                
                                
                    16为什么这个C#函数表现得像我在使用指针？
                
                                
                    17无法在Android中解析方法getContext()
                
                                
                    18不能将脚本名称识别为cmdlet,函数等; 也不能在简单的脚本上找到位置参数
                
                                
                    19显示绝对值angularjs
                
                                
                    20仅在函数或构造函数实现中允许参数初始化

DevBox开发工具箱 | 专业的在线开发工具网站