ThingJS:Ajax仅用20行代码进行数据维护

简介: 我们推荐Ajax数据维护方法,不用花时间更新全部页面

ThingJS的理念核心是轻量化,我们推荐Ajax数据维护方法,不用花时间更新全部页面,只需要改变少量信息,即可快速回应用户。

为什么Ajax

通过XHR 实现Ajax 通信的一个主要限制,来源于跨域安全策略。默认情况下,XHR 对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是,实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。它允许浏览器向跨域的服务器,发出 XMLHttpRequest 请求,从而解决了 Ajax 跨域请求数据的问题。

CORS标准

CORS(Cross-Origin Resource Sharing,跨源资源共享)是W3C 的一个工作草案,定义了在必须访问跨源资源时,浏览器与服务器应该如何沟通。CORS 背后的基本思想,就是使用自定义的HTTP 头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。比如一个简单的使用GET 或POST 发送的请求,它没有自定义的头部,而主体内容是text/plain。在发送该请求时,需要给它附加一个额外的Origin 头部,其中包含请求页面的源信息(协议、域名和端口),以便服务器根据这个头部信息来决定是否给予响应。下面是Origin 头部的一个示例:

Origin: http://www.nczonline.net

如果服务器认为这个请求可以接受,就在Access-Control-Allow-Origin 头部中回发相同的源
信息(如果是公共资源,可以回发"*")。例如:

Access-Control-Allow-Origin: http://www.nczonline.net

如果没有这个头部,或者有这个头部但源信息不匹配,浏览器就会驳回请求。正常情况下,浏览器会处理请求。注意,请求和响应都不包含cookie 信息。

CORS通信过程

对于前端而言,整个 CORS 通信过程,由浏览器自动完成。对于开发者来说,前端代码与普通 Ajax 代码完全一样。实现 CORS 的关键是后端,需在服务端设置 response 响应头(header)的 Access-Control-Allow-Origin 属性就可以开启 CORS。该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源,例如:

"Access-Control-Allow-Origin", "*" //所有网站都可访问
// 仅ThingJS网站能访问
// "Access-Control-Allow-Origin",http://www.thingjs.com

如果 CORS 请求不是简单的跨站请求,如:
• 使用GET或POST以外的HTTP请求方法(PUT DELETE等);
• 请求的Content-Type 不属于以下三种之一:
• application/x-www-form-urlencoded;
• text/plain;
• multipart/form-data;
• 发送了自定义的请求头信息(如Token数据)。
那么还需根据实际情况,在服务器的响应头中设置 Access-Control-Allow-Headers 和Access-Control-Allow-Methods 相关属性值,例如:
浏览器 Ajax 请求为:

$.ajax({
    'headers': {
        "token": '31415926'// 请求头中带上了token数据
    },
    'url': "http://localhost:3000/getDataByIds",
    'type': "POST",
    //发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded" 但此方式无将复杂的 JSON 组织成键值对形式
    //因此设置 contentType 为'application/json; charset=utf-8',这种类型是文本类型
    'contentType': 'application/json; charset=utf-8',
    'dataType': "json",
    //发送到服务器的数据 由于contentType设置为'application/json; charset=utf-8',这里需将json对象转为字符串后发送
    'data': JSON.stringify({ 'ids': [1, 2, 3] }),
    'success': function (data) {
        console.log(data);
    }
});  

则服务端需要设置:
//配置允许的请求方式,如果写 * 则都允许
"Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS";
//配置允许的自定义请求头,如果写 * 则都允许
"Access-Control-Allow-Headers", "Content-Type,Token" 

ThingJS用JS语言开发3D功能,Ajax本身也是与JS、HTML和CSS等语言相互支持的,并在浏览器上执行才能使用。

相关文章
|
6月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
132 0
|
24天前
|
Web App开发 前端开发 JavaScript
Python编程—Ajax数据爬取(一)
Python编程—Ajax数据爬取(一)
37 0
|
24天前
|
前端开发 NoSQL MongoDB
Python编程—Ajax数据爬取(二)
Python编程—Ajax数据爬取(二)
58 0
|
6月前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
|
2月前
|
JSON 前端开发 数据格式
layui 穿梭框transfer组件 数据data用ajax来获取
layui 穿梭框transfer组件 数据data用ajax来获取
132 2
|
6月前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
74 0
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
|
5月前
|
前端开发 JavaScript Java
Spring创建Ajax和接受Ajax数据-spring20
Spring创建Ajax和接受Ajax数据-spring20
|
5月前
|
PHP
php+ajax传file文件数据
php+ajax传file文件数据
43 0
|
6月前
|
数据采集 前端开发 JavaScript
Python爬虫之Ajax数据爬取基本原理#6
Ajax数据爬取原理【2月更文挑战第19天】
87 1
Python爬虫之Ajax数据爬取基本原理#6