跨域請求之jQuery的ajax jsonp的使用解惑-js教程-PHP中文網

跨域請求之jQuery的ajax jsonp的使用解惑

高洛峰

發布： 2017-01-09 10:50:01

原創

1331 人瀏覽過

直接執行了error方法提示錯誤－ajax jsonp之前並沒有用過，對其的理解為跟普通的ajax請求差不多，沒有深入了解；出現了這種錯誤，幾經調試(檢查後台的程式碼和js部分的屬性設定)還是不行，讓我感覺很是意外和不解。於是，決定仔細研究下ajax jsonp的使用，並將最後測試成功的學習經驗和大家分享下!
　　首先，貼出可以成功執行的程式碼：
(頁部分)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Untitled Page</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
$.ajax({ 
type : "get", 
async:false, 
url : "ajax.ashx", 
dataType : "jsonp", 
jsonp: "callbackparam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback) 
jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名 
success : function(json){ 
alert(json); 
alert(json[0].name); 
}, 
error:function(){ 
alert(&#39;fail&#39;); 
} 
}); 
var a="firstName Brett"; 
alert(a); 
}); 
</script> 
</head> 
<body> 
</body> 
</html>

登入後複製

(處理程序部分)

<%@ WebHandler Language="C#" Class="ajax" %> 
using System; 
using System.Web; 
public class ajax : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/plain"; 
string callbackFunName = context.Request["callbackparam"]; 
context.Response.Write(callbackFunName + "([ { name:\"John\"} ] )"); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

登入後複製

(請求抓包截圖)

跨域请求之jQuery的ajax jsonp的使用解惑

function success_jsonpCallback(data) 
{ 
success(data); 
}

登入後複製

更多跨域請求之jQuery的ajax jsonp的使用解惑相關文章請關注PHP惑中文！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

跨域請求之jQuery的ajax jsonp的使用解惑