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>

　　推荐阅读

　　点击按钮后文本框变为Select下拉列表框

点击按钮后，文本框变为Select下拉列表框 ASP ASP.NET PHP JAVA [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]>>>详细阅读

本文标题：JQuery与Ajax常用代码实现对比

地址：http://www.17bianji.com/kaifa2/JS/28020.html

1/2 1