原生ajax-异步交互

实现ajax异步交互步骤：
创建XMLHttpRequest核心对象
function getXhr(){
var xhr = null;

if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}

与服务器端建立连接
使用XMLHttpRequest对象的open(method,url)方法
method - 设置当前请求的类型
url - 设置当前请求的地址
（如果是post方法需要设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');）
向服务器端发送请求
使用XMLHttpRequest对象的send(请求参数)方法
请求参数的格式 - key=value
接受服务器端的响应数据
使用XMLHttpRequest对象的onreadystatechange事件
监听服务器端的通信状态
使用XMLHttpRequest对象的readyState属性，判断服务器端当前的状态（0-4）

使用XMLHttpRequest对象的status属性，判断服务器端当前的状态码（200）

ajax中的XML格式
请求的数据格式 - XML
客户端如何构建符合XML格式的数据
构建的数据类型 - 字符串（string）类型
字符串的内容符合XML格式的语法要求
服务器端如何接受符合XML格式的数据
接受客户端的请求数据 - 字符串（string）类型
PHP集成了DOM的相关内容
DOMDocument类
DOMElement类
DOMNode类

响应的数据格式 - XML

下面是一个原生Ajax实现二级联动的例子

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xml的二级联动</title>
</head>
<body>
    <select id="province">
        <option>请选择</option>
        <option>山东省</option>
        <option>广东省</option>
        <option>辽宁省</option>
        <option>吉林省</option>
    </select>
    <select id="city">
        <option>请选择</option>
    </select>

    <script type="text/javascript">
        var Oprovince = document.getElementById('province');
        var Acity = document.getElementById('city');

        Oprovince.onchange= function(){
            var options = Acity.getElementsByTagName('option');
            for(var j = options.length-1;j>0;j--){
                Acity.removeChild(options[j]);
            }

            if(Oprovince.value!='请选择'){
                var xhr = getXhr();

                xhr.open("post","10.php");
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.send('pro='+Oprovince.value);

                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4 && xhr.status == 200){
                        var xmlDOC = xhr.responseXML;


                            var cities = xmlDOC.getElementsByTagName('city');
                            for(var i=0;i<cities.length;i++){
                                var city = cities[i].getAttribute('name');

                                var opts = document.createElement('option');
                                var txt = document.createTextNode(city);
                                opts.appendChild(txt);
                                Acity.appendChild(opts);
                            }
                    }
                }
            }

        }
        function getXhr(){
            var xhr = null;

            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;
        }
    </script>
</body>
</html>

ajax.php

<?php
    $pro = $_POST['pro'];

    header('Content-Type:text/xml');

    switch($pro){
        case "山东省" :
        // 手工构建
            echo "<cities><city name='1' /><city name='2' /><city name='3' /></cities>";
            break;
        case "辽宁省" :
            echo "<cities><city name='4' /><city name='5' /><city name='6' /></cities>";
            break;
        case "吉林省" :
            echo "<cities><city name='7' /><city name='8' /><city name='9' /></cities>";
            break;
        case "广东省" :
            echo "<cities><city name='0' /><city name='0' /><city name='8' /></cities>";
            break;
    }
?>

一个京东订单页面的例子和原生ajax的小例子和笔记，欢迎参考：https://github.com/harrietjia/ajax

原生ajax-异步交互

猜你喜欢