在写Ajax之前，我们先了解一下Jquery，首先我们先准备一下Jquery的API文档以备不时之需。 我们来继续写verify()方法：

//定义用户名校验的方法function verify(){		//1.获取文本框当中的内容	//document.getElementById("username");  dom的方式	//jquery的查找节点的方式,参数中#加上id属性值可以找到一个节点	//jquery的方法返回的都是jquery的对象，可以继续在上面执行其他的jquery方法	var jqueryObj=$("#username");	var userName=jqueryObj.val();	//alert("文本框的值是:"+userName);			//2.将文本中的数据发送给服务器的servlet	//用javascript的话，写向服务器发数据的代码很长很痛苦，使用jquery一句话就够了	//详情查看Jquery的API帮助文档的Ajax部分	//使用jauery的XMLHTTPrequest对象get请求的封装	//get请求第一个参数是后台服务类的名称，参数二是post方式加的参数(这里用get，写成null)	//第三个参数是回调函数(做异步)	$.get("AjaxServer?name="+userName,null,callback);}//回调函数function callback(data){		//3.接受服务器端返回的数据	//alert(data);		//4.将服务器返回的数据动态的显示在页面上	//找到保存信息的节点	var resultObj=$("#result");	//往这个节点填充服务器返回的值	//div节点中的内容就会被改变	resultObj.html(data);}

当然可以将代码写的更简洁一点:

function verify(){    $.get("AjaxServer?name="+$("#username").val(),null,function(data)(	$("#result").html(data);     ));}

回顾一下html：

                        
 用户校验ajax实例
    请输入用户名:
    
            
                
        
        
    
        
    
    
          

我们就完成了一个最简单的校验： 测试： 在输入框写123，在输入框下出现： 用户名[123]尚未存在，可以使用该用户名注册, 1 测试成功！ 看样子jquery很简单，但是我们也要知道它封装XMLHTTPrequest的原理，下一篇讲说明jquery是如何封装利用XMLHTTPrequest与服务器连接的。

面试经常问的:javaScript的XMLHTTPrequest对象是如何做到和服务器交互的？大家想想看

转载请注明出处：