在写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:
我们就完成了一个最简单的校验:
测试:
在输入框写123,在输入框下出现:
用户名[123]尚未存在,可以使用该用户名注册, 1
测试成功!
看样子jquery很简单,但是我们也要知道它封装XMLHTTPrequest的原理,下一篇讲说明jquery是如何封装利用XMLHTTPrequest与服务器连接的。
面试经常问的:javaScript的XMLHTTPrequest对象是如何做到和服务器交互的?大家想想看
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.e1idc.net