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未出现  就是使用该标签实现请求数据的

时间: 2024-10-23 07:14:40

AJAX跨域请求数据的相关文章

ajax 跨域请求数据 jsonp 示例

1.请求页面 <!doctype html><head><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jsonp调用方法</title></head><body> <script type="text/javasc

将微博或者qq空间的说说同步至博客园 wcf+js(ajax)跨域请求(1)

前天刚写了篇文章使用Bootstrap为你的博客园自定义轮播图片(今天将图片加载的顺序调整了下,不在访问的时候直接加载,而是页面加载最后在脚本里面动态添加dom元素),虽说技术含量不怎么高,但是大家还算感兴趣.其实对博主来说最关键是博客的积分在涨.所以趁热打铁,再来一篇使用wcf+js ajax跨域请求数据同步空间说说的帖子. 因为是请求qq说说的数据,所以要登陆我的qq,这个很麻烦,总不能让每个访客都登陆的qq,然后把数据取出来吧,而且qq也没有相关的接口提供,登陆的时候还要处理验证码.所以这

ajax 跨域请求之jsonp

需求 遇到的问题 解决办法 需求 今天项目需要访问一个外部链接获取数据,是跨域的.使用ajax 请求一直提示: 遇到的问题 1. 如何使用ajax 跨域请求数据 2. 能不能post请求 解决办法 经过网上查找资料,能使用jsonp请求跨域数据. jsonp请求数据只能get,不支持post跨域请求 使用方法,见代码: $.ajax({ type: "post",//这里写post也没用,也是get请求 url: "url", dataType: "jso

CORS ajax跨域请求php简单完整案例一则

一.CORS: Cross-Origin Resource Sharing CORS是Cross-Origin Resource Sharing的缩写,表示跨域的资源分享,不仅可以跨子域,就算域名长得完全不一样,也可以进行资源获取. 比较常见的应用之一就是Ajax跨域请求数据. 这个特性IE11开始支持: 和股市一样,大好河山一片绿,青青草原漫无边. 二.ajax跨域请求的header设置和案例 和传统ajax请求相比,ajax跨域请求的偶尔工作量主要在数据接收方那一端,也就是在服务器端设置.

Ajax 跨域请求 jsonp获取json数据

遇到Ajax的跨域请求出问题 找了中解决办法如下: 参考内容:http://justcoding.iteye.com/blog/1366102 由于受到浏览器的限制,该方法不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办? 理解同源策略 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的

AJAX跨域请求json数据的实现方法

这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果. 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的. jQuery的JSONPjQuery.getJSON方法:Js代码 jQuery.get

本地主机作服务器解决AJAX跨域请求访问数据的方法

近几天学到ajax,想测试一下ajax样例,由于之前在阿里租用的服务器过期了,于是想着让本地主机既做服务器又做客户端,只是简单地测试,应该还行. 于是,下载了xampp,下载网址http://www.apachefriends.org ,只需要解压傻瓜式地安装就可以. 找到安装软件的目录,点击xampp-control.exe然后启动Apache服务, 打开浏览器,在地址栏输入localhost,出现如下图片,说明安装启动都没问题 现在编写两个简单的文本,一个txt文件,一个html代码: 截图

AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据

由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办? 理解同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同.这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作.这个

JQuery的Ajax跨域请求的

JQuery的Ajax跨域请求的(Ajax) 什么是jsonp格式呢?API原文:假设获取的数据文件存放在远程server上(域名不同.也就是跨域获取数据),则须要使用jsonp类型.使用这样的类型的话,会创建一个查询字符串參数 callback=? .这个參数会加在请求的URL后面. server端应当在JSON数据前加上回调函数名.以便完毕一个有效的JSONP请求.意思就是远程服务端须要对返回的数据做下处理,依据client提交的callback的參数,返回一个callback(json)的