标签：tag send 取数据 cli border state ext onclick text
准备装载数据的html文本include.html
<h2>这是一个h2标题</h2> <a href="include.html">这是一个超链接</a>
负责对服务器请求的页面
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2019/6/26 Time: 9:53 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Ajax请求html文本</title> <style> #detail { width: 200px; height: 200px; border: 1px dotted red; } </style> <script> window.onload = function () { //获取a标签添加点击事件函数 document.getElementsByTagName("a")[0].onclick = function () { var request = new XMLHttpRequest(); var method = "GET"; //this代表当前获取到的a标签 var url = this.href; request.open(method, url); //get请求没有发送数据到服务器 request.send(null); request.onreadystatechange = function () { if (request.readyState == 4) { if (request.status == 200 || request.status == 304) { //因为html也是文本格式，所以用XMLHttpequest对象的resposeText属性获取 document.getElementById("detail").innerHTML = request.responseText; } } } //取消a标签的默认行为 return false; } } </script> </head> <body> <h1>点击下面的超链接实现Ajax请求html文本</h1> <a href="include.html">点击我实现局部刷新</a> <div id="detail"></div> </body> </html>
效果：
点击超链接，在a标签下面的div中插入html代码
标签：tag send 取数据 cli border state ext onclick text
原文地址：https://www.cnblogs.com/huangpeideng/p/11088489.html
