Ajax实践

在了解ajax之前,我们先粗略的了解一下http协议

HTTP协议

http事务

• 一个完整的http请求是怎样的呢?
  1. 浏览器端会向服务器端发送一个包含命令和url的http请求报文
  2. 服务器端接收到请求,会进行一系列的计算,向浏览器返回一个包含事务结果的http响应报文

请求报文格式

格式

• 第一部分
  • get:http方法
  • music.com主机地址
  • http/1.1http版本
• 第二部分
  • Accept:浏览器接收的媒体类型
  • Accept-Encoding:浏览器接收的媒体类型的编码方式
  • Accept-Language浏览器端接收的语言方式
  • Cache-Control:缓存策略
  • Cookie:发送cookie值
  • User- Agent浏览器的版本
• Get方法请求体为空

响应报文格式

方法	描述	是否包含主体
GET	从服务器获取一份文档	否
POST	向服务器发送需要处理的数据	是
PUT	将请求的主体部分存储在服务器上	是
DELETE	从服务器删除一份文档	否

响应格式

常用HTTP方法

方法	描述	是否包含主体
GET	从服务器获取一份文档	否
POST	向服务器发送需要处理的数据	是
PUT	将请求的主体部分存储在服务器上	是
DELETE	从服务器删除一份文档	否

URL构成

url

常见http状态码

状态码

---

ajax 是什么？有什么作用？

• Ajax(Asynchronous JavaScript and Xml)
  • 能够向服务器请求额外的数据而无需卸载整个页面，会带来良好的用户体验
  • Ajax是一种技术的泛称,可以和后端交换数据，不用刷新页面

优点:

• 更新数据而不需要刷新页面： 它能在不刷新整个页面的前提下与服务器通信维护数据，由于ajax是按照需求请求数据，避免发送那些没有改变的数据。
• 异步通信： 它与服务器使用异步的方式通信，不会打断用户的操作（卡死页面）。
• 前后端负载平衡： 可以将后端服务器的一些工作转移给客户端，利用客户端限制的能力来处理，减轻了服务器的负担。
• 数据与呈现分离： 利于分工，降低前后耦合。

缺点:

• 浏览器历史记录的遗失： 在使用AJAX对页面进行改变后，由于并没有刷新页面，没有改变页面的访问历史，当用户想要回到上一个状态时，无法使用浏览器提供的后退。
• AJAX的安全问题： AJAX的出现就像建立起了一直通服务器的另一条通道，容易遭受到一些攻击。

一个ajax调用示例

ajax API

• open开启一个请求

xhr.open('method',url[,async = true])

参数:
method:  //  GET/POST/DELETE/HEAD...
url:  // 我要请求的资源相对当前文档的路径
默认为true异步求情  :  //false同步

• setRequestHeader(非必须)

xhr.setRequestHeader(header,value)
参数:
header:  //Content-type

• send正式向服务端发请求

xhr.send([data = null])

我们注意到前面的url都是相对当前文档的相对路径,是受ajax的同源策略影响的

• 什么是同源策略呢?

两个页面拥有相同的协议(protocol),端口(port),主机(host),那么这两个页面你属于同一个源(origin)

• 不是同一个地址,我们就需要跨域资源访问
  • 跨域后面再说

可参考:跨域Frame代理

---

前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？

1. 前后端联调是一种 真实业务数据和 本地mock数据之间来回切换以达到前后端分离架构下的不同开发速度时数据交换的一种方式方法,需要注意

• 接口是get还是post
• 接口的名字
• 参数是什么?我发给后端的参数
• 我要的是什么?后端发送给我,服务器？端口？方法？请求数据的一些限制？

2. mock数据

• 使用 nodejs 搭建服务器
• anywhere

• server-mock

  
  
  

  mock数据

点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?

//弄一个状态锁
var AjaxLock = false;
//事件触发下面代码
// ******start*****
if (!AjaxLock){
    AjaxLock = true;
    xhr.onreadystatechange = function(){
        if( xhr.readyState == 4) {
            //do sth
            AjaxLock = false; 
            //当接受完毕请求数据后将锁打开
        }
    }
    //ajax配置
    xhr.send();
} else {
    return;
}

题目4：实现加载更多的功能，效果范例415后端在本地使用server-mock来模拟数据

加载更多

代码预览,需要开启mock-server数据