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格式数据，关键是指定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 });
一. 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时的Cookie10 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
