housemeow · January 3, 2016 00:49
diff --git a/xml.html b/xml.html
 <!DOCTYPE html>

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="scripts/jquery-2.0.2.min.js"></script>
    <script>
        var phonesXml = null;
        var url = "phones.xml";
        xmlhttp = null;
        if (window.XMLHttpRequest) {// code for all new browsers
            xmlhttp = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {// code for IE5 and IE6
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (xmlhttp != null) {
            xmlhttp.onreadystatechange = state_Change;
            xmlhttp.open("GET", url, true);
            xmlhttp.send(null);
        }
        else {
            alert("Your browser does not support XMLHTTP.");
        }

        function getPhone(phones, index) {
            return $(phonesXml).find("phone").get(index);//$(phones).get(index);
        }

        function getPhoneId(phone) {
            return $(phone).find("phoneid").get(0).innerHTML;
        }
        function getName(phone) {
            return $(phone).find("name").get(0).innerHTML;
        }
        function getCPU(phone) {
            return $(phone).find("CPU").get(0).innerHTML;
        }
        function getRAM(phone) {
            return $(phone).find("RAM").get(0).innerHTML;
        }
        function getScreenSize(phone) {
            return $(phone).find("screenSize").get(0).innerHTML;
        }
        function getMemory(phone) {
            return $(phone).find("memory").get(0).innerHTML;
        }
        function getCamera(phone) {
            return $(phone).find("camera").get(0).innerHTML;
        }
        function getBattery(phone) {
            return $(phone).find("battery").get(0).innerHTML;
        }
        function getSupportCard(phone) {
            return $(phone).find("supportCard").get(0).innerHTML;
        }
        function getPrice(phone) {
            return $(phone).find("price").get(0).innerHTML;
        }
        function getWebsite(phone) {
            return $(phone).find("website").get(0).innerHTML;
        }

        //將xml dom tree轉換為javascript array再進行處理
        function getArrayFromXML(phonesXml) {
            var phones = $.grep($(phonesXml).find("phone"), function (phone) {
                return true;
            });
            return phones;
        }

        //篩選金額後，回傳符合條件的phone
        function findPrice(phonesXml, lowerPrice, upperPrice) {
            var phones = $.grep($(phonesXml), function (phone) {
                var price = getPrice(phone);
                return lowerPrice <= price && price <= upperPrice;
            });
            return phones;
        }

        //篩選記憶體後，回傳符合條件的phone
        function findRAM(phonesXml, lowerRAM, upperRAM) {
            var phones = $.grep($(phonesXml), function (phone) {
                var ram = getRAM(phone);
                return lowerRAM <= ram && ram <= upperRAM;
            });
            return phones;
        }

        function debug(phone)
        {
            console.log(phone);
            console.log(getPhoneId(phone));
            console.log(getName(phone));
            console.log(getCPU(phone));
            console.log(getRAM(phone));
            console.log(getScreenSize(phone));
            console.log(getMemory(phone));
            console.log(getCamera(phone));
            console.log(getBattery(phone));
            console.log(getSupportCard(phone));
            console.log(getPrice(phone));
            console.log(getWebsite(phone));
        }

        function state_Change() {
            if (xmlhttp.readyState == 4) {// 4 = "loaded"
                if (xmlhttp.status == 200) {// 200 = OK
                    phonesXml = xmlhttp.responseXML;
                    var phoneList = null;//
                    console.log(phonesXml);
                    phoneList = getArrayFromXML(phonesXml);
                    phoneList = findPrice(phoneList, 8000, 12345);
                    phoneList = findRAM(phoneList, 512, 768);

                    console.log(phoneList);
                    for (var i = 0; i < phoneList.length; i++) {
                        var phone = phoneList[i];
                        var phoneName = getName(phone);
                       
                        $("#phonesList").append("<li>" + phoneName + "</li>");
                    }

                }
                else {
                    alert("Problem retrieving XML data");
                }
            }
        }
    </script>

 </head>
 <body>
    <div id="phones">
        <ul id="phonesList">
        </ul>
    </div>
 </body>
 </html>
	<!DOCTYPE html>

	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="scripts/jquery-2.0.2.min.js"></script>
	<script>
	var phonesXml = null;
	var url = "phones.xml";
	xmlhttp = null;
	if (window.XMLHttpRequest) {// code for all new browsers
	xmlhttp = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) {// code for IE5 and IE6
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if (xmlhttp != null) {
	xmlhttp.onreadystatechange = state_Change;
	xmlhttp.open("GET", url, true);
	xmlhttp.send(null);
	}
	else {
	alert("Your browser does not support XMLHTTP.");
	}

	function getPhone(phones, index) {
	return $(phonesXml).find("phone").get(index);//$(phones).get(index);
	}

	function getPhoneId(phone) {
	return $(phone).find("phoneid").get(0).innerHTML;
	}
	function getName(phone) {
	return $(phone).find("name").get(0).innerHTML;
	}
	function getCPU(phone) {
	return $(phone).find("CPU").get(0).innerHTML;
	}
	function getRAM(phone) {
	return $(phone).find("RAM").get(0).innerHTML;
	}
	function getScreenSize(phone) {
	return $(phone).find("screenSize").get(0).innerHTML;
	}
	function getMemory(phone) {
	return $(phone).find("memory").get(0).innerHTML;
	}
	function getCamera(phone) {
	return $(phone).find("camera").get(0).innerHTML;
	}
	function getBattery(phone) {
	return $(phone).find("battery").get(0).innerHTML;
	}
	function getSupportCard(phone) {
	return $(phone).find("supportCard").get(0).innerHTML;
	}
	function getPrice(phone) {
	return $(phone).find("price").get(0).innerHTML;
	}
	function getWebsite(phone) {
	return $(phone).find("website").get(0).innerHTML;
	}

	//將xml dom tree轉換為javascript array再進行處理
	function getArrayFromXML(phonesXml) {
	var phones = $.grep($(phonesXml).find("phone"), function (phone) {
	return true;
	});
	return phones;
	}

	//篩選金額後，回傳符合條件的phone
	function findPrice(phonesXml, lowerPrice, upperPrice) {
	var phones = $.grep($(phonesXml), function (phone) {
	var price = getPrice(phone);
	return lowerPrice <= price && price <= upperPrice;
	});
	return phones;
	}

	//篩選記憶體後，回傳符合條件的phone
	function findRAM(phonesXml, lowerRAM, upperRAM) {
	var phones = $.grep($(phonesXml), function (phone) {
	var ram = getRAM(phone);
	return lowerRAM <= ram && ram <= upperRAM;
	});
	return phones;
	}

	function debug(phone)
	{
	console.log(phone);
	console.log(getPhoneId(phone));
	console.log(getName(phone));
	console.log(getCPU(phone));
	console.log(getRAM(phone));
	console.log(getScreenSize(phone));
	console.log(getMemory(phone));
	console.log(getCamera(phone));
	console.log(getBattery(phone));
	console.log(getSupportCard(phone));
	console.log(getPrice(phone));
	console.log(getWebsite(phone));
	}

	function state_Change() {
	if (xmlhttp.readyState == 4) {// 4 = "loaded"
	if (xmlhttp.status == 200) {// 200 = OK
	phonesXml = xmlhttp.responseXML;
	var phoneList = null;//
	console.log(phonesXml);
	phoneList = getArrayFromXML(phonesXml);
	phoneList = findPrice(phoneList, 8000, 12345);
	phoneList = findRAM(phoneList, 512, 768);

	console.log(phoneList);
	for (var i = 0; i < phoneList.length; i++) {
	var phone = phoneList[i];
	var phoneName = getName(phone);

	$("#phonesList").append("<li>" + phoneName + "</li>");
	}

	}
	else {
	alert("Problem retrieving XML data");
	}
	}
	}
	</script>

	</head>
	<body>
	<div id="phones">
	<ul id="phonesList">
	</ul>
	</div>
	</body>
	</html>