Ajax 简单小例子

最新推荐文章于 2021-02-19 16:10:20 发布

L的博客

最新推荐文章于 2021-02-19 16:10:20 发布

阅读量736

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/weixin_42194517/article/details/103520298

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

光是看 ajax 的基本知识很难理解 ajax 的用处和具体的实现流程。下面是一个Ajax的简单小例子。

1. ajax 需要向服务器发送 ajax请求,所以我们需要有一个服务器进行响应,下面是在node.js平台创建的一个服务器,代码如下:

var http = require('http')
var fs = require('fs')
var url = require('url')
http.createServer(function (request, response) {
    response.setHeader("Access-Control-Allow-Origin", "*")
    var parseObj = url.parse(request.url, true)
    var pathname = parseObj.pathname
    if (pathname === '/ajax_test') {
        response.end(parseObj.query.str+'你好')//此处为浏览器端发来的ajax请求的响应
    } 
}).listen(3000, function () {
    console.log('running')
})

2. 启动服务器之后,在浏览器端发起ajax请求,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script>
function print(str) {
        var xhr;
        if (str.length == 0) {
            document.getElementById("s").innerHTML = "";
            return;
        }
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xhr = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById("s").innerHTML = xhr.responseText;
            }
        }
        xhr.open("GET", "http://localhost:3000/ajax_test?str=" + str, true);
        xhr.send();//send方法用来发送请求
    }

</script>
<body>
    <form action="">
        输入:
        <input type="text" onkeyup="print(this.value)" />
    </form>
    输出:
    <span id="s"></span>
</body>
</html>

效果如下:

L的博客

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax 简单小例子

光是看 ajax 的基本知识很难理解 ajax 的用处和具体的实现流程。下面是一个Ajax的简单小例子。1. ajax 需要向服务器发送 ajax请求,所以我们需要有一个服务器进行响应,下面是在node.js平台创建的一个服务器,代码如下:var http = require('http')var fs = require('fs')var url = require('url')...
复制链接

扫一扫