ajax不同情况请求数据

在学习完ajax后，发现不管是同域，跨域，还是Json，jsonp数据类型，其实ajax调用方式都是有一定区别。主要有以下三种。

第一种，同域请求数据
如果请求端和服务器端在同域名下，可以直接使用ajax的四步骤进行数据请求获取。四步骤如下。

  **//1.创建XMLHttpRequest这个对象
    var xhr=null;
    //判断是否存在XMLHttpRequest(IE6没有此对象)
    if(window.XMLHttpRequest){
      xhr=new XMLHttpRequest();
    }else{
      //IE6浏览器
      xhr=new ActiveXobject('Microsoft.XMLHTTP');
    }
    //2.准备发送
    xhr.open('get','checkUsername.PHP?username='+username,true);   //true 代表同步  false 代表异步
    // xhr.open('post','checkUsername.PHP',true);  
    //3.发送请求(执行发送) 
    //get请求
    xhr.send(null);
    //post请求
    var param='username'+username;
    //如果是post请求,还需要把参数放到请求体中
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send(param);
    //4.设置回调函数
    xhr.onreadystatechange=function(){
      //判断xhr状态
      if(xhr.readyState==4){
        //判断服务器所返回的状态
        if(xhr.status==200){
          //得到返回数据
          //xhr.responseXML
          var result=xhr.responseText;
          var show=document.querySelector('#result');
          show.innerText=result;
        }
      }**

第二种，跨域请求返回jsonp数据
在跨域请求数据时，可以调用jquery提供的$.ajax进行跨域数据请求，此时需要服务端提供回调函数返回jsonp数据。代码实例如下。

$.ajax({
  url:'http://cdn.weather.hao.360.cn/sed_api_weather_info.PHP',
  data:{
    app:'hao360',
    code:code
  },
  jsonp:'_jsonp',
  dataType:"jsonp",
  success:function(data){
    console.log(data);
    var html=template('Weathertemplate',data);
    $("#info").html(html);          
  }
})

第三种，跨域请求返回json数据
在跨域请求时，还有可能服务端没有提供回调函数，只能返回json数据，此时可以通过本地创建一个临时服务端来进行文件转换获取。以PHP为例，代码如下。

  header('Content-Type:text/plain; charset=utf-8');
  //使用curl进行网络数据访问
  $ch=curl_init();
  //网络访问的URL地址
  $school=$.GET['school']
  $url=' 
https://api.yonyoucloud.com/apis/dst/collegeInfoQuery/collegeInfoQuery?apicode=ae79109248d14d93bd69b228250bac51&name='.$school;
  //网络访问的URL地址
  curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
  //执行HTTP请求
  curl_setopt($CH,CURLOPT_URL,$url);
  //得到数据
  $res=curl_exec($ch);
  echo $res;

此时可以将数据暂存到新建服务端文件中，然后通过以下代码获取到json数据。

$.ajax({
  url:'./getschool.PHP',
  data:{school:school},
  dataType:'json',
  success:function(data){
    console.log(data);
    if(data.msg=='ok'){
      var info='';
      for(var i=0;i<data.result.length;i++){
         info+=data.result[i].name+' ';              
      }  
      $('#result').html(info);   
    }
  }
})

ajax不同情况请求数据

相关推荐