我又来了!独奏改双人转,jQuery+Ajax,无限可能,无限精彩!
比如说吧,我们现在要实现这样一个功能:在页面输入name与age,不刷新提交到服务器端,返回“your name is XX and your age is XX”
web页面
<table>
<tr>
<td>name:<input id="name" type="text"/></td>
<td>age:<input id="age" type="text"/></td>
</tr>
</table>
<div></div>
让我们先来看看不使用jQuery,ajax是怎么做的
首先要在web页面的代码上进行改动
<table>
<tr>
<td>name:<input id="name" type="text" οnchange="ajaxStart()"/></td>
<td>age:<input id="age" type="text" οnchange="ajaxStart()/></td>
</tr>
</table>
<div id="msg"></div>
下来是ajax代码
<script type="text/javascript"> var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(window.ActiveXObject){ try{ xhr = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e) {} } } function ajaxStart(){ var url = "do.jsp"; var name = document.getElementById("name").value; var age = document.getElementById("age").value; xhr.open("POST",url,true); xhr.onreadystatechange = getMsg; xhr.send(null); } function getMsg(){ if (xhr.readyState == 4){ if (xhr.status == 200){ Display(); }else if (xhr.status == 404){ alert ("Requested URL is not found."); }else if (xhr.status == 403){ alert("Access denied."); }else alert("status is " + xhr.status); } } function Display(){ var info = xhr.responseText; alert(info); } </script>
一个最简单的使用就要如此多代码,而且几乎全是重复的代码,就在我们感到恼怒不已时,jQuery横空出世!
我们来看看jQuery怎么处理
<script type="text/javascript"> $(document).ready(function(){ $('input').change(function(){ $.ajax({ url:'do.jsp', type:'POST', data:'name='+$('#name').val()+'&age='+$('#age').val(), dataType: 'html', timeout: 20000, error: function(){ alert("error"); }, success: function(html){ $('div').text(html); } });//end of ajax });//end of change });//end of ready </script>
简洁!优秀!果然不同凡响啊!
我们可以将精力完全放在需要的地方!并且使js与html代码分离,太棒了!