js（ajax）

AJAX

概念：页面无刷新数据异步请求操作；Asynchronous JavaScript and XML

最大的特点：局部刷新

为什么使用ajax:(ajax的优点）

• 局部刷新；
• 优化了浏览器与服务器之间的传输，减少了不必要的数据返回，减少了带宽占用；
• ajax引擎在客户端进行，承担部分服务器的工作，减少了服务器端的压力；

ajax的缺点

• ajax不支持浏览器back按钮。
• 安全问题 AJAX暴露了与服务器交互的细节。
• 对搜索引擎的支持比较弱。
• 破坏了程序的异常机制。
• 不容易调试。

请简单介绍XmlHttpRequest：

• XmlHttpRequest可以使JavaScript向服务器提出请求并处理响应，而不阻塞用户。
• 通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。

手写ajax：

1. 创建xhr;
2. 响应函数;
3. 制定方法（get,open）;
4. 发送请求（send）;

1. 
var xhr = new XMLHttpRequest();

2. 
xhr.onreadystatechange = function(){
    if(xhr.readystate === '4' && xhr.status === '200'){
        alert(xhr.responseText);
    }
}

3. 
xhr.open('GET',url,true)

4.
xhr.send()

跨域：

什么是跨域：

• 浏览器具有同源策略，一个脚本只能读取来自同一来源的窗口与文档的属性；
• 同一来源：主机、协议、端口号一致；

跨域方法：

• jsonp
  • jsonp是一种非正式传输协议；
  • 该协议允许用户传递一个callback给服务端，然后服务器端返回数据时会将这个callback参数作为函数名来包裹JSON数据；
  • （img/link/script -》 允许跨域的三个标签）
• nginx反向代理
• CORS 
  • 后端：设置Access-Control-Allow-Origin

缓存：

• 当第一次发送请求，http返回200的状态码，
• 如果没有关闭缓存请求的话（没标明不使用缓存，下述）则会在返回头中返回包含last-Modified以及Etag和Expires的字段（这些字段下面慢慢说），然后将文件保存在Cache目录下；
• 当后续请求该文件时候，先在本地查找该资源,如果在本地缓存找到对应的资源,但是不知道该资源是否过期或者已经过期, 则发一个http请求到服务器,然后服务器判断这个请求,
• 如果请求的资源在服务器上没有改动过,则返回304, 让浏览器使用本地找到的那个资源
• 而如果当服务器发现请求的资源已经修改过,或者这是一个新的请求(本地无对应资源),服务器则返回该资源的数据,并且返回200,
• 当然这个是指找到资源的情况下,如果服务器上没有这个资源,则返回404
• 经过上面的流程梳理,我们基本了解整个缓存处理过程，不过对于前端来说，我们需求无非就是使用缓存或者不使用缓存，在了解下面内容之后我们再根据原理去慢慢实现我们的需求。

状态码：301 永久重定向；302 临时重定向；303 临时重定向 GET方法；304 从服务器获取缓存内容；