jquery中ajax处理跨域的三大方式_jquery-js教程-PHP中文网

首页

web前端

js教程

jquery中ajax处理跨域的三大方式_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:21 PM

ajax jquery 跨域

由于JS同源策略的影响，因此js只能访问同域名下的文档。因此要实现跨域，一般有以下几个方法：

一、处理跨域的方式：

1.代理

2.XHR2

HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已经实现了跨域访问。但ie10以下不支持

只需要在服务端填上响应头：

  header("Access-Control-Allow-Origin:*");
  /*星号表示所有的域都可以接受，*/
 header("Access-Control-Allow-Methods:GET,POST");

登录后复制

3.jsonP

原理：

ajax本身是不可以跨域的，
通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。

其实设置了dataType: 'jsonp'后，$.ajax方法就和ajax XmlHttpRequest没什么关系了，取而代之的则是JSONP协议。JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。

ajax的跨域写法：

（其余写法和不跨域的一样）：

比如

 /*当前网址是localhost:3000*/
 js代码
 
 $.ajax({
   type:"get",
   url:"http://localhost:3000/showAll",/*url写异域的请求地址*/
   dataType:"jsonp",/*加上datatype*/
   jsonpCallback:"cb",/*设置一个回调函数，名字随便取，和下面的函数里的名字相同就行*/
   success:function(){
    。。。
   }
  });

 /*而在异域服务器上，*/
 app.js
 app.get('/showAll',students.showAll);/*这和不跨域的写法相同*/
 
  
 /*在异域服务器的showAll函数里，*/

 var db = require("./database");

 exports.showAll = function(req,res){

 /**设置响应头允许ajax跨域访问**/
 res.setHeader("Access-Control-Allow-Origin","*");
  /*星号表示所有的异域请求都可以接受，*/
 res.setHeader("Access-Control-Allow-Methods","GET,POST");

 var con = db.getCon();
 con.query("select * from t_students",function(error,rows){
  if(error){
   console.log("数据库出错："+error);
  }else{
   /*注意这里，返回的就是jsonP的回调函数名+数据了*/
   res.send("cb("+JSON.stringify(r)+")");
  }
 });
 }

登录后复制

二、解决ajax跨域访问、 JQuery 的跨域方法

JS的跨域问题，我想很多程序员的脑海里面还认为JS是不能跨域的，其实这是一个错误的观点；有很多人在网上找其解决方法，教其用IFRAME去解决的文章很多，真有那么复杂吗？其实很简单的，如果你用JQUERY，一个GETJSON方法就搞定了，而且是一行代码搞定。

下面开始贴出方法。

//跨域（可跨所有域名）
$.getJSON("http://user.hnce.com.cn/getregion.aspx&#63;id=0&jsoncallback=&#63;",function(json){ 
//要求远程请求页面的数据格式为： &#63;(json_data) //例如： //&#63;([{"_name":"湖南省","_regionId":134},{"_name":"北京市","_regionId":143}]) alert(json[0]._name); 
}); 

$.getJSON("http://user.hnce.com.cn/getregion.aspx&#63;id=0&jsoncallback=&#63;",function(json){ 
//要求远程请求页面的数据格式为： &#63;(json_data) //例如： //&#63;([{"_name":"湖南省","_regionId":134},{"_name":"北京市","_regionId":143}]) alert(json[0]._name); 
});

登录后复制

注意，getregion.aspx中，在输出JSON数据时，一定要用Request.QueryString["jsoncallback"]，将获取的内容放到返回JSON数据的前面，假设实际获取的值为42342348，那么返回的值就是 42342348([{"_name":"湖南省","_regionId":134},{"_name":"北京市","_regionId":143}])

因为getJSON跨域的原理是把？随机变一个方法名，然后返回执行的，实现跨域响应的目的。

下面一个是跨域执行的真实例子：

<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//跨域（可跨所有域名） 
$.getJSON("http://e.hnce.com.cn/tools/ajax.aspx&#63;jsoncallback=&#63;", { id: 0, action: 'jobcategoryjson' }, function(json) { alert(json[0].pid); alert(json[0].items[0]._name); });　 
 </script>

登录后复制

<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//跨域（可跨所有域名） 
$.getJSON("http://e.hnce.com.cn/tools/ajax.aspx&#63;jsoncallback=&#63;", { id: 0, action: 'jobcategoryjson' }, function(json) { alert(json[0].pid); alert(json[0].items[0]._name); });　 
 </script>

登录后复制

jQuery跨域原理:

浏览器会进行同源检查,这导致了跨域问题,然而这个跨域检查还有一个例外那就是HTML的

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7360

Java教程

1628

CakePHP 教程

1353

Laravel 教程

1265

PHP教程

1214

显示更多

Related knowledge

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

如何使用Ajax从PHP方法中获取变量？ Mar 09, 2024 pm 05:36 PM

使用Ajax从PHP方法中获取变量是Web开发中常见的场景，通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中，将介绍如何使用Ajax从PHP方法中获取变量，并提供具体的代码示例。首先，我们需要编写一个PHP文件来处理Ajax请求，并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码：

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：

PHP 与 Ajax：创建动态加载内容的解决方案 Jun 06, 2024 pm 01:12 PM

Ajax（异步JavaScript和XML）允许在不重新加载页面情况下添加动态内容。使用PHP和Ajax，您可以动态加载产品列表：HTML创建一个带有容器元素的页面，Ajax请求加载数据后将数据添加到该元素中。JavaScript使用Ajax通过XMLHttpRequest向服务器发送请求，从服务器获取JSON格式的产品数据。PHP使用MySQL从数据库查询产品数据，并将其编码为JSON格式。JavaScript解析JSON数据，并将其显示在页面容器中。点击按钮触发Ajax请求，加载产品列表。

PHP 与 Ajax：构建一个自动完成建议引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax构建自动完成建议引擎：服务器端脚本：处理Ajax请求并返回建议(autocomplete.php)。客户端脚本：发送Ajax请求并显示建议(autocomplete.js)。实战案例：在HTML页面中包含脚本并指定search-input元素标识符。

如何判断jQuery元素是否具有特定属性？ Feb 29, 2024 am 09:03 AM

如何判断jQuery元素是否具有特定属性？在使用jQuery操作DOM元素时，经常会遇到需要判断元素是否具有某个特定属性的情况。这种情况下，我们可以借助jQuery提供的方法来轻松实现这一功能。下面将介绍两种常用的方法来判断一个jQuery元素是否具有特定属性，并附上具体的代码示例。方法一：使用attr()方法和typeof操作符//判断元素是否具有特定属

了解jQuery中eq的作用及应用场景 Feb 28, 2024 pm 01:15 PM

jQuery是一种流行的JavaScript库，被广泛用于处理网页中的DOM操作和事件处理。在jQuery中，eq()方法是用来选择指定索引位置的元素的方法，具体使用方法和应用场景如下。在jQuery中，eq()方法选择指定索引位置的元素。索引位置从0开始计数，即第一个元素的索引是0，第二个元素的索引是1，依此类推。eq()方法的语法如下：$("s

See all articles

jquery中ajax处理跨域的三大方式_jquery

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题