首页 > 代码库 > ajax初步(1)

ajax初步(1)

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

ajax概念:

AJAX 指异步JavaScriptXML(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初步(1)