Ajax,restful/Rest JSON和JSONP

Richardxx 2020-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(查)即可

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

相关推荐

mmywcoco / 0评论 2020-06-06