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工具

熱工具

熱門話題

Java教學

1659

CakePHP 教程

1416

Laravel 教程

1310

PHP教程

1258

C# 教程

1232

Related knowledge

PHP 與 Ajax：建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。

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請求，載入產品清單。

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

jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s

PHP 與 Ajax：提升 Ajax 安全性的方法 Jun 01, 2024 am 09:34 AM

為了提升Ajax安全性，有幾種方法：CSRF保護：產生令牌並將其傳送到客戶端，在請求中新增至伺服器端進行驗證。 XSS保護：使用htmlspecialchars()過濾輸入，防止惡意腳本注入。 Content-Security-Policy頭：限制惡意資源加載，指定允許載入腳本和樣式表的來源。驗證伺服器端輸入：驗證從Ajax請求接收的輸入，防止攻擊者利用輸入漏洞。使用安全Ajax函式庫：利用jQuery等函式庫提供的自動CSRF保護模組。

See all articles

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

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題