一、Ajax的基本概念

Ajax是一种创建交互式网页应用的网页开发技术方案，全称：Asynchronous JavaScript and XML，即：异步的JavaScript 和 XML，

Ajax，主旨是通过客户端与服务器后台进行少量的数据交换，在不刷新页面的前提下，进行页面部分内容的更新。

注意：Ajax返回信息只能用于回调函数操作页面，但是不能跳转页面！

 二、Ajax的原生实现

Ajax的实现依赖于浏览器自带模块：XMLHttpRequest，通过XMLHttpRequest对象实现异步更新：

（一）XMLHttpRequest对象的方法：

　　1、创建请求：open('POST','/login',true,)，

　　　　参数一：提交方式POST\GET，参数二：指定交互的URL，参数三：true表示异步信息发送，不影响页面其他操作，

　　2、设置请求头：setRequestHeader('content-type','application/x-www-form-urlencoded;charset = UTF-8')，

　　　　使用get方式提交：不需要请求头；使用post方式提交：必须加请求头，

　　3、发送请求：send(" ")，

　　　　需要发送至服务器的数据必须是字符串形式，

　　4、获得请求头：getResponseHeadler

　　5、终止请求：abort( )

（二）XMLHttpRequest对象的字段：

　　1、状态值：readyState，共有5个值：

　　　　0：XMLHttpRequest对象未创建；

　　　　1：open已创建，但是send未发送；

　　　　2、send已发送，未收到响应；

　　　　3、已收到响应，但是不完全；

　　　　4、已收到全部响应；

　　2、回调函数：onreadystatechange = func，

　　　　表示状态值发生变化时，自动执行的回调函数，

　　3、服务器返回的数据：responseText，是字符串形式、需要解析，

　　　　tornado中解析服务器返回字符串的方法：JSON.parse（responseText），

　　4、服务器返回的数据：responseXML，是xml形式，也需要解析，不常用，

　　5、状态码（整数）：states，如：200、404等，

　　6、状态文本（字符串）：statesText，如：ok、NotFound等，

 三、Ajax的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <script src="{{static_url('js/jquery-1.12.4.min.js')}}"></script>
</head>
<body>
    <span>用户名：</span><input type="text" id="userName" name="userName" />
    <span>密码：</span><input type="password" id="passWord" name="passWord" />
    <input type="button" value="取消" />
    <input type="button" value="确定" onclick="SubmitFunc()" />

    <script>
        xhr = null;
        // 向服务器发送请求
        function SubmitFunc(){
            xhr = new XMLHttpRequest();                   // 创建ajax对象
            xhr.open('POST','/login',true,);              // 创建请求,true表示偷偷地发，设置false时页面夯住了、不能进行其他操作
            xhr.onreadystatechange = func;                // readystate发生变化时，回调函数
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded;charset = UTF-8');          // post方式请求时，需要设置文件头
            xhr.send("username="+ $("#userName").val() +";password="+ $("#passWord").val() +";");    // 发送请求
        };
        // 回调函数，根据服务器的返回信息进行操作
        function func(){
            if(xhr.readyState == 4){
                <!--获取服务器返回信息，序列化的字符串-->
                console.log(xhr.responseText);

                <!--解析字符串信息-->
                var ret = xhr.responseText;
                var ret_dict = JSON.parse(ret);

                <!--根据返回信息，按需操作-->
                if(ret_dict.status){
                    alert("ok")
                }else{
                    alert(ret_dict.message)
                };
            };
        };
    </script>
</body>
</html>
View Code

 四、Ajax的跨浏览器支持

 较低版本IE中不含有XMLHttpRequest模块，如IE5、IE6，但有模块ActiveXObject，性能类似、返回值相同，

所有为了解决跨浏览器的问题，通常需要进行判定：

　　　　

考虑跨浏览器问题后，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨浏览器的Ajax</title>
</head>
<body>
    <div>
        <p>XMLHttpRequest——Ajax请求</p>
        <input type="button" value="get请求" onclick="getRequest()"/>
        <input type="button" value="post请求" onclick="postRequest()"/>
    </div>

    <script type="text/javascript">
        <!--浏览器兼容的问题-->
        function getXHR(){
            var xhr = null;
            if (XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }
            else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr
        };

        <!--Ajax实现get请求 -->
        function getRequest(){
            var xhr = getXHR();
            xhr.onreadystatechange = function(){
                                                if(xhr.readyState == 4){console.log(xhr.responseText);};
                                                };
            xhr.open('GET','/index',true,);
            xhr.send();
        };

        <!--Ajax实现post请求 -->
        function postRequest(){
            var xhr = getXHR();
            xhr.onreadystatechange = function(){
                                                if(xhr.readyState == 4){console.log(xhr.responseText);};
                                                };
            xhr.open('POST','/index',true,);
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded;charset = UTF-8');
            xhr.send();
        };
    </script>
</body>
</html>
View Code