Java WEB 篇十 前端技术

目录

谈谈你对 ajax 的认识？

Ajax 是一种创建交互式网页应用的的网页开发技术

Ajax 的最大特点：

jsonp 原理

原理

跨域两种解决方案

Jsonp 和 CORS

常见的前端框架有哪些

EasyUI LayUI Angularjs VUE.js

---

谈谈你对 ajax 的认识？

Ajax 是一种创建交互式网页应用的的网页开发技术

Ajax 的最大特点：

• 可以实现局部刷新，在不更新整个页面的前提下维护数据，提升用户体验度

jsonp 原理

原理

• jsonp 的最基本的原理是：动态添加一个<script>标签，使用 script 标签的 src 属性没有跨域的 限制的特点实现跨域。首先在客户端注册一个 callback, 然后把 callback 的名字传给服务器。此 时，服务器先生成 json 数据。 然后以 javascript 语法的方式，生成一个 function , function 名 字就是传递上来的参数 jsonp。最后将 json 数据直接以入参的方式，放置到 function 中，这样 就生成了一段 js 语法的文档，返回给客户端。 客户端浏览器，解析 script 标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了 客户端预先定义好的 callback 函数里。

跨域两种解决方案

Jsonp 和 CORS

• CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）。CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10。 它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源 使用的限制。整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来 说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨 源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。 因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。 CORS 请求默认不发送 Cookie 和 HTTP 认证信息。如果要把 Cookie 发到服务器，一方面要服 务器同意，指定 Access-Control-Allow-Credentials 字段。另一方面，开发者必须在 AJAX 请求 中打开 withCredentials 属性。否则，即使服务器同意发送 Cookie，浏览器也不会发送。或者， 服务器要求设置 Cookie，浏览器也不会处理。

常见的前端框架有哪些

EasyUI LayUI Angularjs VUE.js