五步法讲解Ajax请求数据过程

最新推荐文章于 2024-05-13 03:34:52 发布

TSAB

最新推荐文章于 2024-05-13 03:34:52 发布

阅读量1.4k

点赞数 1

分类专栏： JavaWep

JavaWep 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Ajax简介
ajax = 异步 JavaScript 和 XML。
ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。我们知道，传统的网页（不使用ajax）如果需要更新内容，必须重新加载整个网页。Ajax的出现，使得使网可以实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
注意：ajax本身不支持跨域请求，需要在服务器端处理。
工作原理
ajax的技术核心是 XMLHttpRequest 对象。
ajax请求过程：创建XMLHttpRequest、连接服务器、发送请求、服务器做出响应、接收响应数据
图示：

**实例**

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Ajax实例详解</title>
</head>
<body>
    <div class="reg" style="margin-top: 50px;margin-left:100px;">
      <p>注册页(ajax检测用户名是否合法)</p>
      <form name="Form">
      用户名: <input type="text" name="Name" onblur="check()">
      <span id="myDiv"></span><br>
      密　码: <input type="text" name="Password"><br>
      <input type="button" value=" 提交" name="Btn" disabled="false">
    </form>
    </div>
</body>
</html>


<script type="text/javascript">
    //初始化一个存储XMLHttpRequest对象的变量
    var xhr = null;
    //定义一个函数用来创建XMLHttpRequest对象,兼容各个版本
    function CreatXHR()
    {
        //判断浏览器是否支持ActiveX控件，针对IE6及之前版本
        if (window.ActiveXObject)
        {
            //将所有可能出现的ActiveXObject版本都放在一个数组中
            var arrXHR = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
            //通过循环创建XMLHttpRequest对象
            var temp = arrXHR.length;
            for (var i=0;i<temp;i++)
            {
                try
                {
                    //创建XMLHttpRequest对象
                    xhr = new ActiveXObject(arrXHR[i]);
                    //如果创建XMLHttpRequest对象成功，则跳出循环
                    break;
                }
                catch(ex)
                {
                }
            }
        }
        //判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，Firefox，Opera等浏览器
        else if(window.XMLHttpRequest)
        {
            xhr = new XMLHttpRequest();
        }
    }
    //响应XMLHttpRequest对象状态变化的函数
    function httpStateChange()
    {
        if (xhr.readyState==4)//异步调用完毕
        {
            if (xhr.status==200 || xhr.status==0)//异步调用成功，在本机上调试
            {
                //获得服务器返回的数据
                var Names = xhr.responseText;
                var arrName = Names.split(";");//把获取到的一个字符串分割成字符串数组。

                //定义一个变量，用于判断用户名是否已经存在
                var Flag = false;

                for(i=0;i<arrName.length;i++)
                {
                    if (arrName[i]== Form.Name.value)
                    {
                        Flag = true;//用户名存在
                        break;
                    }
                }

                //合法性验证提醒
                var OWarn = document.getElementById("Warn");
                if (Flag)
                {
                    OWarn.innerHTML = "您输入的用户名已存在，请重新输入！";
                    Form.Btn.disabled = true;//提交按钮不可用
                }
                else
                {
                    OWarn.innerHTML = "合法用户名";
                    Form.Btn.disabled = false;//提交按钮可用
                }
            }
        }
    }
    //校验用户名是否有效
    function check()
    {
        //创建XMLHttpRequest对象，调用前面定义好的函数
        CreatXHR();

        if (xhr!=null)
        {
            //创建响应XMLHttpRequest对象状态变化的函数
            xhr.onreadystatechange = httpStateChange;
            //创建http请求
            xhr.open("get","Readme.txt", true);
            //发送http请求
            xhr.send(null);
        }
        else
        {
            alert("您的浏览器不支持XMLHTTP");
        }
    }
</script>

TSAB

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
五步法讲解Ajax请求数据过程

Ajax简介ajax = 异步 JavaScript 和 XML。ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。我们知道，传统的网页（不使用ajax）如果需要更新内容，必须重新加载整个网页。Ajax的出现，使得使网可以实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。注意：ajax本身不支持跨域请求，需要在服务器端处理。工作原理aja...
复制链接

扫一扫

专栏目录