关于前端:简述xhr-xhr的基本使用

59次阅读

共计 2094 个字符,预计需要花费 6 分钟才能阅读完成。

XMLHttpRequest API 总结

属性:

  1. readyState xhr 的状态码 4 响应体接管结束
  2. status 获取状态码
  3. responseText 获取响应体,文本格式
  4. responseXML 获取响应体,xml 格局
  5. onreadtstatechange 事件,当 xhr.readyState 属性产生扭转触发
  6. onload 事件,响应接管结束

办法:

  1. open(method, url, async) 设置申请的形式,申请的门路,同步 / 异步
  2. send(requestBody) 发送申请体
  3. setRequestHeader(key, value) 设置申请头
  4. getResponseHeader(key) 获取响应头

申请的形式

onload:不便获取响应的事件

GET

  1. 创立 xhr 对象
  2. 调用 open 办法,设置申请形式和URL
  3. 调用 send 办法,发送
  4. 当申请响应过程完结了(调用了 xhr.onload 事件),通过 responseText 属性接管服务器返回的数据
  5. ajaxget 申请
 document.getElementById('btn').onclick = function () {
      // 创立 xhr 对象
      let xhr = new XMLHttpRequest()
      // 调用 open 办法,设置申请形式和 URL
      xhr.open('GET', 'http://127.0.0.1:3000/search')
      // 调用 send 办法,发送
      xhr.send()
      // 当申请响应过程完结了(调用了 xhr.onload 事件),通过 responseText 属性接管服务器返回的数据
      xhr.onload = function () {console.log(xhr.responseText)
      }
    }

留神:GET 申请 IE 缓存及解决方案

  • 起因:两次申请的 url 完全一致,第二次申请的时候,IE 不会向服务器再次发申请了,而是应用第一次请返回的后果
  • 解决:让每次申请的 url 不统一,能够加工夫戳参数

POST

  1. 创立 xhr 对象
  2. 调用 open 办法,设置申请形式和URL
  3. 调用 setRequestHeader() 办法,设置 header 头,指定content-type
  4. 调用 send 办法,发送
  5. 当申请响应结束,接管服务器返回的数据
    // 创立 xhr 对象
    let xhr=new XMLHttpRequest()
     // 调用 open 办法,设置申请形式和 URL
    xhr.open('POST', 'http://127.0.0.1:3000/search')
    // 调用 setRequestHeader( )办法,设置 header 头,指定 content-type
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
     // 调用 send 办法,发送
    xhr.send('x=11111')
     // 当申请响应结束,接管服务器返回的数据
    xhr.onreadystatechange=function(){if (xhr.readyState===4 || xhr.status===200) {console.log(xhr.responseText);
      }
    }

根底 get 形式和 post 形式的区别

  1. ajaxGET 申请和 ajaxpost 申请,传递参数的地位不一样
  2. GET申请只能携带大量的参数,POST 申请携带的数据没有限度
  3. 只有 POST 形式的申请才可能上传文件

onreadystatechange 和 readyState

readyState

xhr的 5 种状态

readyState 的值为 4,示意浏览器曾经齐全接管到了服务器返回的数据

readyState 状态形容 阐明
0 UNSENT 代理(XHR)被创立,但尚未调用 open() 办法
1 OPENED open() 办法曾经被调用,建设了连贯。
2 HEADERS_RECEIVED send() 办法曾经被调用,并且曾经能够获取状态行和响应头。
3 LOADING 响应体下载中,responseText属性可能曾经蕴含局部数据。
4 DONE 响应体下载实现,能够间接应用responseText

onreadystatechange

  • ajax 执行状态产生扭转(当 readyState 的值发生变化的时候)会触发
  • 当接管到的数据发生变化,也会触发该事件
  • 他能够代替 onload 事件

同步与异步

  1. xhr.open() 第三个参数传入布尔值
  2. 作用就是设置此次申请是否采纳异步形式执行,默认为 true 异步,false 为同步
  3. 同步申请

    • ajax 的同步申请,会在 send 办法那里被卡住,什么时候服务器返回数据了,后续代码能力执行,不赞成应用
    • 异步申请
  4. ajax 的异步申请,不会阻塞后续代码执行,赞成应用

兼容

  • IE5、IE6:没有 XMLHttpRequest 对象

    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

总结

Ajax 就是浏览器提供的一套 API,能够通过 JavaScript 调用,从而实现通过代码管制申请与响应,实现网络编程。
本篇到此结束,大家感觉还实用的话,关注或者点个赞都能够,谢谢啦!

正文完
 0