传统Ajax与jQuery的Ajax区别

本文列举出传统Ajax与jQuery的Ajax实现的方法，以及他们之间的区别。可以帮助大家更好的了解Ajax技术。

用jQuery实现Ajax非常的方便,我们不用再去区别不同的浏览器了。而且实现的效果非常的炫。希望看过本文，大家都可以熟练的应用Ajax。

传统ajax

<script language="javascript">// <![CDATA[
	var xmlHttp;
	function createXMLHttpRequest(){
		if(window.ActiveXObject)
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		else if(window.XMLHttpRequest)
			xmlHttp = new XMLHttpRequest();
	}
	function startRequest(){
		createXMLHttpRequest();
		xmlHttp.open("GET","14-1.aspx",true);
		xmlHttp.onreadystatechange = function(){
		if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
			document.getElementById("target").innerHTML = xmlHttp.responseText;
		}
	xmlHttp.send(null);
	}
// ]]>
</script>

JQuery方法

<script src="jquery.min.js" language="javascript"></script><script language="javascript">// <![CDATA[
	function startRequest(){
		$("#target").load("14-1.aspx");
	}
// ]]>
</script>

GET VS. POST

<script src="jquery.min.js" language="javascript"></script><script language="javascript">// <![CDATA[
	function createQueryString(){
		var firstName = encodeURI($("#firstName").val());
		var birthday = encodeURI($("#birthday").val());
		//组合成对象的形式
		var queryString = {firstName:firstName,birthday:birthday};
		return queryString;
	}
	function doRequestUsingGET(){
		$.get("14-5.aspx",createQueryString(),
			//发送GET请求
			function(data){
				$("#serverResponse").html(decodeURI(data));
			}
		);
	}
	function doRequestUsingPOST(){
		$.post("14-5.aspx",createQueryString(),
		//发送POST请求
			function(data){
			$("#serverResponse").html(decodeURI(data));
			}
		);
	}
// ]]>
</script>

输入姓名和生日

<form><input id="firstName" type="text" />

<input id="birthday" type="text" /></form><form><input type="button" value="GET" />

<input type="button" value="POST" /></form>
<div id="serverResponse"></div>

控制ajax

$.ajax()方法

<script src="jquery.min.js" language="javascript"></script><script language="javascript">// <![CDATA[
	function createQueryString(){
		//必须两次编码才能解决中文问题
		var firstName = encodeURI(encodeURI($("#firstName").val()));
		var birthday = encodeURI(encodeURI($("#birthday").val()));
		//组合成对象的形式
		var queryString = "firstName="+firstName+"&birthday="+birthday;
		return queryString;
	}
	
	function doRequestUsingGET(){
		$.ajax({
			type: "GET",
			url: "14-5.aspx",
			data: createQueryString(),
			success: function(data){
				$("#serverResponse").html(decodeURI(data));
			}
		});
	}

	function doRequestUsingPOST(){
		$.ajax({
		type: "POST",
		url: "14-5.aspx",
		data: createQueryString(),
		success: function(data){
				$("#serverResponse").html(decodeURI(data));
			}
		});
	}
// ]]>
</script>

输入姓名和生日

<form><input id="firstName" type="text" />

<input id="birthday" type="text" /></form><form><input type="button" value="GET" />

<input type="button" value="POST" /></form>
<div id="serverResponse"></div>

全局设置ajax

$.ajaxSetup()方法

<script src="jquery.min.js" language="javascript"></script><script language="javascript">// <![CDATA[
	$.ajaxSetup({
		//全局设定
		url: "14-5.aspx",
		success: function(data){
			$("#serverResponse").html(decodeURI(data));
		}
	});

	function createQueryString(){
		//必须两次编码才能解决中文问题
		var firstName = encodeURI(encodeURI($("#firstName").val()));
		var birthday = encodeURI(encodeURI($("#birthday").val()));
		//组合成对象的形式
		var queryString = "firstName="+firstName+"&birthday="+birthday;
		return queryString;
	}

	function doRequestUsingGET(){
		$.ajax({
			data: createQueryString(),
			type: "GET"
		});
	}

	function doRequestUsingPOST(){
		$.ajax({
			data: createQueryString(),
			type: "POST"
		});
	}
// ]]>
</script>