Ajax

客户端与服务器

客户端:获取和消费资源

服务器: 存放和对外提供资源

客户端请求服务器,服务器处理这次请求,服务器响应客户端

URL地址

http: 通信协议

//www.baidu.com 服务器名称

/xxx/p/index.html 资源在服务器上具体的存放位置

请求方式

get: 获取服务器资源(要资源)

post: 向服务器提交数据（送资源)

Ajax

实现 网页 与 服务器之间的 数据交互

接口

请求地址+请求方式

Ajax原理

  // 1. 创建 XHR 对象
  var xhr = new XMLHttpRequest()
 // 2. 调用 open 函数
  xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
// 3. 调用 send 函数
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
 if (xhr.readyState === 4 && xhr.status === 200) {
   // 获取服务器响应的数据
 console.log(xhr.responseText)
}
}

查询字符串

?id=1&&name=zs

JSON

JSON 是一种轻量级的文本数据交换格式

要实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法：

要实现从 JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法：

同源

协议，域名和端口都相同

实现跨域

JSONP,CORS,服务器反向代理

防抖

输入框防抖

防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。

var timer = null // 1. 防抖动的 timer
function debounceSearch(keywords) { // 2. 定义防抖的    函数
 timer = setTimeout(function() {
 // 发起请求
 getSuggestList(keywords)
 }, 500)
}

$('#ipt').on('keyup', function() { // 3. 在触发 keyup 事件时，立即清空 timer
 clearTimeout(timer)
// ...省略其他代码
 debounceSearch(keywords)
})

**防抖**：如果事件被频繁触发，防抖能保证只有最有一次触发生效！前面 N 多次的触发都会被忽略！

节流

节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。

节流阀

      var timer = null // 1.预定义一个 timer 节流阀
       if (timer) { return }         
         timer = setTimeout(function() {
         //发起请求
         .....
         timer=null
         },16)
         
**节流**：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！