Ajax

于 2022-08-15 17:44:47 发布
阅读量215 收藏
点赞数
文章标签： ajax javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sh2001824/article/details/126350452
版权

一、Ajax传输四部

第一步：创建一个XMLHttpRequet对象

var xmlhttp = new XMLHttpRequest()

第二部：告诉浏览器请求的方式是什么，以及请求发送到哪里

xmlhttp.open("get", "data/student.xml", true)

第三部：设置响应服务器端数据处理

  xmlhttp.onreadystatechange = function() {
                // 做数据处理
             
            }

第四部：发送请求

xmlhttp.send()

二、使用data传输

ajax代码

responseXML：获得 XML 形式的响应数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="发送" id="btn">
    <div id="div1"></div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.onclick = function() {
        // 第一步：创建一个XMLHttpRequet对象
        var xmlhttp = new XMLHttpRequest()
            // 第二部：告诉浏览器请求的方式是什么，以及请求发送到哪里
        xmlhttp.open("get", "data/student.xml", true)
            // 第三部：设置响应服务器端数据处理
        xmlhttp.onreadystatechange = function() {
                // 做数据处理
                // console.log(xmlhttp.responseText)
                // document.getElementById("div1").innerHTML = xmlhttp.responseText
                var students = xmlhttp.responseXML.getElementsByTagName("student")
                    // console.log(students)
                var table = "<table border='1' bordercolor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>";
                for (var i = 0; i < students.length; i++) {
                    // console.log(students[i].getElementsByTagName("stuID")[0].innerHTML)
                    var stuID = students[i].getElementsByTagName("stuID")[0].innerHTML
                    var stuName = students[i].getElementsByTagName("stuName")[0].innerHTML
                    var stuAge = students[i].getElementsByTagName("stuAge")[0].innerHTML
                    table += "<tr><td>" + stuID + "</td><td>" + stuName + "</td><td>" + stuAge + "</td></tr>"
                }
                table += "</table>"
                document.querySelector("#div1").innerHTML = table
            }
            // 第四部：发送请求
        xmlhttp.send()
            // xmlhttp.onloadp()
    }
</script>

</html>

data代码（后缀名为xml）

<students>
    <student>
        <stuID>1001</stuID>
        <stuName>张三</stuName>
        <stuAge>20</stuAge>
    </student>
    <student>
        <stuID>1002</stuID>
        <stuName>李四</stuName>
        <stuAge>19</stuAge>
    </student>
    <student>
        <stuID>1003</stuID>
        <stuName>李梅</stuName>
        <stuAge>21</stuAge>
    </student>
    <student>
        <stuID>1004</stuID>
        <stuName>Rose</stuName>
        <stuAge>18</stuAge>
    </student>
    
    <student>
        <stuID>1005</stuID>
        <stuName>Tom</stuName>
        <stuAge>20</stuAge>
    </student>
</students>

效果：

 三、传输json格式

responseText ：返回字符串形式的响应

ajax代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="显示" id="btn">
    <div id="div1"></div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.onclick = function() {
        //创建XMLHttpRequest
        var xmlhttp = new XMLHttpRequest()
            //请求方式。地址
        xmlhttp.open("get", "data/student.json", true)
            //
        xmlhttp.onreadystatechange = function() {
                // 序列化
                var students = JSON.parse(xmlhttp.responseText)
                    // console.log(students[0].stuID)
                var table = "<table border='1' bordercolor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>";
                for (var i = 0; i < students.length; i++) {
                    // console.log(students[i])
                    var stuID = students[i].stuID
                    var stuName = students[i].stuName
                    var stuAge = students[i].stuAge
                    table += "<tr><td>" + stuID + "</td><td>" + stuName + "</td><td>" + stuAge + "</td></tr>"
                }
                table += "</table>"
                document.querySelector("#div1").innerHTML = table
            }
            //成功
        xmlhttp.send()
    }
</script>

</html>

json代码

[{
    "stuID": "1001",
    "stuName": "张三",
    "stuAge": 20
}, {
    "stuID": "1002",
    "stuName": "李四",
    "stuAge": 19
}, {
    "stuID": "1003",
    "stuName": "李梅",
    "stuAge": 21
}, {
    "stuID": "1004",
    "stuName": "Rose",
    "stuAge": 19
}, {
    "stuID": "1005",
    "stuName": "Tom",
    "stuAge": 20
}]

以上是原生的写法

五、jquery写法

1.使用$.ajax

            $.ajax({
                    type: "get", //请求方式
                    url: "../原生ajax/data/student.json", //请求地址
                    dataType: "text", //响应的数据类型
                    success: function(data) {
                        var students = JSON.parse(data)
                        var table = "<table border='1'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>"
                        for (var i = 0; i < students.length; i++) {
                            // console.log(students[i].stuID)
                            var stuID = students[i].stuID
                            var stuName = students[i].stuName
                            var stuAge = students[i].stuAge
                            table += "<tr><td>" + stuID + "</td><td>" + stuName + "</td><td>" + stuAge + "</td></tr>"

                        }
                        table += "</table>"
                        $("#div1").html(table)

                    }
                })

效果：

get：（效果同上）

 

     $.get("../原生ajax/data/student.json", function(data) {
                // console.log(data)
                var table = "<table border='1'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>"
                for (var i = 0; i < data.length; i++) {
                    // console.log(data[i].stuID)
                    var stuID = data[i].stuID
                    var stuName = data[i].stuName
                    var stuAge = data[i].stuAge
                    table += "<tr><td>" + stuID + "</td><td>" + stuName + "</td><td>" + stuAge + "</td></tr>"

                }
                table += "</table>"
                $("#div1").html(table)
            })

sh2001824
关注
ajax
huangyh技术栈
09-28 3万+
1.1 什么是ajax: Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新...
AJAXCALL
10-31
AJAXCALL
看这一篇就够了！-Ajax详解
Oriental_的博客
03-15 16万+
今天来聊一聊前后端交互的重要工具Ajax 结合上次跟大家分享的前后端交互基础，如果还没有看过的童鞋，以下是传送门 前后端交互详解 AJAX - 到底什么是Ajax? ajax 全名 async javascript and XML 是前后台交互的能⼒ 也就是我们`客户端给服务端发送消息的⼯具，以及接受响应的⼯具 是⼀个 默认异步执⾏机制的功能AJAX分为同步（async = false...
Ajax请求的五个步骤
热门推荐
chaopingyao的博客
06-02 16万+
Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。 2、同步与异步的区别 同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。 异步提交：当用户发送请
AJAX 详解
06-19 1万+
Ajax基础知识，及常见问题详解
AJAX简介
xpmhhh的博客
03-20 6674
AJAX: 全称Asynchronous JavaScript And XML，即异步JS和XML。 通过AJAX可以在浏览器中向服务器发送异步请求。 最大的优势：无刷新的获取数据。 Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 XML: 可扩展标记语言，被设计用来传输和存储数据。 与HTML的区别：HTML中都是预定义的标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。 以前Ajax是用XML格式的字符串进行数据交换，现在已经被JSON取代了。
Ajax请求
weixin_45030426的博客
03-25 9931
ajax请求简介： ajax是利用前端的技术，向服务器发送一个异步请求 原有的请求在请求后需要刷新整张页面，
AJAX
风间琉璃の博客
08-04 3971
AJAX AJAX 不是一种新的编程语言而是一种使用现有标准的新方法，与服务器交换数据并更新部分网页的新技术（不用重新加载整个界面）。 AJAX = 异步JavaScript和xml。 1.创建AJAX对象 XMLHttpRequest 对象用于在后台与服务器交换数据 var xhr = new XMLHttpRequest(); 老版本的ie var xhr = new ActiveXObj...
Ajax 封装
weixin_47505105的博客
03-09 4610
介绍了原生ajax存在的问题，以及一步步完善对ajax进行封装
java Ajax入门
qq_54088719的博客
12-01 7253
java Ajax入门 文章目录java Ajax入门前言一、同步和异步二、Ajax的使用JavaScript方法JQuery方法总结 前言 接下来整理一下Ajax相关的内容，AJAX（asynchronous js and xml），即异步的JavaScript和xml，它的主要作用就是让页面不必等待服务器返回整个页面信息，而可以通过异步的方式给服务器发送数据和获取数据，对页面进行局部刷新，是一种提高用户体验的技术。 一、同步和异步 同步和异步的主要区别如下； （1）同步：一个响应结束后才能发送下
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
Ajax详解
07-22
资源名称：Ajax详解内容简介：《Ajax 详解》电子书 chm格式，是《四天学会Ajax》一书扩展，更加详细的讲述Ajax的方方面面。 内容简要给大家说明一下：Ajax简介、使用Javaｓｃｒｉｐｔ和Ajax发出异步请求、Ajax中的...
ajax poller
10-29
ajax poller 实现代码。
Ajax实现登录案例
10-14
主要为大家详细介绍了Ajax实现登录案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ajax 检测用户名是否被占用
01-21
try { ajax = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!=’...
SpringBoot使用Ajax实现登录
12-02
SpringBoot使用Ajax实现登录例子
致远OA-ajax.do未授权文件上传漏洞1
08-08
近日，致远OA ajaxAction 文件上传漏洞利用代码披露,由于致远OA旧版本中某些接口存在未授权访问，以及部分函数过滤不足，攻击者通过构造恶意请求，可在无
ajax实现简单登录页面
11-19
本文实例为大家分享了ajax实现简单登录页面的具体代码，供大家参考，具体内容如下 一.什么是ajax Ajax是一种无需重新加载整个网页，能够更新部分网页的技术。 二.ajax的工作原理 Ajax工作原理是一个页面的指定位置...
ajax嵌套ajax
最新发布
07-28
在前端开发中，可以使用Ajax嵌套Ajax来实现多个异步请求的依次执行。具体步骤如下： 1. 在第一个Ajax请求的回调函数中，发送第二个Ajax请求。可以使用`$.ajax()`方法或者其他类似的方法发送异步请求。 2. 在第二个Ajax请求的回调函数中，处理第二个请求的响应数据，并在需要的情况下发送第三个Ajax请求。 3. 可以继续嵌套更多的Ajax请求，每个请求都在前一个请求的回调函数内发送。 需要注意的是，Ajax嵌套Ajax可能会导致回调地狱（Callback Hell），代码可读性较差。为了避免这种情况，可以考虑使用Promise、async/await或者其他异步编程方式来管理多个异步请求的执行顺序。 以下是一个使用嵌套Ajax的示例代码： ```javascript $.ajax({ url: 'first_url', success: function(response1) { // 处理第一个请求的响应数据 $.ajax({ url: 'second_url', success: function(response2) { // 处理第二个请求的响应数据 $.ajax({ url: 'third_url', success: function(response3) { // 处理第三个请求的响应数据 }, error: function() { // 处理第三个请求失败的情况 } }); }, error: function() { // 处理第二个请求失败的情况 } }); }, error: function() { // 处理第一个请求失败的情况 } }); ``` 请注意，上述示例代码仅为演示嵌套Ajax的基本思路，实际使用中还需要根据具体需求进行适当修改和调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值