【Web前端】AJAX局部更新网页

使用XMLHttpRequest（XHR）更新部分网页内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Ajax</title>
</head>
<body><select style="margin: 30px 0 0 100px"><option value="Red">红色</option><option value="Grey">灰色</option></select><p style="margin: 50px 0 0 100px;width: 200px">文本框</p><script>//获取菜单和段落元素var select = document.querySelector('select');var para = document.querySelector('p');//当菜单选项变更时调用方法select.onchange = function(){var url = select.value + '.txt';display(url);}function display(url){var request = new XMLHttpRequest();    //声明一个XHR对象变量request.open('GET',url);               //open方法：初始化一个请求request.responseType = 'text';         //responseType属性:返回响应数据的类型request.send();       //send方法：发送Http请求}    request.onload = function(){           para.textContent = request.response;   //response属性：返回响应的数据}    // responseType 要在调用 open() 初始化请求之后调用， 并且要在调用 send() 发送请求到服务器之前调用。</script>
</body>
</html>

步骤：

创建XHR对象
open()方法指定获取的资源
responseType属性设置获取资源的类型
send()方法发送Http请求
response属性获得返回的资源

【Web前端】AJAX局部更新网页相关推荐

Web前端开发入门之网页制作三要素！
Web前端开发是由网页制作演变而来的,主要由HTML.CSS.JavaScript三大要素组成.专业的Web前端开发入门知识也一定会包含这些内容,今天小千就给大家简单介绍一下. HTML,超文本标记语 ...
Web 前端学习之制作网页音频
Web 前端学习之制作网页音频 1. 新建目录(image) 2. 完整代码如下所示结束语 1. 新建目录(image) 用来存放音频文件 2. 完整代码如下所示 <!DOCTYPE html ...
web前端开发基础——在网页中使用表格
web前端开发基础--在网页中使用表格文章目录 web前端开发基础--在网页中使用表格前言一.表格 1.表格及其基本使用 2.引用css 二.单元格的合并 1.样例 2.样例代码前言本篇主要 ...
个人设计web前端大作业~ 酒店网页设计(HTML5+CSS3+Bootstrap)
个人设计web前端大作业~ 酒店网页设计(HTML5+CSS3+Bootstrap)瑞豪国际酒店临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要 ...
Web前端开发实验作业 - 网页计算器
Web前端开发实验作业 - 网页计算器项目已上传至GitHub 仅供学习交流需要自取不妨点个start 谢谢 https://github.com/zhenggengqiong/Computer ...
web前端——Ajax、http、git、npm、webpack、axios
Ajax 局部刷新,异步对象XMLHttpRequest http和https 1.基本工作原理 HTTP是浏览器或者其他客户端(如手机App)和网站服务器之间沟通的协议. 浏览器作为HTTP客户端通 ...
web前端期末大作业——网页制作基础大二dw作业——动画漫展学习资料电影模板(6页)
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
HTML5期末大作业【红色的电影售票平台网站】web前端 html+css+javascript网页设计实例企业网站制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
ajax绑定事件页面重复提交,Ajax局部更新导致JS事件重复触发问题的解决方法
如果在页面中包含一个ajax更新的列表,那么需要小心非动态更新部分的事件处理. 以带有公共工具栏的列表界面为例: | Menu1 | Menu2 --------------------------- ...

【Web前端】AJAX局部更新网页

【Web前端】AJAX局部更新网页相关推荐

最新文章

热门文章