快捷導(dǎo)航

JQuery與Ajax常用代碼實現(xiàn)對比

更新時間：2009年10月03日 10:52:35 作者：

JQuery與Ajax常用代碼實現(xiàn)對比，大家可以看下，根據(jù)實際情況選用。

傳統(tǒng)ajax Code

 
<script language="javascript"> 
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方法
Code

復(fù)制代碼代碼如下:

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

get and post
Code

復(fù)制代碼代碼如下:

 
<title>GET VS. POST</title> 
<script language="javascript" src="jquery.min.js"></script> 
<script language="javascript"> 
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(), 
//發(fā)送GET請求 
function(data){ 
$("#serverResponse").html(decodeURI(data)); 
} 
); 
} 
function doRequestUsingPOST(){ 
$.post("14-5.aspx",createQueryString(), 
//發(fā)送POST請求 
function(data){ 
$("#serverResponse").html(decodeURI(data)); 
} 
); 
} 
</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> 

控制ajax
Code

復(fù)制代碼代碼如下:

 
<title>$.ajax()方法</title> 
<script language="javascript" src="jquery.min.js"></script> 
<script language="javascript"> 
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> 
</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> 

全局設(shè)置ajax
Code

復(fù)制代碼代碼如下:

 
<title>$.ajaxSetup()方法</title> 
<script language="javascript" src="jquery.min.js"></script> 
<script language="javascript"> 
$.ajaxSetup({ 
//全局設(shè)定 
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> 