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 从服务器获取缓存内容;