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()    请求数据

上一篇:WordPress安全漏洞:从任意文件删除到任意代码执行


下一篇:百万TPS高吞吐、秒级低延迟,阿里​搜索离线平台如何实现?