五步法讲解Ajax请求数据过程-原创手记-慕课网

Ajax简介

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

工作原理

ajax的技术核心是 XMLHttpRequest 对象。
ajax请求过程：创建XMLHttpRequest、连接服务器、发送请求、服务器做出响应、接收响应数据
图示：

ajax与jsonp

区别

从实现方式上来讲，ajax是通过创建XMLHttpRequest来获取同源的数据。而jsonp是通过<script>标签来调用服务器提供的js脚本。

jsonp产生原因

　1. Ajax直接请求普通文件存在跨域无权限访问的问题（静态页、动态页、web服务、wcf只要是跨域请求一律不准）
　2. web的页面上调用js文件是不受跨域的影响（凡拥有src属性的标签都拥有跨域能力script img iframe）
　3. 可以判断现在想通过纯web端(ActiveX控件、服务端代理、H5之Websocket等方式不算)跨域访问数据就只有一种可能，就是在远程服务器上设法把数据装进js格式的文件里，供客户度调用和进一步处理；
　4. json的纯字符数格式可以简洁的描述复杂数据还被js原生支持
　5. web客户端通过与调用脚本一样的方式来调用跨域服务器上动态生成的js格式文件(后缀.json)，服务器之所以要动态生成json文件目的把客户端需要的数据装入进去
　6. 客户端在对json文件调用成功后获得自己所需的数据剩下的就按照自己需求进行处理和展现，这种获取远程数据的方式非常像ajax其实并一样
　7. 为了方便客户端使用数据逐渐形成非正式传输协议jsonp

其实，说到ajax就会面临两个不可避免的问题，<i style="color:red">一是以何种格式来减缓数据；二是如何解决跨域问题。</i>目前来说，所被推崇的方案是JSON作数据交换，JSONP来解决跨域问题。
JSON与JSONP虽然看上去只有一字之差，但是实际上根本不是一回事。JSON是一种key/value形式的数据格式，二JSONP则是一种跨域数据交互协议。

实例

题目：注册时，会要求输入用户名和密码，同时要验证用户名是否合法。
实现功能，用户在输入用户名后，需要给出提醒该名称是否已经存在。

html文档结构

<!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>

JavaScript代码

<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>

注意

注意：需要在html同级目录下创建一个Reademe.text文件来存储已经存在的用户名，多个用户名之间用分好隔开。

效果图

可以复制代码亲自试看下效果哦！(建议Firefox下调试)
详细代码以及五步法讲解请看下一章通俗易懂Ajax实例讲解(二)