发送Ajax 以为这可以进行异步操作;
这样会使执行的效率会更高
Ajax 的概念
在浏览器中,我们可以在不刷新页面的情况下,通过ajax的方式去获取一些新的内容。
Ajax:Asynchronous Javascript And XML(异步 JavaScript 和 XML)。它并不是凭空出现的新技术,而是对于现有技术的结合。
Ajax 的核心是 js 对象:XMLHttpRequest。
发送 Ajax 请求的五个步骤
其实也就是 使用 XMLHttpRequest 对象的五个步骤。
我们先回忆一下,一个完整的HTTP请求需要的是:
请求的网址、请求方法get/post。
提交请求的内容数据、请求主体等。
接收响应回来的内容。
发送 Ajax 请求的五个步骤:
(1)创建异步对象。即 XMLHttpRequest 对象。
(2)使用open方法设置请求的参数。open(method, url, async)。
参数解释:请求的方法、请求的url、是否异步。
(3)发送请求。
(4)注册事件。 注册onreadystatechange事件,状态改变时就会调用。
如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
(5)获取返回的数据。
对于原生js的来说,如何发送Ajax请求呢?
- get 请求;
<script type="text/javascript">
// 绑定点击事件
document.querySelector('#btnAjax').onclick = function () {
// 发送ajax 请求 需要 五步
// (1)创建异步对象
var ajaxObj = new XMLHttpRequest();
// (2)设置请求的参数。包括:请求的方法、请求的url。
ajaxObj.open('get', '02-ajax.php');
// (3)发送请求
ajaxObj.send();
//(4)注册事件。 onreadystatechange事件,状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
ajaxObj.onreadystatechange = function () {
// 为了保证 数据 完整返回,我们一般会判断 两个值
if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
// 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
// 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
console.log('数据返回成功');
// 数据是保存在 异步对象的 属性中
console.log(ajaxObj.responseText);
// 修改页面的显示
document.querySelector('h1').innerHTML = ajaxObj.responseText;
}
}
}
</script>
- post 请求;
这里多了一步, 需要设置 Content-type:
<script type="text/javascript">
// 异步对象
var xhr = new XMLHttpRequest();
// 设置属性
xhr.open('post', '02.post.php');
// 如果想要使用post提交数据,必须添加此行
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 将数据通过send方法传递
xhr.send('name=fox&age=18');
// 发送并接受返回值
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
</script>
将这两者封装
后面引入这个js文件就可以使用了
// 方法:将 get 跟post 封装到一起
/*
参数1:url
参数2:数据
参数3:请求的方法
参数4:数据成功获取以后,调用的方法
*/
function ajax_tool(url,data,method,success) {
// 异步对象
var ajax = new XMLHttpRequest();
// get 跟post 需要分别写不同的代码
if (method=='get') {
// get请求
if (data) {
// 如果有值
url+='?';
url+=data;
}else{
}
// 设置 方法 以及 url
ajax.open(method,url);
// send即可
ajax.send();
}else{
// post请求
// post请求 url 是不需要改变
ajax.open(method,url);
// 需要设置请求报文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 判断data send发送数据
if (data) {
// 如果有值 从send发送
ajax.send(data);
}else{
// 木有值 直接发送即可
ajax.send();
}
}
// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);
// 将 数据 让 外面可以使用
// return ajax.responseText;
// 当 onreadystatechange 调用时 说明 数据回来了
// ajax.responseText;
// 数据成功获取以后,执行方法success()。
//我们把获取的数据作为 success()的参数,意思是:
//success方法是外面的,数据是里面给的。那数据就变相地传递到了外面去【重要】
success(ajax.responseText);
}
}
}
使用jQuery 发送Ajax请求
这里的话,就没有post 与 get 之分了, 直接在type 类型中修改就可以了
$.ajax({
url:"data.php",
dataType:"text",
type:"get",
success:function(data){
alert(data);
//$("#showInfo").html(data);
},
error:function(e){
console.log(e);
}
});
$.ajax({
type: "GET",
url: "localhost:8080/travle/news/list",
data: { page: $("#page").val(), limit: 5 },
dataType: "JSON",
success: function(result) {}
});
这里的dataType设置为jsonp 就可以就行跨域操作了(但是只能发送get请求)
Vue 中发送Ajax请求
这是需要使用axios ,官方的vue-resouce ,这里不推荐使用,因为官方也不管了
通过 引用axios后, 可以直接
axios.get()/post()
axios.get('/api/ajax/detailmovie',{
params:{
movieId:341
}
})
.then(res=>{
if(res.status===200){
return res.data
}else{
return 'error'
}
})
.then(data=>{
console.log(data)
})
如果跨域的话,还要配置相关的信息才能使用;
需要在vue.config.js 中
devServer:{
proxy:{
// 代理的
'api/':{
target:'http://xxx.xxx.xxx/',
changeOrigin:true,
// pathRewrite:{
// '/api':''
// }
}
}
}