Ajax跨域访问（从入手到解决）

第一步：开发环境 .net 

第二步：通过webService返回的数据集，经过Json处理后，返回的是json数据格式，而不是datatable；

第三步：在aspx中或mvc中，用jQuery 的ajax调用这个接口的方法。

此时，就会报出很多的错误，理想情况下，会出现“Uncaught SyntaxError: Unexpected token : ”，首先感谢幻梦的https://blog.csdn.net/huanmeng122/article/details/81508724?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task这篇文章，由浅入深，由原理讲到实践，让我彻底明白跨域是个怎么回事了。首先呢，我先记下同源策略（域名，协议，端口三个都要相同）

然后，就要解决这个问题，虽然研究完毕后，觉得很简单，但是对我刚上手来讲，还是查阅了大量资料才得到这些解决方法的。

那么，此时有两种方法解决：

第一种：JSONP方式；第二种：CORS方式；

根据接口的出处，开发者可自己选择合适的方式；

比如，接口是自己公司写的，可以进行重写，那么，就用JSONP方式，当然，不想费事，也可选择CORS方式；接口如果是第三方公司所写，此时，必须使用CORS方式。

废话不多说，下面就详细讲讲这两种方式吧。

JSONP方式：

第一步：修改webService返回结果集（只写关键代码）。

string msg = JsonString.ToString();//JsonString:结果集的json串
string callback = Context.Request.Params["callback"];//定义Jsonp的名称，默认callback
Context.Response.Write(callback + "(" + msg + ")");
            Context.Response.End();

第二步：修改ajax的调用方式

 $('#lr_test2').on('click', function () {
                console.log('11')
                $.ajax({
                    type: "get",
                    async: false,
                    url: webServiceUrl+"/DTJC_Data?callback=?",
                    dataType: "jsonp",//返回数据类型：Jsonp方式
                    jsonp: "callback", //这里和接口服务端的参数名称对应
                    //jsonp: "callbackparam",//服务端用于接收callback调用的function名的参数
                    //jsonpCallback: "success_jsonpCallback",//callback的function名称
                    data: { "strP_WellID": "CQ98aSmc6Z", "strP_Table": "Q_CJ_JTFSJC" },//测试数据

                    success: function (json) {
                        console.log(json);
                    },
                    error: function () {
                        alert('fail');
                    }
                });
            });

测试后，访问成功，感兴趣的可在F12，network下看到网页会自动生成一个callback的参数名称，并将数据包裹起来。

CORS方式：

这个就更简单了，

第一步，找到接口发布的iis上的web.config文档，在configuration节点下输入：

<system.webServer>
<httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Headers" value="X-Requested-With,Content-Type,Accept,Origin" />
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE,OPTIONS" />
    </customHeaders>
</httpProtocol>
    </system.webServer>

如果位置输入错误，会报配置节点错误的。

第二步，ajax调用

 $('#lr_test3').on('click', function () {
                $.ajax({
                    type: "get",
                    async: true,
                    url: webServiceUrl+"/DTJC_Data，
                    dataType: "json",//此时依然是json
                   data: { "strP_WellID": "CQ98aSmc6Z", "strP_Table": "Q_CJ_JTFSJC" },//测试数据

                    success: function (json) {
                        console.log(json);
                    },
                    error: function () {
                        alert('fail');
                    }
                });
            });

测试后，访问成功。

————————————————————————————————————————

下面是我找到的所有资料，虽然解决了觉得很简单，但是从了解到解决还是看了大量资料的，随笔记下来

jsonp的解决方案：
1.用底层ajax方法
2.用jquery 自带的setJson方法
https://www.jianshu.com/p/2f0c8c026531

https://www.cnblogs.com/Chavezcn/p/7783234.html

https://blog.csdn.net/wqmain/article/details/8905287

https://www.cnblogs.com/JerryTian/p/4194900.html

https://www.cnblogs.com/freeweb/p/4908832.html

返回jsonp格式的字符串：
https://blog.csdn.net/qq_41999617/article/details/83962123?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

Cors方式 的解决方案：
http://www.ruanyifeng.com/blog/2016/04/cors.html
https://blog.csdn.net/lilin0800/article/details/79726922?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
https://blog.csdn.net/huanmeng122/article/details/81508724?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

Jsonp原始方法：
https://www.cnblogs.com/PengL-Net/p/5694877.html

https://www.liaoxuefeng.com/wiki/1022910821149312/1023022332902400

JSON规则：
JSON只有两种数据类型描述符，大括号{}和方括号[]，其余英文冒号:是映射符，英文逗号,是分隔符，英文双引号""是定义符。

　　2、大括号{}用来描述一组“不同类型的无序键值对集合”（每个键值对可以理解为OOP的属性描述），方括号[]用来描述一组“相同类型的有序数据集合”（可对应OOP的数组）。

　　3、上述两种集合中若有多个子项，则通过英文逗号,进行分隔。

　　4、键值对以英文冒号:进行分隔，并且建议键名都加上英文双引号”"，以便于不同语言的解析。

通俗易懂：
https://kb.cnblogs.com/page/139725/
https://www.liaoxuefeng.com/wiki/1022910821149312/1023022332902400