Ajax学习笔记
一、JQuery发送Ajax请求
按照惯例,定义几个按钮
<div class="container">
<h2>jQuery发送Ajax请求</h2>
<button>GET</button>
<button>POST</button>
<button>通用型方法ajax</button>
</div>
服务端server.js
//jquery服务
app.all('/jquery-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.send('hello jquery AJAX');
});
1、GET、POST发送请求
$('button').eq(0).click(function () {
$.get('http://192.168.0.102:8000/jquery-server', { a: 100, b: 200 }, function (data) { console.log(data) });
})
$('button').eq(1).click(function () {
$.post('http://192.168.0.102:8000/jquery-server', { a: 100, b: 200 }, function (data) { console.log(data) });
})
2、通用方法发送请求
$('button').eq(2).click(function () {
$.ajax({
//url
url: 'http://192.168.0.102:8000/jquery-server',
//参数
data: { a: 100, b: 200 },
//请求类型
type: 'GET',
//响应体结果
dataType: 'json',
//成功的回调
succes: function (data) {
console.log(data);
},
//超时的回调
timeout: 2000,
//失败的回调
error: function () {
console.log('出错啦!!');
},
//头信息
headers: {
c: 300,
d: 400
}
});
});
二、Axios发送Ajax请求
服务器server.js文件
//axios服务
app.all('/axios-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
const data = {name:'zh'};
response.send(JSON.stringify(data));
});
可以把url地址配置到上面
// 配置 baseURL
axios.defaults.baseURL = 'http://192.168.0.102:8000';
GET和POST请求
btns[0].onclick = function () {
//GET请求 axios.get(url,config)
axios.get('/axios-server', {
// url参数
params: {
id: 100,
vip: 7
},
//请求头信息
headers: {
name: 'nihao',
age: 22
}
})
}
btns[0].onclick = function () {
//POST请求 axios.post(url,data,config)
axios.POST('/axios-server', {
usename: 'admin',
password: 'admin'
}, {
// url参数
params: {
id: 100,
vip: 7
},
//请求头信息
headers: {
name: 'nihao',
age: 22
}
})
}
通用请求方法:
btns[2].onclick = function () {
axios({
//url
url:'/axios-server',
//url参数
params:{
vip:10,
level:30
},
//头信息
headers:{
a:100,
b:200
},
//请求体参数
data:{
username:'admin',
password:'admin'
}
})
}
axios的请求方式看上去好流畅啊,一目了然!
三、fetch发送ajax请求
这个请求方法厉害之处在于他不用像jquery和axios那样需要引入第三方库,而是可以直接使用
//fetch服务
app.all('/fetch-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
const data = {name:'zh'};
response.send(JSON.stringify(data));
});
不过,用fetch返回数据要用两层promise
const btn = document.querySelector(“button”);
btn.onclick = function () {
fetch('http://192.168.0.102:8000/fetch-server',{
//请求方法
method:'POST',
//请求头
headers:{
name:'zhhhh'
},
//请求体
body:'username=admin&password=admin'
}).then(response =>{
return response.text();
}).then(response=>{
console.log(response);
})
}
要把返回的数据换为json格式的话把text()
改为json()
四、跨域
同源策略
同源策略是浏览器的一种安全策略。
同源:协议、域名、端口号,必须完全相同。
违背同源车略就是跨域
五、jsonp(程序员自己发明的解决跨域方法)
jsonp解决跨域的问题就是返回函数调用(这一部分有点懵)
1、原生jsonp
利用jsonp原理,实现用户名校验是否存在
服务端server.js
//用户名检测是否存在
app.all('/check-username', (request, response) => {
const data={
exist:1,
msg:'用户名已经存在'
};
//将数据转化为字符串
let str = JSON.stringify(data);
//返回结果
response.end(`handle(${str})`);
});
声明handle函数,创建script标签,利用src属性请求数据
用户名:<input type="text" id="username">
<p></p>
<script>
const input = document.querySelector('input');
const p = document.querySelector('p');
//声明handle函数
function handle(data) {
input.style.border = "solid 1px #f00";
// 修改 p 标签的提示文本
p.innerHTML = data.msg;
}
input.onblur = function () {
// 读取用户的输入值
let username = this.value;
// 向服务器端发送请求,检测用户名是否存在
//1. 创建script标签
const script = document.createElement('script');
//2. 设置标签的src属性
script.src = 'http://192.168.0.102:8000/check-username';
//3. 将script插入到文档中
document.body.appendChild(script);
}
</script>
2、用JQuery发送jsonp请求
做一个案例,点击按钮,向8000端口发出请求,返回结果在div呈现
<button>点击发送jsonp请求</button>
<div id="result"></div>
$('button').eq(0).click(function () {
$.getJSON('http://192.168.0.102:8000/jquery-jsonp-server?callback=?', function (data) {
$('#result').html(`
名称:${data.name}<br>
城市:${data.city}
`)
})
})
注意这里的url地址后面要加上?callback=?
服务端server.js文件
//jquery jsonp
app.all('/jquery-jsonp-server', (request, response) => {
const data = {
name: 'zh',
city: ['北京', '上海', '深圳']
};
//将数据转化为字符串
let str = JSON.stringify(data);
//接收 callback参数
let cb = request.query.callback;
//返回结果
response.end(`${cb}(${str})`);
});
六、CORS(官方解决跨域方法)
Cross-Origin Resource Sharing
在CORS中你要发请求,你就按照ajax那一套去做就行了,至于跨域的问题,就交给服务端设置响应头就可以实现跨域
app.get('/server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.send('HELLO Ajax');
});
还有很多响应头信息,可以上这个网站了解一下:跨源资源共享