Ajax_使用XMLHttpRequest方式实现

最新推荐文章于 2024-08-26 16:40:46 发布

weixin_38169927

最新推荐文章于 2024-08-26 16:40:46 发布

阅读量124

点赞数

文章标签： java 开发工具 javascript ViewUI

原文链接：http://www.cnblogs.com/huangpeideng/p/11086699.html

版权

利用XMLHttpRequest实例与服务器进行通讯包含以下3个关键部分：

-onreadystatechange时间时间事件处理函数（用服务器触发，每次readystate属性改变都会触发readystatechange事件）

-open方法

-send方法

readystate属性有五个值 0 1 2 3 4

get请求代码如下：

<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>这是一个ajax的demo</title>
    <script type="text/javascript">
      window.onload = function () {
        document.getElementsByTagName("a")[0].onclick = function () {
          //1.创建XMLHttpRquest对象
          var request = new XMLHttpRequest();
          // 2.调用XMLHttpRequest对象的open（）方法
          request.open("GET", "hello.txt");
          // 3.调用对象的send方法
          request.send(null);
          //为对象添加onreadystatechange响应函数
          request.onreadystatechange = function () {
            // 4.判断响应是否可用，然后做响应的操作
            if (request.readyState == 4) {
              if (request.status == 200 || request.status == 304) {
　　　　　　　　　　//弹出响应文本中的内容
                alert(request.responseText);
              }
            }
          }
          return false;
        }
      }
    </script>
  </head>
  <body>
    <a href="hello.txt">点击我</a>
  </body>
</html>

post请求代码如下：

注意需要在open和send方法之间添加

request.setRequestHeader("Content-Type","application/x-www-form-urlencoding");

<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>这是一个ajax的demo</title>
    <script type="text/javascript">
      window.onload = function () {
        document.getElementsByTagName("a")[0].onclick = function () {
          //1.创建XMLHttpRquest对象
          var request = new XMLHttpRequest();
          // 2.调用XMLHttpRequest对象的open（）方法
          request.open("POST", "hello.txt");
          request.setRequestHeader("Content-Type","application/x-www-form-urlencoding"); 
          // 3.调用对象的send方法
          request.send("name='zhangsan'");
          //为对象添加onreadystatechange响应函数
          request.onreadystatechange = function () {
            // 4.判断响应是否可用，然后做响应的操作
            if (request.readyState == 4) {
              if (request.status == 200 || request.status == 304) {
                alert(request.responseText);
              }
            }
          }
          return false;
        }
      }
    </script>
  </head>
  <body>
    <a href="hello.txt">点击我</a>
  </body>
</html>

转载于:https://www.cnblogs.com/huangpeideng/p/11086699.html

weixin_38169927

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax_使用XMLHttpRequest方式实现

利用XMLHttpRequest实例与服务器进行通讯包含以下3个关键部分：-onreadystatechange时间时间事件处理函数（用服务器触发，每次readystate属性改变都会触发readystatechange事件）-open方法-send方法 readystate属性有五个值 0 1 2 3 4get请求代码如下：...
复制链接

扫一扫