ajax初步

Posted 2020-09-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax初步相关的知识，希望对你有一定的参考价值。

搭建服务器环境，创建一个文件夹，本篇搭建为wamp环境，在www目录下，创建ajax文件夹。

ajax概念：

AJAX 指异步JavaScript及XML（Asynchronous JavaScript And XML（异步javascript和XML）），是指一种创建交互式网页应用的网页开发技术。

使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX 可使因特网应用程序更小、更快，更友好。

如何使用：

　　1.创建XMLHTTPRequest对象；

　　2.调用open方法

　　3、调用send方法

一个简单的例子：

　　在ajax文件夹下创建1.txt文件，里面写入“hello world”。

　　然后建一个文件ajax.html,写入代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById(‘btn‘);
            oBtn.onclick = function () {
              var xhr = new XMLHttpRequest();
                xhr.open(‘get‘,‘1.txt‘,true);
                xhr.send();

                xhr.onreadystatechange = function () {
                    if(xhr.readyState == 4){
                        if(xhr.status == 200){
                            alert(xhr.responseText);
                        }

                    }
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn"/>
</body>
</html>

然后在浏览器输入：localhost/ajax/ajax.html;

点击页面按钮，出现弹窗，弹出了hello world，则请求成功。

以上是关于ajax初步的主要内容，如果未能解决你的问题，请参考以下文章

Javascript代码片段在drupal中不起作用