JQuery与Ajax常用代码实现对比

172 阅读 0 评论 114 点赞

我是靠谱客的博主现实鲜花，最近开发中收集的这篇文章主要介绍JQuery与Ajax常用代码实现对比，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

传统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

复制代码代码如下:

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

get and post
Code

复制代码代码如下:

 
<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(), 
//发送GET请求 
function(data){ 
$("#serverResponse").html(decodeURI(data)); 
} 
); 
} 
function doRequestUsingPOST(){ 
$.post("14-5.aspx",createQueryString(), 
//发送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

复制代码代码如下:

 
<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> 

全局设置ajax
Code

复制代码代码如下:

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