本文和大家分享的主要是前端開(kāi)發(fā)中，ajax跨域請(qǐng)求相關(guān)內(nèi)容，希望對(duì)大家學(xué)習(xí)ajax有所幫助。

　　一、什么是跨域請(qǐng)求

　　域名http://www.maiziedu:8080/script/jquery.js，它由http://(協(xié)議)、www(子域名)、baidu(主域名)以及8080(端口號(hào))組成，當(dāng)另一個(gè)域名與其中任意一項(xiàng)對(duì)應(yīng)不等的話，那么我們說(shuō)兩個(gè)域名就是跨域的。

　　如http://www.maiziedu:8080的頁(yè)面上我們要請(qǐng)求數(shù)據(jù)到http://www.sohu:8080上去，那么就說(shuō)這種請(qǐng)求是跨域請(qǐng)求。

　　二、為什么要講跨域請(qǐng)求

　　因?yàn)樵谝话愕恼?qǐng)求條件下，我們的請(qǐng)求都是訪問(wèn)到原有服務(wù)。當(dāng)服務(wù)有分開(kāi)的時(shí)候，就必然會(huì)使用跨域請(qǐng)求。如果用原有的請(qǐng)求方式去請(qǐng)求跨域域名，請(qǐng)求是不能成功發(fā)送到后臺(tái)。因此，對(duì)于ajax跨域請(qǐng)求有獨(dú)特的方法使用。

　　三、json和jsonp

　　web開(kāi)發(fā)很多時(shí)候都會(huì)用到json數(shù)據(jù)，那jsonp是干嘛的？jsonp是ajax提供的一種跨域請(qǐng)求實(shí)現(xiàn)的方式。首先我們看一下json和jsonp的數(shù)據(jù)格式

　　json

　　{

　　"message":"獲取成功",

　　"state":"1",

　　"result":{"name":"工作組1","id":1,"description":"11"}

　　}

　　jsonp

　　callback({

　　"message":"獲取成功",

　　"state":"1",

　　"result":{"name":"工作組1","id":1,"description":"11"}

　　})

　　大家發(fā)現(xiàn)，jsonp其實(shí)就是callback(json)。

　　四、如何使用jsonp進(jìn)行跨域訪問(wèn)

　　例：

　　頁(yè)面js請(qǐng)求

　　$(document).ready(function(){var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"

　　+"?id=1&callback=?';

　　$.ajax({

　　url:url,

　　dataType:'jsonp',

　　processData: false,

　　type:'get',

　　success:function(data){

　　alert(data.name);

　　},

　　error:function(XMLHttpRequest, textStatus, errorThrown) {

　　alert(XMLHttpRequest.status);

　　alert(XMLHttpRequest.readyState);

　　alert(textStatus);

　　}});

　　});

　　后臺(tái)接收數(shù)據(jù)

　　@RequestMapping(value = "/getGroupById")public String getGroupById(@RequestParam("id") Long id,

　　HttpServletRequest request, HttpServletResponse response)

　　throws IOException {

　　String callback = request.getParameter("callback");

　　ReturnObject result = null;

　　Group group = null;

　　try {

　　group = groupService.getGroupById(id);

　　result = new ReturnObject(group, "獲取成功", Constants.RESULT_SUCCESS);

　　} catch (BusinessException e) {

　　e.printStackTrace();

　　result = new ReturnObject(group, "獲取失敗", Constants.RESULT_FAILED);

　　}

　　String json = JsonConverter.bean2Json(result);

　　response.setContentType("text/html");

　　response.setCharacterEncoding("utf-8");

　　PrintWriter out = response.getWriter();

　　out.print(callback + "(" + json + ")");

　　return null;

　　}

　　這樣，就可以達(dá)到跨域請(qǐng)求的目的了，這里注意的是。因?yàn)槲覀?/span>ajax里面請(qǐng)求的數(shù)據(jù)格式是jsonp，那么返回的數(shù)據(jù)格式就是callback(json)，如果直接返回json會(huì)報(bào)轉(zhuǎn)換類型失敗。

　　五、jQuery插件-jquery-jsonp

　　jQuery還提供了專門用于跨域請(qǐng)求的方法：

　　var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"

　　+"?id=1&callback=?";

　　$.jsonp({

　　"url": url,

　　"success": function(data) {

　　$("#current-group").text("當(dāng)前工作組:"+data.result.name);

　　},

　　"error": function(d,msg) {

　　alert("Could not find user "+msg);

　　}

　　});

　　ps:代碼來(lái)源于網(wǎng)絡(luò)

 

來(lái)源：搬磚工