jQuery入门学习二：使用jQuery方式实现异步登录验证

在《jQuery入门学习一》中，我们很容易发现这种方法的关键几步其实只需要几行代码，大量的代码都用于处理跨浏览器操作，而处理这种问题的方法是很固定的，因此可以抽出来封装一下，从而实现代码复用和更简洁的代码。

此外，有很多操作，如document.getElementById()等是经常要用到的，如果每次都输入这么长的代码，将使得我们的工作效率不是很高，因此人们就对这种操作作一个封装，使得代码更简洁。

我想上面的这些JavaScript可以改进的方面就是人们想去做一些JS框架的原始想法。随着一些框架的产生，人们发现如果对JavaScript进行一些封装的话，也可以使用类似面向对象的方式来编写JavaScript代码，于是，更强大而又更复杂的框架产生了，jQuery就是其中之一。

 

使用jQuery实现异步登录验证的步骤：

• 1.获取文本框中的内容

//Jquery的查找节点的方式，参数中#加上id属性值可以找到一个节点。 //jquery的方法返回的都是jquery的对象，可以继续在上面执行其他的jquery方法 var jqueryObj = $("#userName"); //获取节点的值 var userName = jqueryObj.val(); 

• 2.发送异步验证请求

//使用jquery的XMLHTTPrequest对象get请求的封装 $.get("AJAXServer?name=" + userName,null,callback);

• 3.回调函数

//回调函数 function callback(data) { //3.接收服务器端返回的数据 //4.将服务器段返回的数据动态的显示在页面上 //找到保存结果信息的节点 var resultObj = $("#result"); //动态的改变页面中div节点中的内容 resultObj.html(data); }

• $.get(String url, Map data, Function callback )方法介绍

 jQuery.get( String url, Map data, Function callback ) returns XMLHttpRequest

与$.ajax()方法相比，这种方法更为简单，因为它用了几个默认参数，$.ajax()方法则更加灵活，当然它用的参数也更多一些。它的一个重要特点是不论操作是否成功只有一个callback函数，而$.ajax()方法则可以根据返回的结果是否成功来用两个不同的函数来处理。

例子：

Example: Request the test.php page, but ignore the return results. $.get("test.php"); Example: Request the test.php page and send some additional data along (while still ignoring the return results). $.get("test.php", { name: "John", time: "2pm" } ); Example: Alert out the results from requesting test.php (HTML or XML, depending on what was returned). $.get("test.php", function(data){ alert("Data Loaded: " + data); }); Example: Alert out the results from requesting test.cgi with an additional payload of data (HTML or XML, depending on what was returned). $.get("test.cgi", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); });