AJAX——三种方法解决跨域问题

最近项目中用到众多ajax请求，随之而来的就是要解决ajax的跨域问题。就像酱紫↓

ajax java跨域 ajax如何解决跨域_服务器

 

然后好一顿百度，百到的基本就是三种解决方法，一种就是使用代理，这个我没太明白是怎么个意思，只知道好像不是前端的事情；另一种是，扔给后台解决，

只需要在服务器端头部加上下面两句代码：

header( "Access-Control-Allow-Origin:*" );
　　header( "Access-Control-Allow-Methods:POST,GET" );

然鹅第三方并不理会我的要求，不给我加，好吧/(ㄒoㄒ)/~~

然后又一顿百度，百到可以用jsonp解决，具体方法步骤如下：

1 (function($){
 2 $.ajax({
 3         type: "post",
 4         url: "http://localhost:8022/test.json",
 5         data: $.toJSON(userData),
 6         dataType: 'jsonp',
 7         jsonpCallback:'callback',
 8         success: function(result) {
 9             alert(result);
10         },
11         error: function(XMLHttpRequest, textStatus, errorThrown) {
12             alert(XMLHttpRequest.status);
13             alert(XMLHttpRequest.readyState);
14             alert(textStatus);
15         }
16     });
17 })(jQuery)

这里的error处理函数中用了这么多alert也是为了更精确的定位问题出在哪里，XMLHttpRequest, textStatus, errorThrown三个参数的含义参考以下：

属性

说明

readyState

表示XMLHttpRequest对象的状态：0：未初始化。对象已创建，未调用open；

1：open方法成功调用，但Sendf方法未调用；

2：send方法已经调用，尚未开始接受数据；

3：正在接受数据。Http响应头信息已经接受，但尚未接收完成；

4：完成，即响应数据接受完成。

Onreadystatechange

请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）。

responseText

服务器响应的文本内容

responseXML

服务器响应的XML内容对应的DOM对象

Status

服务器返回的http状态码。200表示“成功”，404表示“未找到”，500表示“服务器内部错误”等。

statusText

服务器返回状态的文本信息。

 

 

 

 

方法

说明

Open(string method,string url,boolean asynch,

String username,string password)

指定和服务器端交互的HTTP方法，URL地址，即其他请求信息；

Method:表示http请求方法，一般使用"GET","POST".

url：表示请求的服务器的地址；

asynch：表示是否采用异步方法，true为异步，false为同步；

后边两个可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。

Send(content)

向服务器发出请求，如果采用异步方式，该方法会立即返回。

content可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串。

SetRequestHeader(String header,String Value)

设置HTTP请求中的指定头部header的值为value.

此方法需在open方法以后调用，一般在post方式中使用。

getAllResponseHeaders()

返回包含Http的所有响应头信息，其中相应头包括Content-length,date,uri等内容。

返回值是一个字符串，包含所有头信息，其中每个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔！

getResponseHeader(String header)

返回HTTP响应头中指定的键名header对应的值

Abort()

停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。

 

 

这个时候你应该是会得到三个结果，200,4，parsererror。200和4表示正常，没毛病，parsererror是个什么，又是一顿百度。

然后发现，json格式和jsonp格式是有区别的，区别如下：

 

json

1 {
2         "id": "1",
3         "title": "【GXZB-2003009】第三采油厂2017年注水系统储水罐隔氧装置修理修缮技术服务",
4         "date": "2016-05-06",
5         "state": "1"
6     }

jsonp

1 callback({
2         "id": "1",
3         "title": "【GXZB-2003009】第三采油厂2017年注水系统储水罐隔氧装置修理修缮技术服务",
4         "date": "2016-05-06",
5         "state": "1"
6     });

是的，jsonp比json多包了一层callback();并且，分号不能少！！！

然后，这个问题就这么解决啦~撒花~