ajax跨域

時間 2019-12-14

標籤 ajax 欄目 Ajax 简体版

原文原文鏈接

新建springboot項目

客戶端：AjaxClient 端口：8081javascript

服務端：AjaxServer 端口：8080html

服務端代碼

package com.kunfan;前端

import org.springframework.web.bind.annotation.GetMapping;java

import org.springframework.web.bind.annotation.RequestMapping;jquery

import org.springframework.web.bind.annotation.RestController;git

@RestController//rest接口github

@RequestMapping("/ajax")web

public class Constroller {ajax

@GetMapping("/getMessage")//spring4.0方法spring

public Model getone(){

System.out.println("getone");

return new Model("jack","1001030202");

}

package com.kunfan;

public class Model {

private String name;

private String idCard;

public String getIdCard() {

return idCard;

}

public void setIdCard(String idCard) {

this.idCard = idCard;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public Model(String name, String idCard) {

super();

this.name = name;

this.idCard = idCard;

}

客戶端代碼

Jasmine框架使用

一、https://jasmine.github.io/ 下載jasmine包

二、將解壓後lib目錄下的文件夾拷貝到客戶端工程 static目錄下

三、客戶端工程static目錄下新增index.html，並在其中編寫jasmine測試用例

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<a herf="#" onclick="getMsg()">getMessage</a>

/**

不用jasmine框架

**/

function getMsg(){

$.ajax({

url : "http://localhost:8080/ajax/getMessage", //請求url

type : "GET", //請求類型 post|get

// data : "key=value&key1=value2", //後臺用 request.getParameter("key");

dataType : "json", //返回數據的類型 text|json|html--

success : function(data){ //回調函數和後臺返回的數據

alert(JSON.stringify(data));

}

});

}

/**

jasmine框架測試

**/

// 每個測試用例的超時時間

jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

// 請求的接口的前綴

var base = "http://localhost:8080/ajax";

//測試模塊

describe("getMessageJasmine", function() {

// 測試方法

it("getMessage", function(done) {

// 服務器返回的結果

var result;

//調用異步請求將結果保存到result

$.getJSON(base + "/getMessage").then(function(jsonObj) {

result = jsonObj;

});

// 因爲是異步請求，須要使用setTimeout來校驗

setTimeout(function() {

expect(result).toEqual({"name":"jack","idCard":"1001030202"});

// 校驗完成，通知jasmine框架

done();

}, 100);

});

</script>

</body>

</html>

發生跨域緣由：

同時知足三個條件：瀏覽器限制、跨域、xhr請求

jsonp解決跨域：

新建ControllerAdvice

package com.kunfan;

import org.springframework.web.bind.annotation.ControllerAdvice;

import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;

@ControllerAdvice

public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{

public JsonpAdvice() {

super("callback");//此值應該與前端ajax調用中jsonp的值相同，ajax默認爲callback

}

jasmine測試代碼

// 測試方法（jsonp解決跨域）

it("jsonp解決跨域", function(done) {

// 服務器返回的結果

var result;

//調用異步請求將結果保存到result

$.ajax({

url : base+"/getMessage",//請求url

type : "GET", //請求類型 post|get

// data : "key=value&key1=value2", //後臺用 request.getParameter("key");

dataType : "jsonp", //返回數據的類型 text|json|html--

jsonp : "callback",//默認可不寫

success : function(data){ //回調函數和後臺返回的數據

result = data;

}

});

Jsonp自動生成參數說明

Jsonp請求會添加請求參數

http://localhost:8080/ajax/getMessage?callback=jQuery33108559808800928295_1535179383605&_=1535179383606

Callback是jsonp中約定的參數值（即：ajax中jsonp的值）

_：是否緩存，在ajax中添加cache : true ，此參數就沒了

Jsonp工做機制

一、改服務端代碼

二、約定，經過jsonp的值約定

三、動態建立script，經過script函數調用發出請求，返回值是也是js，函數名callback參數的值，函數參數是返回的json對象

四、只支持get請求

五、發送的不是xhr請求

六、不能異步、事件等

被調用方解決跨域

簡單請求：瀏覽器先執行後判斷

非簡單請求：瀏覽器先判斷後執行

服務器配置（filter解決）

AjaxServerApplication.java註冊filter

@Bean

public FilterRegistrationBean filter(){

FilterRegistrationBean bean = new FilterRegistrationBean();

bean.addUrlPatterns("/*");//支持全部請求

bean.setFilter( new MyFilter());//設置filter實例

return bean;

}

新增MyFilter.java 攔截器

MyFilter implements Filter

@Override

public void doFilter(ServletRequest arg0, ServletResponse arg1, FilterChain arg2)

throws IOException, ServletException {

HttpServletRequest req = (HttpServletRequest) arg0;

HttpServletResponse res = (HttpServletResponse)arg1;//將響應強轉成HttpServletResponse

String origin = req.getHeader("Origin");//得到client請求頭

res.addHeader("Access-Control-Allow-Origin", origin);//設置origin 請求url:port

res.addHeader("Access-Control-Allow-Methods", "*");//調用方法 get、put、delete、post等，*全部方法

res.addHeader("Access-Control-Allow-Headers", "Content-Type");//ajax裏面的contentType

arg2.doFilter(arg0, arg1);

}

Control層添加getMessage2方法

//非簡單請求

@PostMapping("/getMessage2")//spring4.0方法

public Model getPost(@RequestBody Model model){

System.out.println("getpost");

return new Model(model.getName(),model.getIdCard());

}

添加Model.java 類

private String name;

private String idCard;

添加jasmine測試用例

//測試模塊（被調用方filter解決跨域）

describe("getpostJasmine", function() {

// 測試方法（被調用方filter解決跨域）

it("被調用方filter解決跨域", function(done) {

// 服務器返回的結果

var result;

//調用異步請求將結果保存到result

$.ajax({

url : base+"/getMessage2",//請求url

type : "post",//請求類型 post|get

contentType : "application/json;charset=utf-8",//非簡單請求

data : JSON.stringify({"name":"tom","idCard":"10010302022"}),

success : function(data){//回調函數和後臺返回的數據

result = data;

}

});

// 因爲是異步請求，須要使用setTimeout來校驗

setTimeout(function() {

expect(result).toEqual({"name":"tom","idCard":"10010302022"});

// 校驗完成，通知jasmine框架

done();

}, 100);

});

//測試模塊（被調用方filter解決跨域）

describe("getpostJasmine", function() {

// 測試方法（被調用方filter解決跨域）

it("被調用方filter解決跨域", function(done) {

// 服務器返回的結果

var result;

//調用異步請求將結果保存到result

$.ajax({

url : base+"/getMessage2",//請求url

type : "post",//請求類型 post|get

contentType : "application/json;charset=utf-8",//非簡單請求

data : JSON.stringify({"name":"tom","idCard":"10010302022"}),

success : function(data){//回調函數和後臺返回的數據

result = data;

}

});

// 因爲是異步請求，須要使用setTimeout來校驗

setTimeout(function() {

expect(result).toEqual({"name":"tom","idCard":"10010302022"});

// 校驗完成，通知jasmine框架

done();

}, 100);

});

1. ajax 跨域 headers JavaScript ajax 跨域請求
2. ajax及ajax跨域
3. JavaScript之Ajax-7 Ajax跨域請求(Ajax跨域概述、Ajax跨域實現)
4. Ajax及跨域
5. ajax 跨域
6. ajax跨域-CORS
7. AJAX跨域
8. ajax跨域
9. Ajax跨域
10. jquery ajax跨域
更多相關文章...
• 網站域名 - 網站主機教程
• XSL-FO 區域 - XSL-FO 教程
• PHP Ajax 跨域問題最佳解決方案
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。