BOM，Ajax，jQuery

BOM
  浏览器对象模型，浏览器提供js操作浏览器的api   兼容性问题
  js是单线程语言
  1）超时调用
    setTimeout()
      参数：第一个参数是一个回调函数，第二个参数是一个时间（单位是毫秒）
      返回值：id值
      清除超时调用：clearTimeout(id)

  2）间歇调用
    setInterval()
    参数：第一个参数是一个回调函数，第二个参数是一个时间（单位是毫秒）
    返回值：id值
    取消间歇调用：clearInterval(id)

  3）系统对话框
    alert()  该方法接受一个字符串并将其显示给用户。该对话框会包含指定的文本和一个"OK"按钮。主要用来显示警告信息
    confirm()  确认对话框，显示包含指定的文本和一个"OK"按钮以及"Cancel"按钮。该方法返回布尔值，true表示单击了OK，false表示单击cancel        或者关闭按钮
    prompt()  会话框，提示用户输入一些文本。显示包含文本，ok按钮,cancel按钮以及一个文本输入域，以供用户在其中输入内容。传入两个参数，        要显示给用户的文本提示和文本输入域的默认值。
    如果用户单击OK按钮，该方法返回输入域的值，如果用户单击了Cancel或者关闭对话框该方法返回null

  4）location对象
    属性
      host    返回服务器名称和端口号
      hostname    返回不带端口号的服务器名称
      href    返回当前加载页面的完整URL
      pathname    返回URL的目录和文件名
      port    返回URL中指定的端口号
      protocol    返回页面使用的协议
      search  返回URL的查询字符串。这个字符串以问号开头    
    方法
      assign()    传递一个url参数，打开新url，并在浏览记录中生成一条记录
      replace()  参数为一个url,结果会导致浏览器位置改变，但不会在历史记录中生成新记录
    reload()    重新加载当前显示的页面，参数可以为boolean类型，默认为false，表示以最有效方式重新加载，可能从缓存中直接加            载。如果参数为true，强制从服务器中重新加载

  5）history对象
    length  返回历史列表中的网址数
          注意：IE和Opera从0开始，而Firefox、Chrome和Safari从1开始。
    back()  加载 history 列表中的前一个 URL
    forward()  加载 history 列表中的下一个 URL
    go()     加载 history 列表中的某个具体页面
        负数表示向上几页跳转，正数表示下几页跳转

Ajax
  async javascript and html (异步的javascript和xml)
  负责浏览器和服务器交互的工具
  传统页面：刷新页面，加载整个页面，效率比较低
  Ajax：局部刷新
  异步
  同步
  服务器
    http://47.93.206.13:8002/swagger-ui.html
  ajax使用
    1.实例化对象(XMLHttpRequest)
      var xhr = new XMLHttpRequest()
    2.连接服务器（设置请求行）
      xhr.open('get',url)
    3.设置请求头
      xhr.setRequestHeader('Content-Type','application/json')
    4.发送请求
      xhr.send()
        注意：get请求的时候，data可以不传
              post请求的时候，data必须传
              form-data  图片
    5.获取数据（监听请求）
      xhr.onreadystatechange(function(e){
        this.readState
        this.status
        this.response(字符串)
        //反序列化
        var res = JSON.parse(this.response)  //对象
      })
数据格式：纯文本，json，查询字符串

 

jQuery（第三方库） api
  <diav id = 'app'>hello</div>
  var app = document.getElementById('app')
  $('#app')
  1）第三方库，减轻工作量，它是对我们ECMAScript,DOM,BOM的浅封装
  2）使用
    1.安装
      下载源码(效率高)
    2.引入
    2.看文档使用
    3.jQuery函数
      既可以使用$，也可以使用jQuery，$ === jQuery
      a. $(选择器)
        选中符合选择器的Element(元素)，然后将这个元素添加到jQUery对象中

      b. $(html片段)
        $('<div>hello</div>')
          将这个片段先转化为Element(元素)，然后将这个元素添加到jQUery对象中
      c. $(Element元素)
        将这个Element元素转化为jQuery对象

      d. $(匿名函数)
        在文档加载完毕之后执行匿名函数

 

jQuery(ajax)
  原生ajax
    1）初始化对象（XMLHttpRequest）
      var xhr = new XMLHttpRequest()
    2）建立连接（设置请求行）
      xhr.open(type,url)
    3）设置请求头
      xhr.setRequestHeadler(key,val)
    4）发送请求
      xhr.send(data)  //get:data可以不传，post：传
    5）监听响应
      xhr.onreadystatechange = function (){
          this.readyState  //状态 2,3,4（响应回来）
          this.status  //状态：200,304,404,500
          if(this.readyState === 4 $$ this.status === 200){
              console.log(this.response)  //字符串
              //反序列化
              var res = JSON.parse(this.response)  //对象
          }
      }
      var $ = {
          get:function(){
              //五步操作
          }
      }
      $.get()
      功能
      参数
      api
      $.ajax()    请求数据