day11（2017 11 4）

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); //对应的值
  }
}）