（一）AJAX

ajax 就是从某个文件中去找相关的数据，把数据拿过来以后，利用数据 分析数据 去做我们想做的事情
    分两部分：拿数据
                  用数据

oUsername1.onblur = function() {
            //(以get方式       接口地址                          配参数 m,a,        当前输入的用户名    回调函数      )
拿数据-->    ajax('get', 'guestbook/index.php', 'm=index&a=verifyUserName&username=' + this.value, function(data) {
            alert(data);
解析数据-->        var d = JSON.parse(data);//解析
            
用数据-->    oVerifyUserNameMsg.innerHTML = d.message;
            
            if (d.code) {
                oVerifyUserNameMsg.style.color = 'red';
            } else {
                oVerifyUserNameMsg.style.color = 'green';
            }
        });
    }

（二）AJAX-跨域解决之 JSONP

跨域的问题
    域：域名
    跨域请求（访问）：一个域名下的文件请求另外一个域名下的资源，就产生了跨域
跨域的解决
    Jsonp : json with padding

<script>标签

src的作用 ： 加载（包含指定的外部文件）
                 -可以跨域包含
                 -被包含的资源可以是任何类型的文件(可以是txt,php等)
                 -他只关注被包含的文件的内容是否是合法的JS
原理
    定义函数
    包含外部文件，在被包含的文件中执行调用定义好的函数
    参数的（数据）的实现
    -问题：包含就调用，通过动态创建<script>实现按需调用
    -问题：包含动态文件时可以通过一个接口实现按需生成调用函数名称

1、JSONP : JSON with Padding
    1.script标签
    2.用script标签加载资源是没有跨域问题的
    在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情
    然后需要的时候通过script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会去执行我们前面定义好的函数，并且把数据当作这个函数的参数传入进去
<script>
function fn(data) {
    alert(data);
}
</script>
<!--<script src="2.txt"></script>-->
<script>
window.onload = function() {
    
    var oBtn = document.getElementById('btn');
    
    oBtn.onclick = function() {
        
        //当按钮点击的时候再去加载远程资源，让他执行
        
        var oScript = document.createElement('script');
        oScript.src = '2.txt';
        document.body.appendChild(oScript);//添加到页面当中
        
    }
    
}
</script>
</head>

<body>
    <input type="button" id="btn" value="按钮" />
</body>

AJAX-跨域解决之 JSONP的更多相关文章

  1. JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）

    1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...

  2. 转载的别人的ajax跨域解决方法

    http://dynamic.vip.xxxxxx.com/active/<controllers>/<active>/<id> 放在浏览器地址栏中访问可以得到正确 ...

  3. 【PHP】Ajax跨域解决方案 、jsonp、cors

    参考文章: 1.https://blog.csdn.net/u014727260/article/details/72793459 (后台java,实际上差不多) 2. 如何解决ajax跨域传输 数据 ...

  4. ajax 跨域解决方法

    最近在开发过程中,使用ajax去异步调取图片.在开发中这个功能没什么问题,可以后来提测,重新部署之后就有问题了,这就是ajax的跨域问题. ajax核心对象XMLHttpRequest本身是不支持跨域 ...

  5. 跨域解决之JSONP和CORS的详细介绍

    JSONP跨域和CORS跨域 什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名.协议.端口均相同. 浏览器执行Jav ...

  6. ajax 跨域解决 网上资料

    PHP中运用jQuery的Ajax跨域调用实现代码,需要的朋友可以参考下   可以在页面定义一个调用方法,如下: 复制代码代码如下: function getData(){ $.getJSON(&qu ...

  7. PHP Ajax跨域解决

    PHP Ajax 跨域问题最佳解决方案 本文通过设置Access-Control-Allow-Origin来实现跨域. 例如:客户端的域名是client.runoob.com,而请求的域名是serve ...

  8. ajax跨域原理以及jsonp使用

    jsonp介绍: JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. 由于同源策略,一般来说位于 server1.example. ...

  9. jquery ajax跨域解决

    双十一开发了一个抽奖API,最近上线了,各个事业部的大神们需要前台页面,异步调用我的抽奖API,要我提供js. js 提供之后发现不对,跨域了.之前也碰到过跨域的问题,研究过这个问题,三种方法解决. ...

  10. ajax跨域解决办法

    在使用jquery的ajax作请求时,http://127.0.0.1:8080,类似这样的一个本地请求,会产生跨域问题, 解决办法一: jsonp: var url= "http://12 ...

随机推荐

  1. 攻城狮在路上（叁）Linux（二十四）--- linux设置开机挂载及镜像文件挂载

    虽然可以手动进行文件系统的挂载,但是每次都手动挂载就会很麻烦,开机挂载的目的就是实现文件系统的自动挂载. 一.开机挂载:/etc/fstab及/etc/mtab 主要是通过修改/etc/fstab文件 ...

  2. angularjs 权威指南 版本 1.2.6

    1 $rootScope  run  : run 方法初始化全局的数据 ,只对全局作用域起作用 如$rootScope <script src="http://apps.bdimg.c ...

  3. mysql_multi启动数据库

    1.初始化数据库 在$mysql_base目录下,新增加存放data的文件夹,用mysql_install_db命令执行初始化 [root@ora11g scripts]# ./mysql_insta ...

  4. ios编码转换 国标 UTF-8

    我们知道,使用NSURLConnection的代理方法下载网页,存到一个NSData中, NSMutableData *pageData; [pageData appendData:data]; 如果 ...

  5. java学习笔记（3）：网络编程

    基本原理 客户端要发起通信,首先得知道运行服务器程序主机的IP地址,然后由网络的基础结构利用目标地址,将发送的信息传递到正确的主机上.地址可以是数字型(IPv4或者IPv6),也可以是字符串(必须先被 ...

  6. 在苹果手机上input有内阴影怎么去除

    一个input中在安卓手机上完全按照自己的样式去展示,但是在苹果手机上发现Input有内阴影,怎么去除内阴影呢? 在input样式中这样添加 #div{ .... appearance:button; ...

  7. phpstudy配置ssl

    https://yunpan.cn/cPEyzVycbkiE3 (提取码:03aa) 1.重写规则:http://www.cnphp.info/htaccess-rewrite.html 2.相关文档 ...

  8. Android 自定义title 之Action Bar

    Android 自定义title 之Action Bar 2014-06-29  飞鹰飞龙...  摘自 博客园  阅 10519  转 25 转藏到我的图书馆   微信分享:   Action Ba ...

  9. jQuery插件开发--（转）

    1,开始 可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字: jQuery.fn.myPlugin = function(){ //开始写你的代码吧! ...

  10. RDLC的部署(无法找到Microsoft.ReportViewer.ProcessingObjectModel.dll文件)

    CMD命令:C:\Windows\assembly\GAC_MSIL\ rdlc 相比微软的其他产品来说,做得还真是够烂的了,比水晶报表也烂得多. 但不知为何我还是宁可先择 rdlc.并且渐渐上手了. ...