首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将ajax请求从jQuery纯js转换?

将ajax请求从jQuery纯js转换的方法如下:

  1. 创建一个XMLHttpRequest对象:
  2. 创建一个XMLHttpRequest对象:
  3. 设置请求的方法、URL和是否异步:
  4. 设置请求的方法、URL和是否异步:
  5. 设置请求头(可选):
  6. 设置请求头(可选):
  7. 监听请求状态变化的事件:
  8. 监听请求状态变化的事件:
  9. 发送请求:
  10. 发送请求:

完整的纯js实现的ajax请求示例代码如下:

代码语言:txt
复制
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

这样就完成了将ajax请求从jQuery转换为纯js的过程。在这个过程中,我们使用了XMLHttpRequest对象来发送请求,并通过设置请求的方法、URL、请求头和监听请求状态变化的事件来实现ajax请求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Ajax:初次认识ajaxajax使用方法

    …等等 9.3、jQuery.ajax JS原生实现Ajax我们不去讲解这里,直接使用jquery提供的,方便学习和使用,避免重复造轮子,有兴趣的同学可以去了解下JS原生XMLHttpRequest...Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式服务器获取新数据。...jQuery 提供多个与 AJAX 有关的方法。...通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。...jQuery 不是生产者,而是大自然搬运工。 jQuery Ajax本质就是 XMLHttpRequest,对他进行了封装,方便调用! jQuery.ajax(...)

    5.8K20

    【前端系列-1】ajax与Springboot通信将数据库数据渲染到前端表格

    前言 jQuery对原生js进行了大量封装,让我们使用起来更加方便,尤其ajax。这里就对jQueryajax做一个总结。...jQuery依赖,本文是下载的jquery-2.1.1.min.js文件放入static/lib中。 index.html是项目的默认访问页面。...如果不是字符串,将自动转换为字符串格式。GET请求中将附加在url后。...可用类型: xml:返回XML文档,可用jquery处理 html:返回文本HTML信息,包含的script标签会插入DOM时执行。 script:返回文本JavaScript代码。...,jquery将自动替换后一个“?”为正确的函数名,以执行回调函数。 text:返回文本字符串。 complete(Function):请求完成后回调函数(请求成功或失败后均调用)。

    2.5K41

    JSON和AJAX知识点整理

    集合,和上面步骤一样 使用匿名内部类减少创建类带来的资源损耗 AJAX-----Jquery方式 1.$.ajax({键值对})-----所有请求的属性参数都是可以通过js对象定义的 入门演示:...ajax局部更新网页的原理 JS对象---上文说的JSON对象就是JS对象 JS对象的key的双引号可写可不写,这样就与JSON字符串形式一致了 ajax中function(data),这里的data...-----Jquery方式 1.$.ajax({键值对})-----所有请求的属性参数都是可以通过js对象定义的 入门演示: index.jsp: <%@ page contentType="text...接收服务器返回的数据 { //将<em>纯</em>文本<em>转换</em>为json对象 var ret =JSON.parse(data)...<em>JS</em>对象,多用于将服务器端数据进行<em>转换</em> JSON.stringify()将<em>JS</em>对象<em>转换</em>为JSON字符串,多用于向服务器端发送数据 JSON的具体语法,参考菜鸟教程 ---- <em>ajax</em>局部更新网页的原理

    1.5K10

    全网最新、最全的jQuery核心知识,你真的不想点开看看嘛?

    DOM 对象与 jQuery 对象之间的转换 8.1 DOM 对象转换 jQuery 对象 使用(DOM对象)方式,可以DOM对象转换jQuery对象,转换jQuery对象才可以使用jQuery中的提供的方法...使用jQuery函数,实现Ajax请求。 15.1 关于jQuery函数使用Ajax请求的介绍。 jQuery 提供多个与 AJAX 有关的方法。...通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新 到 DOM 对象。...dataType:表示期望服务端返回的数据格式。当我们使用 $.ajax() 发送请求时,会把 ​ dataType的值发送给服务端。..."xml" - 一个 XML 文档 "html" - HTML 作为文本 "text" - 文本字符串 "json" - 以 JSON 运行响应,并以对象返回 语法格式:$.ajax({ data

    5.9K10

    Ajax的使用

    jQuery.ajax JS原生实现Ajax我们不去讲解这里,直接使用jquery提供的,方便学习和使用,避免重复造轮子,有兴趣的同学可以去了解下JS原生XMLHttpRequest !...Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式服务器获取新数据。 jQuery 提供多个与 AJAX 有关的方法。...通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。...jQuery 不是生产者,而是大自然搬运工。 jQuery Ajax本质就是 XMLHttpRequest,对他进行了封装,方便调用! jQuery.ajax(...).../jquery-3.1.1.min.js">--%> <script src="${pageContext.request.contextPath}/statics/<em>js</em>/<em>jquery</em>

    1.5K30

    一个小时学会jQuery

    jQueryAJAX带来方便,语法格式如下: jQuery.ajax(url,[settings]) 通过 HTTP 请求加载远程数据。 jQuery 底层 AJAX 实现。...将自动转换请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。..."script": 返回文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。..."text": 返回文本字符串 error   Function (默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。...例如,如果需要的话,你可以用它来设置withCredentials为true的跨域请求。 5.6、AJAX示例 描述: 加载并执行一个 JS 文件。

    18.5K71

    jQuery封装的AJAX使用

    jQuery 中的 Ajax jQuery为我们提供了更强大的Ajax封装 $.ajax({}) 可配置方式发起Ajax请求 $.get() 以GET方式发起Ajax请求 $.post() 以POST方式发起...设置为false将不会浏览器缓存中加载请求信息。 data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。...可用的类型如下: xml:返回XML文档,可用JQuery处理。 html:返回文本HTML信息;包含的script标签会在插入DOM时执行。 script:返回文本JavaScript代码。...,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。 text:返回文本字符串。...默认情况下,发送的数据将被转换为对象(技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。

    2.9K60

    jqueryajax参数说明

    jquery中的ajax方法参数总是记不住,这里记录一下。 1.url:  要求为String类型的参数,(默认为当前页地址)发送请求的地址。...如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看  processData选项。...可用的类型如下: xml:返回XML文档,可用JQuery处理。 html:返回文本HTML信息;包含的script标签会在插入DOM时执行。...,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。 text:返回文本字符串。...默认情况下,发送的数据将被转换为对象(技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。

    2.1K80

    $.ajax()方法详解

    jquery中的ajax方法参数总是记不住,这里记录一下。 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。...如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看  processData选项。...,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。 text:返回文本字符串。...data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。            ...默认情况下,发送的数据将被转换为对象(技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。

    1.8K20
    领券