1.ajax简介

最新推荐文章于 2024-08-24 23:57:15 发布

云边有个--小卖部

最新推荐文章于 2024-08-24 23:57:15 发布

阅读量194

点赞数 2

文章标签： Ajax XMLHttpRequest 异步请求 DOM操作 JavaScript

本文链接：https://blog.csdn.net/weixin_62115642/article/details/126351095

版权

定义:

Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在2005年被Jesse JamesGarrett提出的新术语，用来描述一种使用现有技术集合的'新方法，包括:HTML或 XL,CSS,JavaScript, DOM,XML,XSLT,以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

2.AJAX 是开发者的梦想，因为您能够：

不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据

3.AJAX原理

客户端发送请求，请求交给XMLHttpRequest，XMLHttpRequest 把请求提交给服务，服务器进行业务处理，服务器响应数据交给XMLHttpRequest对象，XMLHttpRequest对象接收数据，由javascript把数据写到页面上。

4.原生AJAX

Ajax工作流程:
Ajax通过XmIHttpRequest对象来向服务器发出异步请求，从服务器获得数据，然后用Javascript来操作DOM而更新页面。

方法	描述
open[method,ur,osync)	规定请求的类型、URL 以及是否异步处理请求。method:请求的类型;GET或 POST url:文件在服务器上的位置 async: true(异步)或false (同步)

<!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>
    点击按钮,显示对应的内容
    <hr>
    <input type="button" value="发送" id="btn">
    <div class="one">
    </div>
    <script>
        document.querySelector("#btn").onclick = function () {
            // 第一步：创建一个XMLHttpRequet对象
            var xmlhttp = new XMLHttpRequest();
            console.log(xmlhttp)
            // 第二步：告诉浏览器请求的方式是什么，以及请求发送到哪里
            xmlhttp.open("get", "data/student.xml", true);
            // 第三步:设置相应服务器端数据处理
            xmlhttp.onload = function () {
                // 做数据处理
                // 用于处理xml文件的数据
                console.log(xmlhttp.responseText)
                var students = xmlhttp.responseXML.getElementsByTagName("student");
                var table = "<table border='1'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>"
                // 遍历students
                for (var i = 0; i < students.length; i++) {
                    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>"
                // 把table添加到html中的div里
                document.querySelector(".one").innerHTML = table;
            }
            // 第四步:发送请求
            xmlhttp.send();
        }


    </script>
</body>

</html>

云边有个--小卖部

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.ajax简介

Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在2005年被Jesse JamesGarrett提出的新术语，用来描述一种使用现有技术集合的'新方法，包括:HTML或 XL,CSS,JavaScript, DOM,XML,XSLT,以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。...
复制链接

扫一扫