原生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
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页