Ajax,restful/Rest JSON和JSONP

Ajax,restful/Rest JSON和JSONP之间的差异

Ajax – “异步Javascript和XML”。 Ajax宽松地定义了一组技术，以帮助使Web应用程序提供更丰富的用户体验。屏幕的数据更新和刷新是使用javascript和xml(或json或只是一个正常的http post)异步完成。 
 JSON – “Javascript Object Notation”。 JSON就像xml，它可以用来描述对象，但它更紧凑，并且具有实际的javascript的优势。以JSON表示的对象可以转换为要在javascript代码中操作的实际对象。 
>默认情况下，Ajax请求必须发生在请求发起的页面的同一域中。 JSONP – “JSON with padding” – 创建为允许您从其他域请求JSON资源。 ( CORS是一个更新，更好的替代JSONP。) 
REST – “代表国家转移”。使用REST原则的应用程序具有Url结构和围绕资源使用的请求/响应模式。在纯模型中，HTTP动词Get，Post，Put和Delete分别用于检索，创建，更新和删除资源。通常不使用Put和Delete，让Get和Post映射到select(GET)并创建，更新和删除(POST)

ajax传送json格式数据，调用restful接口

ajax传送json格式数据，关键是指定contentType，data要是json格式

如果是restful接口，把type改成对应的post（增）、delete（删）、put（改）、get（查）即可

var post_data={"name":"test001","pass":"xxxx"};
$.ajax({
   url: "http://192.168.10.111:8080/uc/login",
   type: 'post',
   contentType: "application/json; charset=utf-8",
   data:JSON.stringify(post_data),
   success:function (data) {
//调用成功
},
error: function(data, textStatus, errorThrown){
//调用失败
}
});

Ajax跨域调用Restful接口 JSONP和CORS两种解决方案

一. JSONP方式

前端代码：

var patientInfoURL = 'http://10.1.8.82:8332/soap/GetPatInfo?

citycardno=0000997144446894&id=32010600000002012';

$.ajax({

     type:'get',

     url: patientInfoURL ,

     dataType:'jsonp',

     //jsonp:'callback',//默认就是callback，可以不写

     //jsonpCallback:"successCallback",//此处定义请求url中callback参数后的值，不写则jQuery会自动生成一个字符串

     success:function(data){

        console.log(data);

     },

     error:function(XMLHttpRequest, textStatus, errorThrown){

          alert(XMLHttpRequest.status);

          alert(XMLHttpRequest.readyState);

          alert(textStatus);

     }

 });

二. CORS方式

介绍：

CROS是现在主流解决跨域问题的方案，未来估计也是趋势。

Cross-Origin Resource Sharing (CORS) 是W3c工作草案，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。

前端代码：

var patientInfoURL = 'http://10.1.8.82:8332/soap/GetPatInfo?

citycardno=0000997144446894&id=32010600000002012';

$.ajax({

    type:'get',

    url: patientInfoURL ,

    dataType:'json',

    success:function(data){

        console.log(data);

    },

    error:function(XMLHttpRequest, textStatus, errorThrown){

        alert(XMLHttpRequest.status);

        alert(XMLHttpRequest.readyState);

        alert(textStatus);

    }

});

所做的工作和非跨域并无区别，主要的区别则是在后端代码。

后端代码：

// 跨域配置

response.setHeader("Access-Control-Allow-Origin","*");

response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");

response.setHeader("Access-Control-Allow-Credentials", "true");

response.setHeader("Access-Control-Max-Age", "3600"); // 保持跨域Ajax时的Cookie

response.setHeader("Access-Control-Allow-Headers", "x-auth-token, x-requested-with,Authorization,Origin, Accept, Content-Type

参考网址：

https://blog.csdn.net/xiaozhu_dq/article/details/82423618

https://blog.csdn.net/nuli888/article/details/51850649

https://www.jb51.cc/ajax/160681.html