ajax

最新推荐文章于 2025-09-12 14:04:02 发布

zyuanq

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量99

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/zyuanq/article/details/84170607

jquery 专栏收录该内容

13 篇文章

订阅专栏

<html>
<head>
<title>GET VS. POST</title>
<script language="javascript">
var xmlHttp;  //实际运用中应该设为局部变量
function createXMLHttpRequest(){
	if(window.ActiveXObject)
		xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
	else if(window.XMLHttpRequest)
		xmlHttp = new XMLHttpRequest();
}
function createQueryString(){
	var firstName = document.getElementById("firstName").value;
	var birthday = document.getElementById("birthday").value;	
	var queryString = "firstName=" + firstName + "&birthday=" + birthday;
	return encodeURI(encodeURI(queryString));	//两次编码解决中文乱码问题
}
function doRequestUsingGET(){
	createXMLHttpRequest();
	var queryString = "9-3.aspx?";
	queryString += createQueryString() + "&timestamp=" + new Date().getTime();
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.open("GET",queryString);
	xmlHttp.send(null);
}
function doRequestUsingPOST(){
	createXMLHttpRequest();
	var url = "9-3.aspx?timestamp=" + new Date().getTime();
	var queryString = createQueryString();
	xmlHttp.open("POST",url);//默认为true异步提交
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlHttp.send(queryString);
}
function handleStateChange(){
	if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
		var responseDiv = document.getElementById("serverResponse");
		responseDiv.innerHTML = decodeURI(xmlHttp.responseText);//解码
            // DrawTable(xmlHttp.responseXML);	//responseXML获取到XML文档
	}
}

function DrawTable(myXML){
	//用DOM方法操作XML文档
	var oMembers = myXML.getElementsByTagName("member");
	var oMember = "", sName = "", sClass = "", sBirth = "", sConstell = "", sMobile = "";
	for(var i=0;i<oMembers.length;i++){
		oMember = oMembers[i];
		sName = oMember.getElementsByTagName("name")[0].firstChild.nodeValue;
		sClass = oMember.getElementsByTagName("class")[0].firstChild.nodeValue;
		sBirth = oMember.getElementsByTagName("birth")[0].firstChild.nodeValue;
		sConstell = oMember.getElementsByTagName("constell")[0].firstChild.nodeValue;
		sMobile = oMember.getElementsByTagName("mobile")[0].firstChild.nodeValue;
		//添加一行
		addTableRow(sName, sClass, sBirth, sConstell, sMobile);
	}
}
function addTableRow(sName, sClass, sBirth, sConstell, sMobile){
	//表格添加一行的相关操作，可参看7.2.1节
	var oTable = document.getElementById("member");
	var oTr = oTable.insertRow(oTable.rows.length);	
	var aText = new Array();
	aText[0] = document.createTextNode(sName);
	aText[1] = document.createTextNode(sClass);
	aText[2] = document.createTextNode(sBirth);
	aText[3] = document.createTextNode(sConstell);
	aText[4] = document.createTextNode(sMobile);
	for(var i=0;i<aText.length;i++){
		var oTd = oTr.insertCell(i);
		oTd.appendChild(aText[i]);
	}
}
</script>
</head>

<body>
<h2>输入姓名和生日</h2>
<form>
	<input type="text" id="firstName" /><br>
	<input type="text" id="birthday" />
</form>
<form>
	<input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
	<input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>
</html>

------------------------------

<?xml version="1.0" encoding="gb2312"?>
<list>
	<caption>Member List</caption>
	<member>
		<name>isaac</name>
		<class>W13</class>
		<birth>Jun 24th</birth>
		<constell>Cancer</constell>
		<mobile>1118159</mobile>
	</member>
	<member>
		<name>fresheggs</name>
		<class>W610</class>
		<birth>Nov 5th</birth>
		<constell>Scorpio</constell>
		<mobile>1038818</mobile>
	</member>
</list>