HTML---Ajax

文章目录


一.Ajax概述

AJAX(Asynchronous Javascript And XML)是一种创建交互式网页应用的网页开发技术。它使用Javascript语言与服务器进行异步交互,可以传输包括但不仅限于XML格式的数据。其最大的特点在于,当服务器响应时,无需刷新整个浏览器页面,而是可以实现局部刷新。因此,用户在使用过程中几乎不会感觉到页面加载或跳转,从而提供了更加流畅的用户体验。

与传统的同步交互相比,AJAX的异步交互方式允许客户端在发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。这大大提升了网页的响应速度和交互性。

在实际应用中,AJAX常用于实现搜索自动完成、动态数据更新、实时数据监控等功能。例如,在搜索引擎中输入关键字时,AJAX技术可以实时显示包含这些关键字的搜索结果,而无需用户等待整个页面刷新。

总的来说,AJAX是一种非常有效的网页开发技术,它通过异步交互和局部刷新的方式,极大地提升了网页的交互性和用户体验。但同时,也需要开发者注意其可能带来的问题,如浏览器的兼容性问题、安全性问题等。

二.原生创建Ajax

创建步骤

  • 创建Ajax对象
  • 连接到服务器
  • 发送请求
  • 接收返回值
html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="button" id="but1" value="读取信息" onclick="myFunction()">
    <script type="text/javascript">
        function myFunction() {
            var oAjax;
			//第一步创建Ajax对象
            oAjax = new XMLHttpRequest();
			//第二部:连接到服务器
            oAjax.open("GET", "Hello.txt", true);
			//第三步:发送请求
            oAjax.send();
			//第四步:接收返回值
			//onreadystatechage指页面与服务器交互时会触发的事件
            oAjax.onreadystatechange = function() {
				//oAjax.readyState:0-->请求初始化 1-->与服务器连接已建立 2-->请求已接收 3-->请求处理中 4-->请求已完成且响应已就绪
				//oAjax.status:404 未找到页面 200 响应完成
                if (oAjax.readyState == 4 && oAjax.status == 200) {
					//oAjax.responseText用于读取数据
                    window.alert("请求成功\n数据:" + oAjax.responseText);
                } else {
                    window.alert("请求失败:\noAjax.status" + "\noAjax.readyState=>" + oAjax.readyState);
                }
            }
        }
    </script>
</body>
</html>

三,使用Jquery处理Ajax


总结

相关推荐
AAA简单玩转程序设计几秒前
C++进阶小技巧:让代码从"能用"变"优雅"
前端·c++
子洋几秒前
群晖 DSM 更新后 Cloudflare DDNS 失效的排查记录
前端·后端·dns
一颗烂土豆9 分钟前
告别 Vue 多分辨率适配烦恼:vfit 让元素定位 “丝滑” 跨设备
前端·vue.js
ArkPppp11 分钟前
牛刀小试:Vue 3的响应式系统和Proxy?
前端
venton13 分钟前
Next.js SSR 实战:从零到一,构建服务端渲染应用
前端
萌狼蓝天20 分钟前
[Vue]性能优化:动态首行与动态列的匹配,表格数据格式处理性能优化
前端·javascript·vue.js·性能优化·ecmascript
一 乐23 分钟前
宠物管理宠物医院管理|基于Java+vue的宠物医院管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·宠物
一 乐23 分钟前
学习辅导系统|数学辅导小程序|基于java+小程序的数学辅导小程序设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·学习·小程序
徐同保35 分钟前
react+antd Input回车输入生成tag组件
前端·react.js·前端框架