Ajax,restful/Rest JSON和JSONP

Posted 2021-03-07 墨羽如烟

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（查）即可

 1 var post_data={"name":"test001","pass":"xxxx"};
 2 $.ajax({
 3    url: "http://192.168.10.111:8080/uc/login",
 4    type: ‘post‘,
 5    contentType: "application/json; charset=utf-8",
 6    data:JSON.stringify(post_data),
 7    success:function (data) {
 8 //调用成功
 9 },
10 error: function(data, textStatus, errorThrown){
11 //调用失败
12 }
13 });

 

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

一. JSONP方式

前端代码：

 1 var patientInfoURL = ‘http://10.1.8.82:8332/soap/GetPatInfo?
 2 
 3 citycardno=0000997144446894&id=32010600000002012‘;
 4 
 5 $.ajax({
 6 
 7      type:‘get‘,
 8 
 9      url: patientInfoURL ,
10 
11      dataType:‘jsonp‘,
12 
13      //jsonp:‘callback‘,//默认就是callback，可以不写
14 
15      //jsonpCallback:"successCallback",//此处定义请求url中callback参数后的值，不写则jQuery会自动生成一个字符串
16 
17      success:function(data){
18 
19         console.log(data);
20 
21      },
22 
23      error:function(XMLHttpRequest, textStatus, errorThrown){
24 
25           alert(XMLHttpRequest.status);
26 
27           alert(XMLHttpRequest.readyState);
28 
29           alert(textStatus);
30 
31      }
32 
33  });

二. 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);

    }

});

 

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

后端代码：

 1 // 跨域配置
 2 
 3 response.setHeader("Access-Control-Allow-Origin","*");
 4 
 5 response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
 6 
 7 response.setHeader("Access-Control-Allow-Credentials", "true");
 8 
 9 response.setHeader("Access-Control-Max-Age", "3600"); // 保持跨域Ajax时的Cookie
10 
11 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