Ajax,restful/Rest JSON和JSONP

2021-04-10 03:32

阅读:537

标签:select   操作   http post   ali   tps   car   ror   resource   success   

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

 

Ajax,restful/Rest JSON和JSONP

标签:select   操作   http post   ali   tps   car   ror   resource   success   

原文地址:https://www.cnblogs.com/jian138/p/12434077.html

上一篇:HTML---3

下一篇:网站改版与降权的关系


评论


亲,登录后才可以留言!