ajax课程大纲

2017课程大纲

ajax介绍

• ajax全称为Asynchronous JavaScript And XML，即异步的JavaScript和XML
• 主要用来与服务器进行通信
  
  • 在不重新加载页面的情况下发送请求给服务器，做到无刷新页面更新数据
  • 接受并使用从服务器发来的数据

使用ajax技术

• 创建包含发送请求和响应功能的对象：new XMLHttpRequest
• 调用方法，发送实际的请求：
  
  • xhr.open()：初始化一个请求
    
    • 语法：xhr.open(method, url[, async])
    • 参数：1、提交方式 Form-method；2，提交地址 Form-action；3、是否为同步，默认为异步
  • xhr.send():发送ajax请求
    
    • 参数： 一个可选的参数，其作为请求主体，一般用于post方式
• 常用属性和方法
  
  • xhr.onload事件：当一个请求已完成时，将触发load事件
  • xhr.onreadystatechange事件：当readyState改变是触发的事件
  • xhr.readyState：记录当前ajax请求所处的状态
    
    • 值：0，状态：UNSENT，描述： 对象被创建，但尚未调用open方法
    • 值：1，状态：OPENED，描述： 请求已建立, 但未发送 (已调用open方法, 但未调用send方法)
    • 值：2，状态：HEADERS_RECEIVED，描述： 请求已发送 (send方法已调用, 已收到响应头)
    • 值：3，状态：LOADING，描述： 请求处理中, 因响应内容不全
    • 值：4，状态：DONE，描述： 数据接收完毕
  • xhr.responseText:获取响应的内容，以文本形式存放的内容
  • xhr.status:http请求的状态码
  • xhr.statusText:状态短语

ajax涉及的知识点

• 请求方法get和post
  
  • get方法
    
    • 长度有限制，发送数据时，向URL 添加数据，格式为key=vaule&key=value
    • 编码类型application/x-www-form-url
    • 参数保留在浏览器历史中
  • post方法
• 同步和异步
  
  • 同步：就是在发出一个功能调用时，在没有得到结果之前，该调用就不返回。也就是必须一件一件事做,等前一件做完了才能做下一件事
  • 异步：当一个异步过程调用发出后，调用者不能立刻得到结果。通过状态、通知来通知调用者，或通过回调函数处理这个调用
• 状态码status
  
  • 200 OK，服务器成功返回用户请求的数据
  • 304 Not Modified，客户端可以直接从浏览器缓存里获取该资源
  • 400 Bad Request，发送的请求语法错误,服务器无法正常读取
  • 403 Forbidden，客户端没有权利访问所请求内容,服务器拒绝本次请求
  • 404 NOT FOUND，服务器找不到所请求的资源
  • 500 INTERNAL SERVER ERROR，服务器遇到未知的无法解决的问题
  • 502 Bad Gateway，服务器获取到了一个无效的HTTP响应
• JSON.parse()
  
  • 当返回的数据为json格式时，需要使用JSON.parse解析
• 发送post请求时
  
  • 设置内容的编码类型：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
  • 数据作为send方法的参数发送

ajax库使用

• 封装原生的ajax库
• jQuery中ajax的使用
  
  • $.ajax()
  • url:请求地址
  • type：请求类型
  • data：请求数据
  • dataType：预期服务器返回的数据类型
  • success：请求成功调用的函数
  • error：请求失败时调用的函数
• axios库的使用
  
  • 特性：
    
    • 支持浏览器和服务端发送请求
    • 支持 Promise API
    • 拦截请求和响应
    • 转换请求和响应数据
    • 取消请求
    • 自动转换JSON数据
  • 使用
    
    • axios.post（url [，data [，config]]）
    • axios.get（url [，config]）
    • axios.all（iterable）
    • axios.spread（callback）

上传资源

• from表单上传
• ajax上传
  
  • 只能是post方式
  • new FormData()
    
    • 用一些键值对来模拟一系列表单控件
    • 更灵活方便的发送表单数据
  • xhr.upload.onprogress事件监控上传进度
  • xhr.upload.onload事件上传已完成触发

跨域产生和解决方案

• 跨域的产生
  
  • 同源策略，为了保证用户信息的安全，防止恶意的网站窃取数据
  • 同源指三个相同：
    
    • 协议相同
    • 域名相同
    • 端口相同
  • 同源策略规定，AJAX请求只能发给同源的网址，否则就报错，以上三个只要有一个不同就产生跨域访问
• 解决方案
  
  • JSONP方案
    
    • script标签不受跨域访问的限制
    • 基本思想是，网页通过添加一个元素，向服务器请求JSON数据，服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。 - 通过回到函数的调用，就可以在函数中拿到请求后的数据
    • 只支持get请求，不支持post请求
  • 代理方式
    
    • 前端ajax请求本地接口
    • 本地接口接收到请求后向实际的接口请求数据，然后再将信息返回给前端
  • CORS请求
    
    • W3C标准，跨域资源共享（Cross-origin resource sharing）
    • 允许浏览器向跨源服务器发送ajax请求，克服了AJAX只能同源使用的限制
    • 服务端设置响应头
      
      • Access-Control-Allow-Origin: 指定允许哪些源的网页发送请求.
      • Access-Control-Allow-Credentials: 指定是否允许cookie发送.
      • Access-Control-Allow-Methods: 指定允许哪些请求方法.
      • Access-Control-Allow-Headers: 指定允许哪些常规的头域字段, 比如说 Content-Type.
      • Access-Control-Expose-Headers: 指定允许哪些额外的头域字段, 比如说 X-Custom-Header.