本文列举出传统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>
Speak Your Mind