Ajax之helloWorld

最新推荐文章于 2020-10-26 20:00:11 发布

gamedev˚

最新推荐文章于 2020-10-26 20:00:11 发布

阅读量550

点赞数

分类专栏：【编程语言】➣ ajax 文章标签： ajax helloworld 异步

欢迎转载，注明作者和出处就好！如果有任何问题或文章存在明显的谬误，请留言说明原因谢谢，我也可以知道原因，不断进步！

本文链接：https://blog.csdn.net/Coder__CS/article/details/72794019

版权

【编程语言】➣ ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近在学习AJAX，即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术）
这里附上几个有关的链接：
1. 维基百科-AJAX https://zh.wikipedia.org/wiki/AJAX
2. MDN-AJAX https://developer.mozilla.org/zh-TW/docs/AJAX
3. MDN-XMLHttpRequest对象 https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

编写一个index.jsp，来入门AJAX：

发送GET请求版

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    window.onload = function() {
        // 创建a节点，并为其添加onclick响应
        document.getElementsByTagName("a")[0].onclick = function() {
            // 创建一个XMLHttpRequest 对象
            var request = null;
            request = new XMLHttpRequest();
            // 准备发送请求的数据：URL,在URL后面加入时间可以避免浏览器的页面缓存
            var url = this.href + "?time=" + new Date();
            var method = "GET";
            // 调用XMLHttpRequest 对象的open方法
            request.open(method, url);
            // 为XMLHttpRequest 对象添加onreadystatechange 响应函数
            request.onreadystatechange = function() {
                // 判断响应是否 完成：XMLHttpRequest 对象的readyState 属性值为4
                if (request.readyState == 4) {
                    // 判断响应是否 完成：XMLHttpRequest 对象的status 属性值为200(ok)或304(not modified)
                    if (request.status == 200 || request.status == 304) {
                        // 打印响应结果： responseText
                        alert(request.responseText);
                    }
                }
            }
            // return false 抑制<a>标签本来的onclick点击跳转功能
            return false;
        }
    }
</script>
</head>
<body>
    <a href="ajax.txt">Hello Ajax!</a>
</body>
</html>

发送POST请求版

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    window.onload = function() {
        // 创建a节点，并为其添加onclick响应
        document.getElementsByTagName("a")[0].onclick = function() {
            // 创建一个XMLHttpRequest 对象
            var request = null;
            request = new XMLHttpRequest();
            // 准备发送请求的数据：URL,在URL后面加入时间可以避免浏览器的页面缓存
            var url = this.href + "?time=" + new Date();
            var method = "POST";
            // 调用XMLHttpRequest 对象的open方法
            request.open(method, url);

            // 额外为POST请求加上ContentType的首部设置为“application/x-www-form-urlencoded”，它会告知服务器正在发送数据，并且数据已经符合URL编码了
            request.setRequestHeader("ContentType", "application/x-www-form-urlencoded");

            // 调用XMLHttpRequest 对象的send方法
            request.send("name='yilong'");

            // 为XMLHttpRequest 对象添加onreadystatechange 响应函数
            request.onreadystatechange = function() {
                // 判断响应是否 完成：XMLHttpRequest 对象的readyState 属性值为4
                if (request.readyState == 4) {
                    // 判断响应是否 完成：XMLHttpRequest 对象的status 属性值为200(ok)或304(not modified)
                    if (request.status == 200 || request.status == 304) {
                        // 打印响应结果： responseText
                        alert(request.responseText);
                    }
                }
            }
            return false;
        }
    }
</script>
</head>
<body>
    <a href="ajax.txt">Hello Ajax!</a>  // 此处ajax.txt 文本为在index.jsp同一目录下的文本文件，内容自定义为‘Hello Ajax!’
</body>
</html>