一、jQuery中的AJAX
1.get请求
$.get(url, [data], [callback], [type])
url：请求的 URL 地址
data：请求携带的参数
callback：载入成功时回调函数。
type：设置返回内容格式（xml, html, script, json, text, _default）
例：
$.get('http://127:0.0.1:8000/jquery-server',{a:100,b:200},function(data){
console.log(data);
},'json');
路由规则：
app.all('/jquery-server',(request,response)=>{
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
const data = {name:'尚硅谷'};
response.send(JSON.stringify(data));
});
2.post请求
$.post(url, [data], [callback], [type])
3.通用方法
$.ajax({
url:
data:
type:
dataType:
success:function(){}
timeout:
error:function(){}
headers:
})
script发送请求过去 得到的应该是js代码
二、fetch函数
<body>
<button>AJAX请求</button>
<script>
const btn = document.querySelector('button');
btn.onclick=function(){
fetch('http://127.0.0.1:8000/fetch-server',{
method:'POST',
headers:{
name:'孙悟空'
},
body:'username=a&password=b'
}).then(response=>{
return response.text();
}).then(response=>{
console.log(response)
})
}
</script>
</body>
路由规则：
app.all('/fetch-server',(request,response)=>{
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
const data = {name:'猪八戒'};
response.send(JSON.stringify(data));
});
三、跨域
1.同源策略
同源：协议、域名、端口号 必须完全相同
2.解决跨域
1）JSONP
利用 script 标签的跨域能力来发送请求的。
① JSONP的使用
var script = document.createElement("script");
script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
alert(data.name);
};
document.body.appendChild(script);
app.all('/jquery-jsonp-server',(request,response)=>{
const data = {
name:'孙悟空',
age:18
};
let str = JSON.stringify(data);
let callback = request.query.callback;
response.send(callback+"("+JSON.stringify(obj)+")");
});
② jQuery中的JSONP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery-jsonp</title>
<style>
#result{
width: 300px;
height: 100px;
border: solid 1px #089;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<button>点击发送jsonp请求</button>
<div id="result"></div>
<script>
$('button').eq(0).click(function(){
$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){
$('#result').html(`${data.name},${data.age}`)
})
})
</script>
</body>
</html>
2）CORS
通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
主要是对服务器端的设置
app.all('/xx',(request,response)=>{
response.setHeader('Access-Control-Allow-Origin','*');
response.send("返回的响应");
});
|