学习使我快乐！嘿
--WZY
一、jQuery使用Ajax
想要了解jQuery如何使用Ajax，并且体会到它所带来的方便性，那么就得了解原始的Ajax是如何编写的，是怎样的繁琐，然后和Jquery的代码进行对比，才会有所悟。
1.1、什么是Ajax？(顺带提一下)
全名：Asynchronous Javascript And Xml[异步javascript和xml]，
同步和异步原理图
同步就是浏览器发送一个请求到服务器端，网址会改变，页面会被重新加载到新的页面。如图
异步就是浏览器发送一个请求到服务器端，网址不会改变，并且页面只是局部刷新数据，能够接收服务器返回的数据，如果需要完成这样一个异步的过程，就需要使用Ajax技术，依靠Ajax引擎(XMLHttpRequest)，原理如图
Ajax是什么现在就应该知道了，看上面讲解异步的原理就懂了，总结一句话，Ajax使用异步的方式从浏览器端发送请求，请求服务器端资源，并获得内容的一种技术。
1.2、原始Ajax的用法。
如果编写原始Ajax，那么就要总的分为4步，如下图
第一步：获取Ajax引擎
第二步：通过Ajax引擎执行回调函数，用来接收服务器端返回回来的数据。
第三步：Ajax引擎创建与服务器端的连接
第四步：发送请求到服务器，并且顺带将数据传输过去
总结：注意第三步和第四步中post请求和get请求的区别，如果是post请求，则需要加第三步中的65行代码，并且所传输到服务器端的请求参数必须放在第四步的73行代码中。如果是get请求的话，请求参数就直接放在第三步的62行代码中(参考第三步的56行解释)，并且第三步中的65行代码就不需要了，还有第四步中的73行代码就不需要带请求参数过去，参考70.71的注释。
粘帖一份Ajax发送请求，并接收服务器端的数据的代码，供参考。谢谢
<script type="text/javascript"> function sendData(obj){ //alert("失去焦点"); //1 当失去焦点时，获得用户输入的内容 ，obj 等效 document.getElementById("xxx") var inputVal = obj.value; /* 2.1 创建核心类 */ var xmlhttp=null; if (window.XMLHttpRequest){// code for all new browsers xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) {// code for IE5 and IE6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } // 2.2 设置回调 xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ // 3.1 接收服务器响应的数据 ，获得json数据，注意json也是文本 var data = xmlhttp.responseText; // 3.2 将字符串 转换 json 对象 // 如果字符串 转换 json 对象时不成功，使用格式：eval("(\'abc\')"); var jsonData = eval("("+data+")"); // 3.3 判断 --控制按钮是否可用 var buttonObj = document.getElementById("buttonId"); var spanObj = document.getElementById("spanId"); if(jsonData.flag){ //可用 buttonObj.removeAttribute("disabled"); spanObj.style.color = "#3D882D"; } else { //占用 buttonObj.setAttribute("disabled","disabled"); spanObj.style.color = "#CC0000"; } // 3.4 到指定的位置显示 spanObj.innerHTML = jsonData.msg; } }; // 2.3 连接 xmlhttp.open("POST","/day21/Demo04Servlet"); // * 设置编码 xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded"); // 2.4 发送 xmlhttp.send("username=" + inputVal); } </script> </head> <body> <%-- <form action="" enctype="application/x-www-form-urlencoded"></form> --%> 用户名：<input type="text" onblur="sendData(this)" /> <span></span> <br/> 密码：<input type="password" /> <br/> <input type="button" value="点我" />