欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

XMLHttpRequest 的基本用法(发起获取和发布请求)-1. 使用 xhr 发起获取请求

最编程 2024-06-28 08:55:44
...
function loadDoc(){
// 第一步: 创建xhr对象
let xhr= new XMLHttpRequest();
// 第二步: 调用open函数 指定请求方式 与URL地址
xhr.open('GET', '/demo/music_list.xml', true);
// 第三步: 调用send函数 发起ajax请求
xhr.send();
// 第四步: 监听onreadystatechange事件
xhr.onreadystatechange = function(){
// 监听xhr对象的请求状态 与服务器的响应状态
if(this.readyState == 4 && this.status == 200){
// 如果响应就绪的话,就创建表格(拿到了服务器响应回来的数据xhr.responseText)
myFunction(this)
}
}
}
  • 使用xhr发送带参数的get请求,只需要为xhr.open()里的url地址指定参数 ?id=1 (也叫查询字符串)
xhr.open('GET''http://www.liulongbin.top:3006/api/getbooks?id=1')
  • 查询字符串
// 不带参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks
// 带一个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1
// 带两个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记
  • get请求携带参数的本质 无论使用 .ajax(),还是使用.ajax(),还是使用 .get(),又或者直接使用 xhr 对象发起 GET 请求,当需要携带参数的时候,本质上,都是直接将参数以查询字符串的形式,追加到 URL 地址的后面,发送到服务器的。
$.get('url', {name: 'zs', age: 20}, function() {})
// 等价于
$.get('url?name=zs&age=20', function() {})

$.ajax({ method: 'GET', url: 'url', data: {name: 'zs', age: 20}, success: function() {} })
// 等价于
$.ajax({ method: 'GET', url: 'url?name=zs&age=20', success: function() {} })

推荐阅读