Web前端开发在进行数据维护的时候，常见的方式有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"

````

使用Ajax进行数据维护的开发有利有弊，由于是异步传输所以会产生网络延迟，这个需要考虑用户体验，让用户耐心等待这个处理过程。