使用 XMLHttpRequest 实现 Ajax

最新推荐文章于 2024-03-29 12:13:07 发布

HernSong

最新推荐文章于 2024-03-29 12:13:07 发布

阅读量528

点赞数

分类专栏： Web

原文链接：www.github.com/songzhaoheng

版权

Web 专栏收录该内容

72 篇文章 3 订阅

订阅专栏

XMLHttpRequest 对象

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力；它可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容；它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。

XMLHttpRequest对象是名为Ajax的 Web 应用程序架构的一项关键功能。

XMLHttpRequest能够做到：

在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

实例

<%--
  Created by IntelliJ IDEA.
  User: 23369
  Date: 2019/8/22
  Time: 11:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>Ajax</title>

    <script type="text/javascript">
      window.onload = function(){
        //1.获取a节点，并对其添加  onclick  响应函数
        document.getElementByTagName("a")[0].onclick = function(){

          //3.创建一个XMLHttpRequest 对象
          var request = new XMLHttpRequest();

          //设置request请求的超时时间
          request.timeout = 3000;

          //设置响应返回的数据格式
          request.responseType = "text";

          //4.准备发送请求的数据：url
          var url = this.href;
          var method = "GET";

          //5.调用XMLHttpRequest 对象 的open 方法
          request.open(method,url);

          //6.调用XMLHttpRequest 对象 的send方法
          request.send(null);

          //7.为XMLHttpRequest 对象添加 onreadystatechange响应函数
          request.onreadystatechange = function(){
            //8.判断响应是否完成：XMLHttpRequest 对象的readyState属性值为 4 的时候
            if(reuqest.readyState== 4){
              //9.再判断响应是否可用：XMLHttpRequest 对象 status 属性值 为200
              if(request.status == 200 || request.status == 304){
                //10.打印响应结果:responseText
                alert(request.responseText);
              }
            }
          }
          //2.取消 a 节点的默认行为
          return false;
        }
      }
    </script>

  </head>
  <body>
  <a id="hello" href="helloAjax.txt">helloworld</a>
  </body>
</html>