Ajax
Ajax的核心就是异步请求,异步的区别就是阻塞和非阻塞,ajax不是一门语言,只是一个技术
原生JS的Ajax
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest(); //标准浏览器的请求
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP'); //IE浏览器
}
xhr.open('get','tq.xml'); //请求方式是GET
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
console.log(data); //获取数据
}
xhr.send();发送请求
Jquery的Ajax方式
$.ajax({
type:"post", //get请求用get
url:"jqajax.php",
data:{a:username,b:password},
success:function(data){
console.log(data)
}
});
在JQ里的Ajax可以直接设置dataType来设置获取的数据格式,正常情况下,后台返回的数据都是一大串字符串,要通过JSON.parse来转化成数组
JQ可以通过dataType来转化
$.ajax({
type:"post",
url:"login.php",
data:{ueser:a,password:b,
dataTtpe:"json",
success:function(data){
console.log(data)
}
})
简单方式
$.get({
url:"login.php",
success:function(){
console.log(data);
}
})
$.post({
url:"login.php",
success:function(){
console.log(data);
}
})
ajax是和后台进行交互,通过ajax可以从后台拿数据也可以给后台发送数据,但是后台往往并不给你一个php让你连接。而是给你一个API接口,然而浏览器直接访问API会报错,存在跨域问题
跨域:在自己的浏览器上访问别人的浏览器上面的数据就叫跨域,
一个页面只允许访问同一个服务器下面的东西,为了安全,所有的服务器都不允许跨区请求(跨域存在修改服务器数据的问题)
访问别的服务器上的资源的方式:通过script标签可以无限制访问,这是浏览器一大漏洞。
<script type="text/javascript" src="jquery-3.2.1.js" ></script>
<script type="text/javascript">
function abc(data){ //先执行函数再接收数据 不然报错 abc is not defined;
console.log(data)
}
//跨域访问API接口 方法一(动态添加script标签)
// $('.btn').click(function(){
// var url = 'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&code=101010100&_jsonp=abc'; //api接口
// var script = document.createElement('script');
// script.src=url;
// document.body.appendChild(script);
// });
</script>
<!-- 方法二 -->
<script src="http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&code=101010100&_jsonp=abc"></script>
注意:其实这里利用了BUG,这个技术叫做jsonp,也就是说jsonp和ajax一样都是一种技术而不是一门语言
然而jsonp和ajax是完全不相干的两种技术,两者互不干涉,但是在JQ里,把ajax和jsonp整合到了一起
$.ajax({
type:"get", //根据后台要求选择合适的请求方式
url:"API接口&jsonp=abc",
dataType:"jsonp",//jsonp处理方式
jsonp:"callback",//方式可能不同
jsonpCallback:"abc",
success:(data,function(k,v){
console.log(k); //索引位置
console.log(v); //对应的值
}
})