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


总结

相关推荐
outstanding木槿5 分钟前
react中安装依赖时的问题 【集合】
前端·javascript·react.js·node.js
敖云岚21 分钟前
【前端三剑客】Ajax技术实现前端开发
ajax·okhttp
霸王蟹1 小时前
React中useState中更新是同步的还是异步的?
前端·javascript·笔记·学习·react.js·前端框架
霸王蟹1 小时前
React Hooks 必须在组件最顶层调用的原因解析
前端·javascript·笔记·学习·react.js
专注VB编程开发20年1 小时前
asp.net IHttpHandler 对分块传输编码的支持,IIs web服务器后端技术
服务器·前端·asp.net
爱分享的程序员2 小时前
全栈项目搭建指南:Nuxt.js + Node.js + MongoDB
前端
隐含2 小时前
webpack打包,把png,jpg等文件按照在src目录结构下的存储方式打包出来。解决同一命名的图片资源在打包之后,重复命名的图片就剩下一个图片了。
前端·webpack·node.js
lightYouUp2 小时前
windows系统中下载好node无法使用npm
前端·npm·node.js
Dontla2 小时前
npm cross-env工具包介绍(跨平台环境变量设置工具)
前端·npm·node.js
小妖6662 小时前
vue2 切换主题色以及单页面好使方法
前端·vue.js·elementui