ajax初步（1）

搭建服务器环境，创建一个文件夹，本篇搭建为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，则请求成功。

posted @ 2017-05-12 22:03  fly-time  阅读(179)  评论(0)  编辑  收藏  举报