一、ajax概念:
ajax:Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),2005
ajax: js,dom,xml,异步请求,局部刷新技术,提高加载性能,提高用户体验
ajax主要用于:实现 前端与后端数据交互
异步与同步
异步使用场景:ajax,定时器,事件处理函数
实现 ajax:
第一步创建xmlhttprequest对象
第二部通过open准备要发送他的参数有三个第一个传值方式post或者get第二个地址第三个是否同步异步
第三部是要发送数据
第四部监听返回的事件成功的话就可以调用数据如果失败返回报错信息
1.各种类库和框架实现
jquery实现:
$.ajax({
data:{},
dataType:"jsonp"
})
$.getJSON()
$.load()
$.get()
$.post()
angular:HttpMudle
vue: vue-reousce,axios
vue-resource:支持jsonp
vue-resource实现jsonp具体:
前端:
this.$http.jsonp('要请求的后端接口')
.then(res=>{
console.log(res);
if(res.status==200 && res.ok) {
this.list=res.body;
}
})
.catch(error=>{
console.log('hello,error');
})
}
后端jsonp处理:
第一步:后端接收callback
例如: $callback=$_GET['callback'];
第二步:如果用jsonp方式,返回数据,应该返回函数调用形式,函数调用内部的参数就是你要的json
例如: echo $callback."(".$json.")";
axios:不支持json
获取元素:
querySelector() 只获取匹配第一个dom元素 兼容:IE8+
querySelectorAll() 获取匹配的一个dom列表 兼容:IE8+
清除ajax缓存:在url地址后面添加随机数 例如:random=new Date().getTime()