AJAX跨域请求数据的四种方法(实例讲解)
由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据
请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象
var xhr = new XMLHttpRequest();
注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP"); 记住要进行兼容处理哦 在这里我就不写了
通过该对象进行获取
获取数据的四种状态 xhr.readyState 该属性保存着请求数据的几种状态
1.xhr.open(请求方式,请求地址,设置同/异步);
2.xhr.send(null);//发送请求 如果是post请求 那么参数需要在send中进行传递
3.会一直检测数据是否返回
4.数据返回 那么xhr.readyState的值是4 说明数据返回成功
那么我们需要进行跨域请求如何做呢
方案一:
利用script标签的src属性请求数据 src属性请求的数据浏览器是不会进行拦截的
<script srrc="http://jiang.com/AJAX/data.php"><script/>
这样我们是可以请求到数据的 但是这样有一些缺点
1.我们无法控制何时发送请求的 页面加载到这里就是发送请求的
2.这样的方式 请求方式是同步的请求 需要请求到数据才会执行下一步的代码 这样页面加载时间可能延长
3.所以建议不要使用这样的方式 不推荐
方案二:
在js中动态创建script标签 指定请求的接口
var script = document.createELement("script");
//将script追加到head标签中
document.getElementsTagName("head")[0].appendChild(script);
优点:我们可以控制请求的时机 并且这样请求的方式是异步的 不会延长页面加载的时间
重要点:我们可以在请求数据中调用请求页面中的函数 使用函数的形参接收请求回来的数据
方案三:
在请求的后端接口设置一个 请求头即可
Access-Control-Allow-Origin
含有这个请求头 前端页面跨域请求的数据就不会被浏览器进行拦截啦
方案四:
使用<iframe>标签 将一个页面 将可以可变的内容部分放置在该标签中 发送请求就会进行刷新啦 严格意义上不算ajax啦
该方式在ajax未出现 就是使用该标签实现请求数据的
以上这篇AJAX跨域请求数据的四种方法(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
jquery的ajax跨域请求原理和示例
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.
-
js跨域请求数据的3种常用的方法
由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求. 那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理: 1.JavaScript 在原生js(没有jQuery和ajax支持)的情况下,通常客户端代码是这样的(我假设是在localhost:8080的端口下的http://localhost:8080/webs/i.mediapower.mobi/wutao/index.html页面的body标签下面加入以下代码): <scr
-
JavaScript用JSONP跨域请求数据实例详解
前言 最近因为工作需要,需要把爱词霸的每日一句引入到页面上,爱词霸向外开放了 API, 接口返回 json 数据,为了让页面更轻巧,我没有用 jQuery,而是直接纯 js 写了一段代码: <script type="text/javascript"> function httpGetAsync(theUrl, callback) { xmlHttp = null; if (window.XMLHttpRequest) {// code for IE7, Firefox,
-
jQuery使用ajax跨域获取数据的简单实例
jQuery使用ajax跨域获取数据的简单实例 var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld"; jQuery.support.cors = true; //之前没有加这句老是提示no transport,我没去深想. $.ajax ({ type: "POST", contentType: "application/x-www-form-urlencoded",
-
AJAX跨域请求json数据的实现方法
我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果. 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的. jQuery的JSONPjQuery.getJSON方法: Js代码 复制代码 代码如下: jQuery.getJSON("http://search.twitter.
-
AJAX跨域请求数据的四种方法(实例讲解)
由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP"); 记住要进行兼容处理哦 在这里我就不写了 通过该对象进行获取 获取数据的四种状态 xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请
-
解决ajax跨域请求数据cookie丢失问题
前端: 以jquery为例: 需要加入 复制代码 代码如下: xhrFields: { withCredentials: true }, crossDomain: true, $.ajax({ type: postType, url: url, data: postData || '', xhrFields: { withCredentials: tru
-
jQuery使用JSONP实现跨域获取数据的三种方法详解
本文实例讲述了jQuery使用JSONP实现跨域获取数据的三种方法.分享给大家供大家参考,具体如下: 第一种方法是在ajax函数中设置dataType为'jsonp' $.ajax({ dataType: 'jsonp', url: 'http://www.a.com/user?id=123', success: function(data){ //处理data数据 } }); 第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可 $.getJSON('http:/
-
AJAX跨域请求之JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器.Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序. 不过,由于受到浏览器的限制,该
-
AJAX跨域请求JSONP获取JSON数据的实例代码
Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器.Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序. 不过,由于受到浏览器的限制,该方法
-
基于CORS实现WebApi Ajax 跨域请求解决方法
概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各种APP万花齐放的今天,API的跨域请求是不能避免的. 在默认情况下,为了防止CSRF跨站的伪造攻击(或者是 javascript的同源策略(Same-Origin Policy)),一个网页从另外一个域获取数据时就会收到限制.有一些方法可以突破这个限制,那就是大家熟知的JSONP, 当然这只是众多
-
Ajax如何进行跨域请求?Ajax跨域请求的原理
本文实例为大家分享了Ajax跨域请求的具体实现过程,供大家参考,具体内容如下 下面我们在本地建两个站点演示一下 第一步首先我们在本地搭建好一个Apache服务器:下载地址: 第二步服务器配置好以后,在本地配置好两个虚拟的域名: 第三步我们在C盘建一个文件夹命名为"HTML5": 第四步找到Apache虚拟主机的配置文件,然后打开配置文件 第五步在第三步建的HTML5文件夹下分别建一个文件夹a和文件夹b; 第六步修改Apache虚拟主机的配置文件,如图 第七步修改一下host文件,添加a
-
jsonp跨域请求数据实现手机号码查询实例分析
本文实例讲述了jsonp跨域请求数据实现手机号码查询的方法.分享给大家供大家参考,具体如下: 前言 网上有很多开放的api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果不借助php等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错的选择. 知识准备 之前一篇<说说JSON和JSONP 也许你会豁然开朗>对jsonp已经介绍的很详细了,这里就不多介绍了,直接上实例吧 代码: <!DOCTYPE HTML> <html> <head&
-
用iframe设置代理解决ajax跨域请求问题
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题.于是想用代理的方式来解决这个跨域问题. 什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 方案:在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理,然后通过iframe的document.getElementById("proxy&q
随机推荐
- SQL 存储过程基础语法之一
- JavaScript过滤字符串中的中文与空格方法汇总
- ASP.NET2.0+SQL Server2005构建多层应用第1/4页
- android上传图片到PHP的过程详解
- php jq jquery getJSON跨域提交数据完整版
- Python3实战之爬虫抓取网易云音乐的热门评论
- Mysql复制表结构、表数据的方法
- linux 自动化运维工具ansible的使用详细教程
- 深入C++ string.find()函数的用法总结
- 可以用IE轻松远程控制对方电脑的软件 motelyAnywhere 安装使用图文教程
- linux命令详解date使用方法(计算母亲节和父亲节日期脚本示例)
- vbs(asp)下的Function 语句
- 浅谈Java三目运算
- C#在后台运行操作(BackgroundWorker用法)示例分享
- Android编程操作手机通讯录的方法示例
- EM算法的python实现的方法步骤
- 使用Windows批处理和WMI设置Python的环境变量方法
- PHP生成指定范围内的N个不重复的随机数
- 易语言调节器中调节钮被按下触发的两种情况讲解
- Android使用动画动态添加商品进购物车