为什么需要跨域呢？这是因为我们一般的请求都是使用xhr的，但是它只能调用同一个域里面的接口，有时候，我们想要在自己的站点中调用其他站点的接口，这时候就要用到跨域了。其实，跨域并不难，我们可以通过JavaScript的动态脚本加载技术来实现。需要注意的是，跨域是需要后台配合的。我们需要约定了一个函数（函数名以参数的形式传到后台），前台使用这个函数进行解析后台返回的数据，而后台需要把返回给前台的数据放到这个函数的参数位置进行调用。下面我们来看一下具体的实现代码：
后台代码如下，为了方便测试, 我已经把它部署到了服务器上了，地址是http://zhangzhanyu.nfreehost.com/jsonp.php
 <?php

 　　$callback = $_GET['callback' ];

　　　echo "{$callback}({'msg':'this is a jquery jsonp test message!'})";

 ?>
 
前端代码：
<!DOCTYPE html>

<html lang="en">

<head>

　　<meta charset="UTF-8">

　　<title>使用JavaScript实现跨域请求</title>

　　<script type="text/javascript">

　　　　var scriptElement = document.createElement("script");

　　　　scriptElement.src = "http://zhangzhanyu.nfreehost.com/jsonp.php?callback=callback";

　　　　document.head.appendChild(scriptElement);

　　　　function callback(jsonString) {

　　　　　　//var data = JSON.parse(jsonString);

　　　　　　alert(jsonString.msg);

　　　　}

　　</script>

</head>

<body>

</body>

</html>

 

原生JavaScript实现跨域的更多相关文章

  1. 实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法

    关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace Wcf ...

  2. ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  3. 【转】ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  4. JavaScript(9)--- 跨域

    JavaScript(9)--- 跨域 一.跨域原理(同源策略) 在项目搭建的初期,因为现在项目基本上都是前后端分离,所以不可避免地会遇到跨域问题,而造成跨域的罪魁祸首就是浏览器的同源策略.所以要解决 ...

  5. 原生ajax jq跨域

    原生js封装ajax //创建XmlhttpRequest对象 function createXHR(){     var xhr=null;     if(XMLHttpRequest){      ...

  6. javascript:cors跨域postMessage、xhr2和xmldomain

    一.h5 postMessage node http-server配置服务器 有关配置:请参考我的http://www.cnblogs.com/leee/p/5502727.html 我把文件夹a配置 ...

  7. Ajax进阶之原生js与跨域jsonp

    什么是Ajax? 两个数求和: 用Jquery和数据用json格式 viws函数: from django.shortcuts import render,HttpResponse # Create ...

  8. arcgis api for JavaScript _跨域请求

    arcgis api for JavaScript  中出现跨域请求是常见问题, 通常出现类似如下错误消息类似: XMLHttpRequest cannot load http://10.32.2.7 ...

  9. 深入浅出JavaScript之跨域总结

    什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...

随机推荐

  1. org.quartz-scheduler 动态添加自动任务

    1.添加pom.xml <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId> ...

  2. 设置网页icon标志

    下载一个你喜欢的icon,文件格式为ico,然后将这个文件重命名为favicon.ico,并把文件放在网站的根目录下. 一般在ie8版本以上都支持icon图标.但是在此版本一下,我们需要添加一段代码. ...

  3. dos命令：系统命令

    系统命令 一.mode命令 1.介绍 配置系统设备. 2.语法 串行端口: MODE COMm[:] [BAUD=b] [PARITY=p] [DATA=d] [STOP=s] [to=on|off] ...

  4. 【Python】爬虫-1

    #练习1:获取搜狐网页上所有的URL并且把与篮球有关的内容筛选出来 #算法: #.获取搜狐网站所有内容 #.判断哪些是链接,获取URL格式有效的链接 #.获取每个有效URL网页的内容 #.判断内容是否 ...

  5. tomcat多实例的端口设置

    需要改4个端口 8080  8009 8005 8443 8080改成8081 8005改成8105 8009改成8109 8443 改成8543

  6. 20165228 2017-2018-2 《Java程序设计》第2周学习总结

    20165228 2017-2018-2 <Java程序设计>第2周学习总结 教材学习内容总结 标识符:名字 组成:字母/下划线/美元符号或数字 注意:标识符的第一个字符不能是数字字符,且 ...

  7. INS-20802 Oracle Cluster Verification Utility failed解释说明

    背景:安装RAC,安装GI集群管理软件时,在最后快结束时,总是报如上INS-错误 #官方文档:error 说明;字符串解析失败 INS-20802: string failed. Cause: The ...

  8. 2017青岛赛区网络赛 Smallest Minimum Cut 求最小割的最小割边数

    先最大流跑一遍 在残存网络上把满流边容量+1 非满流边容量设为无穷大 在进行一次最大流即可 (这里的边都不包括建图时用于反悔的反向边) #include<cstdio> #include& ...

  9. MySQL篇，第三章：数据库知识3

    MySQL 数据库 3 索引 1.普通索引(MUL)   2.唯一索引(UNI)   3.主键索引(PRI) 1.使用规则 1.一个表中只能有一个主键(primary)字段 2.对应字段的值不允许重复 ...

  10. s21day05 python笔记

    s21day05 python笔记 一.昨日内容回顾及补充 回顾 补充 列表独有功能 extend:循环添加到一个列表中 1.users = ['张三',66],people = ['王五',99] ...