Ajax通过jsonp实现跨域访问,访问成功但走error不走success的的问题解决

前提

最近工作中有个需求就是JS实现跨域访问，众所周知JS不能实现跨域访问，但是”script”标签却可以，这是Jsonp实现的原理，这里就不多讲了，这里主要讲ajax通过Jsonp跨域访问虽然返回200但总是走error不走success的解决方案 
注意：我通过localhost与127.0.0.1来模拟跨域。

不多说直接上代码：

代码块

前台代码：

$.ajax({   
         type:'get',     
       url:'http://127.0.0.1:8080/Test/data.do',  
          dataType:'jsonp',       
     jsonp:'callback',        
    success:function(data){    
            alert("12222222222222222222222222");  
              //callback(data);       
         alert(data.name);          
  },    
error:function(XMLHttpRequest, textStatus, errorThrown){    
            alert("33333333333333333");      
          alert(XMLHttpRequest.status);     
           alert(XMLHttpRequest.readyState);      
          alert(textStatus);            }        }); 

后台代码：

@Controller
public class FromData {   
 @RequestMapping("/data.do") 
   public void getData1(HttpServletRequest req,HttpServletResponse res){ 
       System.out.println("111111111111111111111");      
  String str  = "Hello world";    
    JSONObject json = new JSONObject();   
     json.put("name", str);    
    try {       
     res.getWriter().print(json.toJSONString());      
  } catch (IOException e) {   
         // TODO Auto-generated catch block           
                e.printStackTrace();      
  }    }}

前台结果显示：

33333333333333333 
200 
4 
parsererror

问题分析：

我一看到parsererror立刻想到难道我返回的数据格式不对？所以我查了相关Jsonp服务器返回的数据格式，果然格式不对，因为Jsonp的返回类型：回调函数名+（+json+) 
例如：回调函数名字callback，json为{“name”:”hello”}, 
则Jsonp返回的数据格式callback（{“name”:”hello”}); 所以我改了后台返回数据的数据格式

后台代码修改如下：

@Controller
public class FromData { 
   @RequestMapping("/data.do") 
   public void getData1(HttpServletRequest req,HttpServletResponse res){     
   System.out.println("111111111111111111111");     
   String str  = "Hello world";        
   JSONObject json = new JSONObject();    
    json.put("name", str);     
   try {  
      //前台定义的jsonp:'callback'            res.getWriter().print("callback("+json.toJSONString()+")");   
     } catch (IOException e) {       
     // TODO Auto-generated catch block          
     e.printStackTrace();       
 }    }}

修改后前台结果依然显示：

33333333333333333 
200 
4 
parsererror

问题分析：

怎么还不行呀！我快崩溃了，想骂娘，但是要解决问题没办法楼主又研究了一段时间Jsonp，无意中看到request请求的url：http://127.0.0.1:8080/Test/data.docallback=jQuery1830990895_1440641&=144044151， 
其中callback我并没有定义，但Jquery默认了一个函数（虽然我试着重新定义一个 function callbackdata)函数，在该函数中也能取得后台返回的数据，但这不是我研究的重点，我的重点是ajax不走error走success）， 
这时我有种发现新大陆的感觉，是不是这里出了问题？ 但如何不默认一个函数而是指定一个函数呢？？ 
于是我又在网上查Jsonp的相关资料，找呀找呀终于功夫不负有心人，终于找到了，结果测试了下终于走success，这是楼主感觉有种想要流泪的感觉，天呀终于解决了

不多说直接上成功的代码

成功前台代码：

$.ajax({    
        type:'get',  
          url:'http://127.0.0.1:8080/Test/data.do',     
       dataType:'jsonp',        
     jsonp:'callback',       
     jsonpCallback:"successCallback",   
         success:function(data){        
        alert("12222222222222222222222222");      
          alert(data.name);          
  },  error:function(XMLHttpRequest, textStatus, errorThrown){                
      alert("33333333333333333");           
      alert(XMLHttpRequest.status);     
       alert(XMLHttpRequest.readyState);         
        alert(textStatus);           
 }        
}); 

成功后台代码：

@Controller
public class FromData {  
  @RequestMapping("/data.do")   
 public void getData1(HttpServletRequest req,HttpServletResponse rps){        System.out.println("111111111111111111111"); 
       String str  = "Hello world";    
    JSONObject json = new JSONObject();     
   json.put("name", str);  
      try {        
    rps.getWriter().print("successCallback("+json.toJSONString()+")");   
     } catch (IOException e) {       
     // TODO Auto-generated catch block            
      e.printStackTrace();       
 }    }}

成功前台结果显示：

12222222222222222222222222 
Hello world

至此：ajax通过Jsonp跨域问题成功解决，就是通过在前台指定回调函数jsonpCallback：successCallback，然后在后台rps.getWriter().print(“successCallback(“+json.toJSONString()+”)”);就成功解决问题

浏览器兼容

1. 我只对Chrome浏览器进行了测试。