ajax学习记录总结

Ajax学习记录

URL

1. 地址组成：客户端与服务器之间的通信协议
2. 存有该资源的服务器名称
3. 资源在服务器上具体的存放位置

客户端与服务器通信过程

1. 请求-处理-相应

资源的请求方式

1. get请求用于获取服务器端资源
2. post用于向服务器提交数据

什么是Ajax

1. Ajax的全称为Asynchronous Javascript And XML（异步Javascript和XML）
2. 在网页中使用XMLHttpRequest对象和服务器进行数据交互的方式，就是ajax
3. ajax可以实现网页和服务器之间的数据交互

jQuery中Ajax常用的三种方法

$.get()

1. 用来发起get请求，将服务器上的资源请求到客户端来使用

2. 函数语法：$.get(url,[data],[callback])

   参数名	参数类型	是否必选	说明
   url	string	是	要请求的资源地址
   data	object	否	请求资源间携带的参数
   callback	function	否	成功时的回调函数

$.post()

1. 用来发起post请求，向服务器提交数据

2. 函数语法：$.post(url,[data],[callback])

   参数名	参数类型	是否必选	说明
   url	string	是	提交数据的地址
   data	object	否	要提交的数据
   callback	function	否	成功时的回调函数

$.ajax()

1. 功能比较综合，可以对Ajax请求进行更加详细的配置
2. 函数语法：

      $ajax({
         type: '', //请求的方式 get / post
         url: '', //请求的url地址
         data: {}, //请求携带的数据
         success: function(res){} //成功的回调函数
      })
   

接口文档

1. 接口文档的组成部分
   • 接口名称：用来标识各个接口的简单说明
   • 接口URL：接口的调用地址
   • 调用方式：接口的调用方式
   • 参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明 4项内容
   • 响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明 3项内容
   • 返回示例（可选）：通过对象的形式，例举服务器返回数据的结构

XMLHttpRequest

什么是XMLHttpRequest

1. XMLHttpRequest（简称xhr）是浏览器提供的JavaScript对象，可以请求服务器上的数据资源，jQuery中的Ajax函数，就是基于xhr对象封装的

xhr对象的readyState属性

1. 表示当前ajax请求所处的状态

2. 状态表：

   值	状态	描述
   0	unsent	XMLHttpRequest对象已被创建，还未调用open方法
   1	opened	open方法已被调用
   2	headers_received	send方法被调用，响应头被接收
   3	loading	数据接收中，response属性已经包含部分数据
   4	done	ajax请求完成，数据传输完成或失败

发起get请求

1. 若发起带参数的get请求，需要在open方法内为url地址指定参数，这种在url地址后面拼接的参数，称为 查询字符串 ,若想使用多个参数，用&符号分割
2. 例：

var xhr = new XMLHttpRequest();
xhr.open("GET", "");
xhr.send();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
}

发起post请求

1. 与get请求相比，需设置Content-Type属性
2. 例：

var xhr = new XMLHttpRequest();
xhr.open("POST", "");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
}

编码和解码

1. URL 编码是将 URL 中不可打印的字符或具有特殊含义的字符转换为 Web 浏览器和服务器普遍接受的字符的过程
2. 编码：encodeURI()

   var str = '我爱学习';
   var encode = encodeURI(str);
   console.log(encode); //%E6%88%91%E7%88%B1%E5%AD%A6%E4%B9%A0
   

3. 解码：decodeURI()

   var code = '%E6%88%91%E7%88%B1%E5%AD%A6%E4%B9%A0';
   var decode = decodeURI(code);
   console.log(decode); //我爱学习
   

4. 注意事项：浏览器会自动对URL进行编码操作，大多数情况下不需要关心URL地址的编码与解码

数据交换格式

1. 数据交换格式是服务器端与客户端之间进行数据传输与交换的格式
2. 经常提及的数据交换格式为JSON和XML，后者用的很少

XML

1. XML全称为：EXtensible Markup Language 可扩展标记语言
2. xml用来传输和存储数据，是数据的载体

JSON

1. 概念：全称为：JavaScript Object Notation JavaScript对象表示法；JSON是 JavaScript对象和数组的字符串 表示法，使用文本表示一个JS对象或数组的信息，JSON的本质为字符串
2. 作用：JSON是一种轻量级的文本数据交换格式，专门用于存储和传输数据，比xml更小更快更易解析
3. JSON包含对象和数组两种结构：
   • 对象结构：{}括起来的内容，数据结构为{key:value, …}，JSON中所有字符串使用""，value的数据类型可以为数字 、字符串 、布尔值 、null 、数组 、对象 6种类型
   • 数组结构：[]括起来的内容，数组中的数据类型可以为数字 、字符串 、布尔值 、null 、数组 、对象 6种类型
4. 注意事项：
   • 属性名必须使用双引号
   • 字符串类型必须使用双引号
   • 不能使用undefined或函数作为JSON的值
   • JSON中不能写注释
5. 示例：
   var json = '{"name": "a", "age": 18}'
6. JSON和js对象的互换
   • JSON.parse()将字符串转换为对象，把数据对象转换为字符串的过程叫做序列化
   • JSON.stringify()将对象转为字符串，把字符串转为数据对象的过程叫做反序列化

XMLHttpRequest Level2

新特性：比起之前的版本，XMLHttpRequest Level2新增了以下功能：

1. 可以设置HTTP请求的时限
2. 可以使用FormData对象管理表单数据
3. 可以上传文件
4. 可以获得数据传输的进度信息

设置http请求时限

1. xhr.timeout = xxx设置http的请求时限
2. xhr.ontimeout = function(){}设置回调函数

FormData对象管理表单数据

1. var fd = new FormData()创建一个FormData实例
2. fd.append()通过调用append向fd中添加数据，以键值对的形式保存
3. 可以利用FormData获取表单中的信息来实现ajax
4. 上传文件
5. 显示文件上传进度
   • 可以通过监听xhr.upload.onprogress事件，来获取文件的上传进度
   • 例：

   var xhr = new XMLHttpRequest();
   //监听xhr.upload的onprogress事件
   xhr.upload.onprogress = function(e){
      //e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
         if(e.lengthComputable){
            // e.loaded 已传输的字节
            // e.total 需传输的字节
            var percentComplete = Math.ceil((e.loaded/e.total) * 100);
         }
   }
   

   • 通过xhr.upload.onload事件可以设置文件上传完成后的内容

axios

1. 什么是axios？
   axios是专注于网络数据请求的库，相比于原生XMLHttpRequest对象，axios简单易用；相比于jQuery，axios更加轻量化，只专注于网络数据请求
2. 导入axios.js包
3. 发起get请求:
   axios.get('url',{params:{/*参数*/}}).then(callback)
4. 发起post请求：
   axios.post('url',{/*参数*/}).then(callback)
5. 直接发起请求：

   axios({
      method: 'GET', //'POST'
      url: '',
      params: {}, //get
      data: {} //post
   }).then(function(res){
      console.log(res.data)
   })
   

同源策略和跨域

同源

1. 页面的协议、域名和端口都相同，则具有相同的源
2. 同源策略：(Same origin policy)是浏览器提供的一个安全功能
   MDN官方的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的重要安全机制（即不允许非同源的网站之间进行资源的交互）
   • 无法读取非同源网页的cookie、LocalStorage和IndexedDB
   • 无法接触非同源网页的DOM
   • 无法向非同源地址发送ajax请求

跨越

1. 页面的协议、域名或端口不相同
2. 浏览器允许发起跨域请求，但跨域请求回来的数据会被浏览器拦截，无法被页面获取
3. 如何实现跨域请求？
   • JSONP ：出现的早，兼容好，是一种临时解决方案，缺点是只支持get请求，不支持post请求
   • CORS ：出现较晚，是W3C标准，属于跨域AJAX请求的根本解决方案，支持get和post请求，缺点是不兼容低版本浏览器

JSONP

1. 实现原理：利用

防抖和节流

防抖

1. 防抖策略：如果事件被频繁触发，防抖可以保证只有最后一次生效
2. 可以运用在搜索等，规定多少秒后再发起请求，不至于每一次的数据改变都要向服务器发起请求，等到最后确定结果再发起请求，减轻服务器的负担

节流

1. 节流策略：减少事件触发的频率，有选择性地执行一部分事件
2. 减少请求，减轻压力