js原生ajax请求

以下是使用 JavaScript 原生的 XMLHttpRequest 对象进行 ajax 请求的示例代码:

javascript 复制代码
function ajaxRequest(method, url, data, callback) {
  var xhr = new XMLHttpRequest();

  xhr.open(method, url, true);

  if (method === 'POST') {
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  }

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };

  if (method === 'POST') {
    xhr.send(data);
  } else {
    xhr.send();
  }
}

// 使用示例
ajaxRequest('GET', 'https://example.com/data', null, function(response) {
  console.log(response);
});

ajaxRequest('POST', 'https://example.com/submit', 'key1=value1&key2=value2', function(response) {
  console.log(response);
});

在上述代码中:

  • ajaxRequest 函数接受请求方法(method)、请求
    URL(url)、要发送的数据(data)和回调函数(callback)作为参数。
  • 通过 open 方法设置请求的方法和 URL,并指定是否异步。 根据请求方法设置相应的请求头。
  • 通过 onreadystatechange 事件监听请求状态的变化,当请求完成且状态码为 200 时,调用回调函数处理响应数据。
  • 最后根据请求方法发送数据。

例如,在上面的使用示例中,分别进行了 GET 和 POST 请求,并在回调函数中打印响应的文本内容。

相关推荐
无羡仙7 分钟前
Webpack 背后做了什么?
javascript·webpack
码哥DFS1 小时前
NPM模块化总结
前端·javascript
灵感__idea1 小时前
JavaScript高级程序设计(第5版):代码整洁之道
前端·javascript·程序员
唐璜Taro2 小时前
electron进程间通信-IPC通信注册机制
前端·javascript·electron
陪我一起学编程3 小时前
创建Vue项目的不同方式及项目规范化配置
前端·javascript·vue.js·git·elementui·axios·企业规范
Summer不秃4 小时前
uniapp 手写签名组件开发全攻略
前端·javascript·vue.js·微信小程序·小程序·html
coderklaus4 小时前
Base64编码详解
前端·javascript
浮桥5 小时前
vue3 - 组件间的传值
前端·javascript·vue.js
wuzuyu3655 小时前
生成一个竖直放置的div,宽度是350px,上面是标题固定高度50px,下面是自适应高度的div,且有滚动条
前端·javascript·css
GISer_Jinger6 小时前
Trae Solo模式生成一个旅行足迹App
前端·javascript