AJAX技术网页

最新推荐文章于 2025-06-06 17:01:56 发布

原创最新推荐文章于 2025-06-06 17:01:56 发布 · 536 阅读

0 ·

CC 4.0 BY-SA版权

JavaWeb 专栏收录该内容

5 篇文章

订阅专栏

基于ajax技术跳转，特点：不刷新本页面，在指定位置显示跳转页面的内容

基于js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
 function ajax() {
  //获取标签
  var a = document.getElementById("ss");
  //给标签添加事件
  a.onclick = function() {
   //创建一个XMLHttpRequest对象
   var request = new XMLHttpRequest();
   var method = "DET";
   var url = "../doctest.html";//即为id为ss的a标签的链接，即也可以为"ajax01.html"
   //向服务器发送请求
   //open:
   request.open(method, url);
   //send:
   request.send(null);
   //处理函数由服务器触发
   request.onreadystatechange = function() {
    /* 0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成，且响应已就绪 */
    //200：状态ok
    alert(request.readyState);
    alert(request.status);
    if (request.readyState == 4 && request.status == 200) {
     alert(request.responseText);
     //将id为p1的标签赋值
     document.getElementById("p1").innerHTML = request.responseText;
    }
   };
   return false;//取消a标签的默认行为
  };
  
 }
</script>
</head>
<body onload = "ajax()"><!--网页加载完成之后再次加载此方法 -->
 This is my HTML page01.
 <br>
 <a href="ajax01.html" id="ss" >跳转</a>
 <p id = "p1"></p>
</body>
</html>

基于jquery

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajaxJquery.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
 <script type="text/javascript"  src = "../jquery/jquery-3.3.1.js"></script>
 <script type="text/javascript">
 
  $(function(){
   $("a").click(function(){
    $("#div1").load(this.href);
    return false;
   });
  });
 </script>
  </head>
  
  <body>
    <a href="ajax01.html">跳转</a>
    <div id = "div1"></div>
  </body>
</html>