原生ajax代码

最新推荐文章于 2023-05-10 10:38:32 发布
最新推荐文章于 2023-05-10 10:38:32 发布
阅读量7.4k 收藏 12
点赞数 1
文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42387953/article/details/83040751
版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{

//1、创建ajax对象
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

//2、监听状态的变化
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }

//3、打开连接
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);//true代表支持异步执行，false为否

//4、发送请求
    xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" οnclick="loadXMLDoc()">修改内容</button>

</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

forgetg
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax源码
qq_40205851的博客
01-03 2116
代码： function ajax(url,fnSucc,fnFaild){ //参数：1、连接服务器的地址；2、成功时函数；3、失败时函数 // 1、创建Ajax对象       var oAjax = null;       if(window.XMLHttpRequest){          oAjax = new XMLHttpRequest(); //ie6及以上兼容   ...
原生AJAX请求
weixin_62922379的博客
05-15 1031
XML是可扩展标记语言XML被用来传递和存储数据XML和HTML很相似 但是HTML是预定义标签 而XML没有预定义标签大部分是自定义标签。
有小伙伴想要的纯原生版代码
qq_25294327的博客
05-10 913
仔细分析下这个按钮的元素 可以发现除了星星，全都是圆形，云也是很多个圆组成的。那就直接用圆形去排版就好了，全部用absolute定位，调整好位置。 然后星星最简单的实现方法就是用svg，path > d里面用c可以实现三次贝塞尔画路径，这样星星形状也解决了。 最后布局定好之后就是动效，css>transition可以搞定所有动效。在这个基础上可以再优化，比如回弹效果，只要把ease-in-out改成自定义贝塞尔曲线就行。例如改成：transition: all 0.6s cubic-bezier(0.39,
原生代码：native codes
timer_gao的博客
03-04 731
今天学Java遇到一个名词：原生代码 引导类加载器（bootstrap class loader）：它用来加载 Java 的核心库，是用原生代码来实现的 扩展类加载器（extensions class loader）：它用来加载 Java 的扩展库。 系统类加载器（system class loader）：它根据 Java 应用的类路径（CLASSPATH）来
原生Ajax
m0_61843988的博客
08-21 1747
Ajax = Async JavaScript And XML (异步的JavaScript和XML)。就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;就相当于是当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。是指进程不需要一直等下去。而是继续执行下面的操作，不管其他过程的状态。
原生ajax代码实现异步提交
02-11
原生Ajax技术是Web开发中的一个关键组成部分，它允许网页在不刷新整个页面的情况下与服务器进行数据交互，实现异步通信。在这个场景中，我们讨论的是如何使用原生JavaScript代码来实现一个简单的异步提交功能，例如...
Javascript原生ajax请求代码实例
10-15
在提供的代码实例中，`Ajax`类包含了以下关键组成部分： 1. **构造函数**：这是创建`Ajax`对象时被调用的方法。它接受URL、HTTP方法（默认为POST）、数据、成功回调、错误回调和运行回调作为参数。如果URL未定义，...
原生ajax使用
11-29
原生Ajax虽然功能强大，但代码相对复杂，不适合初学者。随着前端框架的普及，如jQuery、axios等库，它们提供了更简洁的API来处理Ajax请求。然而，理解原生Ajax的工作原理对于深入学习前端开发至关重要。在实际项目中...
Ajax 加载数据 练习代码
01-19
前端与js代码 显示数据 代号 姓名 性别 民族 生日 操作 </body> [removed] $(document).ready(functi
ajax学习源码
08-29
ajax的小例子
ajax源代码
01-15
Ajax源码
AJAX 经典源码AJAX 经典源码
07-28
AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码
ajax小例子-源码
10-11
利用控件来时间动态刷新，控件调用ajax的函数。再将空间放到任何页面就可以时间动态刷新了，很方便。注意一点的是，要在页面的onload中增加调用控件中的javascript函数的内容，具体的看代码就知道了。
ajax（原生JavaScript）异步提交表单数据
supertor的博客
07-20 4080
采用ajax异步方式，通过js获取form中所有input、select等组件的值，将这些值组成Json格式，通过异步的方式与服务器端进行交互， 一般将表单数据传送给服务器端，服务器端处理数据并返回结果信息等<html> <head></head> <body> <form id="register_form"> <input class='formVal' type="text" nam
JS原生代码实现图片轮播无缝切换的一种思路
热门推荐
谢家老树
05-02 1万+
JS实现图片轮播是个老生常谈的问题，也是新手的必由之路，在这里提供一种思路，供大家参考： 1.生成DIV做外框，并设置overflow:hidden；  // 每个方法都必须有的 2.创建一个数组arr，放置图片地址 3.生成两个并排的图片img1,img2，初始化图片地址为arr[0] arr[1] 并使用绝对定位，便于后面移动图片 4.开一个定时器，间隔一定时间后，img1 img2的
php如何接收ajax请求
小诸葛的博客
10-24 2179
1、获取请求参数 通过 $json = file_get_contents('php://input') 获取请求参数 2、将参数转为php对象 $data = json_decode($json); 3、代码示例 <?php include '../dao/LoginDao.php'; include '../bean/Res.php'; header("Content-Type: application/json;charset=UTF-8"); // 从ajax请求中获取原始数据
原生 ajax 加载html页面,ajax加载html文件
weixin_31011587的博客
06-03 616
分析加载一个html的话是可以分为加载其中某个块(div)和加载整个页面，而不管加载其中任何一种都是需要本页面的一个块(div)来进行加载展示。加载的方法可以是$(ajax{}) 方法也可以是 $('#div').load() 方法，下面为大家演示一下实操index.htmlss1122$('#router').css('color','red');预期效果index.html (load方法和$...
js原生的ajax写法
经验在于积累而不在于年限---dreamboycx
03-18 9203
一直都在用jquery的ajax写法，却忘记原生的ajax写法了，今天复习一遍。。。。//先声明一个异步请求对象 var xmlHttpReg = null; function ajax() { if (window.ActiveXObject) {//如果是IE xmlHttpReg = new Active
使用原生javascript实现ajax提交form表单
StarXY的编程空间
04-16 1万+
使用原生javascript实现ajax提交form表单============================1准备表单        首先我们需要编写一个html代码，这里我是采用nodejs里面的jade模板引擎来进行生成html代码的。form(action=&amp;quot;/ajaxTest2&amp;quot;,method=&amp;quot;post&amp;quot;,enctype=&amp;quot;text/plain&amp;
用js代码实现原生ajax请求
最新发布
08-15
### 回答1： var xhr = new XMLHttpRequest(); xhr.open("GET", "https://example.com/ajax_info.php", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { // 执行完成 if (xhr.status == 200) { // 正常响应 // 请求结果在 xhr.responseText 中 } } }; xhr.send(); ### 回答2： 原生ajax请求可以通过JavaScript代码来实现。以下是一个简单的示例： ```javascript // 创建一个XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求的方法和URL xhr.open('GET', 'https://api.example.com/data', true); // 监听请求的状态变化 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功，处理返回的数据 var response = JSON.parse(xhr.responseText); console.log(response); } }; // 发送请求 xhr.send(); ``` 在这个示例中，我们首先通过`XMLHttpRequest`构造函数创建一个`xhr`对象。然后，使用`open`方法设置请求的方法（这里是GET请求）和URL（这里是示例的API地址）。接下来，我们通过`onreadystatechange`事件监听请求的状态变化。当`readyState`变为`4`，同时`status`为`200`时，表示请求成功并返回了响应数据。我们可以通过`responseText`属性获取响应的文本数据，并使用`JSON.parse`将其解析为JavaScript对象。最后，在请求的处理函数中，我们可以对数据进行相应的处理，这里只是简单地打印到控制台。 通过以上代码，我们成功使用原生的ajax请求获取了服务器返回的数据。当然，根据具体的情况，我们也可以通过`open`方法设置请求的其他参数，如请求方式、请求头等，在`send`方法中发送请求的数据体等。 ### 回答3： 使用原生的JavaScript代码实现Ajax请求可以通过创建XMLHttpRequest对象来实现。以下是一个简单的示例： ```javascript // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 监听请求状态变化 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功，处理响应数据 var responseData = xhr.responseText; console.log(responseData); } else { // 请求失败或正在处理中 console.log('请求失败'); } }; // 发送请求 xhr.open('GET', 'https://api.example.com/data', true); // 设置请求方式、请求地址、是否异步 xhr.send(); ``` 在这个示例中，我们首先创建了一个名为xhr的XMLHttpRequest对象。然后，我们通过调用`open`方法设置请求方式（GET或POST）、请求地址和是否异步（true表示异步，false表示同步）。 然后，我们通过调用`send`方法发送请求。一旦发送请求，我们可以通过监听`onreadystatechange`事件来检测请求的状态。当`readyState`等于4且`status`等于200时，表示请求成功，我们可以处理响应数据。在这个示例中，我们只是简单地通过输出到控制台来展示响应数据。 当`readyState`并非4或`status`不等于200时，表示请求失败或正在处理中。在这个示例中，我们只是简单地通过输出到控制台来显示请求失败的信息。 这是一个最简单的使用原生JavaScript实现Ajax请求的示例。根据实际需求，您可能需要添加更多的逻辑来处理请求头部、请求参数、错误处理等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值