JQuery -- 笔记

JQuery是什么

1. JQuery 是 javascript 的一个框架集合(库) ， 并不是什么新的技术
2. JQuery 极大地简化了 JavaScript 编程

JQuery的作用

1. JQuery 是一个 javaScrip的框架，它的宗旨是： Write Less , Do More. 写更少的代码，完成更多的工作。
2. 平常我们如果使用ajax来完成交互工作，可能要写很多代码。并且代码重复性比较高。那么能不能让代码写的少一点，重复性低一点 , jQuery 做的就是这个事。

JQuery与Ajax 在发起请求和传送数据上的实例

1. 以用户注册时，户名是否存在的校验为例，对比使用 JQuery 和 Ajax 在判定用户名是否重复的工作流程上的区别，以及JQuery的优点。（上一篇博文为Ajax方式）

2. 对于校验用户名是否存在的工作，两者的区别仅在前端JS代码块内有差异，< body >体内及后台的Servlet，Dao等其他不需要改变。

3. 两者的区别主要体现在：如何对Servlet发起请求，并且携带参数，以及如何接收请求之后Servlet响应回来的数据的处理上，代码的不同。

4. 以下是Ajax方式下< script > 代码块内的内容

    <script type="text/javascript">
    
    	//1. 创建对象
    	function  ajaxFunction(){
    	   var xmlHttp;
    	   try{ // Firefox, Opera 8.0+, Safari
    	        xmlHttp=new XMLHttpRequest();
    	    }
    	    catch (e){
    		   try{// Internet Explorer
    		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    		      }
    		    catch (e){
    		      try{
    		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    		      }
    		      catch (e){}
    		      }
    	    }
    	
    		return xmlHttp;
    	 }
    
    	function checkUserName() {
    		
    		//获取输入框的值 document 整个网页
    		var name = document.getElementById("name").value; // value  value() val val()
    		//1. 创建对象
    		var request = ajaxFunction();
    		
    		//2. 发送请求
    		request.open("POST"  ,"/TestAjaxLogin/CheckUsername" , true );
    		
    		//注册状态改变监听，获取服务器传送过来的数据
    		request.onreadystatechange = function(){
    			
    			if(request.readyState == 4 && request.status == 200){
    				//alert(request.responseText);
    				var data = request.responseText;
    				if(data == 1){
    					//alert("用户名已存在");
    					document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";
    				}else{
    					document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";
    					//alert("用户名未存在");
    				}
    			}
    			
    		}
    		
    		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    		request.send("name="+name);
    	}
    	
    </script>
   

5. 以下是使用 JQuery 后，< script > 代码块内的内容

    <script type="text/javascript">
    
    function checkUserName() {
    	
    	//1.获取输入框内的值
    	//1.1 JQuery获取输入框内内容的方式（获值的对象必须有自己的id）|语法：$("#id名").val()
    	var name =$("#name").val();
    	//2.触发函数后，发送请求
    	//2.1 语法：$.post(url,参数值,回调的function(){}s); | 参数值语法格式: {输入框name的值,这里是name : 获取到的输入框的值,这里也是name}
    	$.post("CheckUsername",{name:name},function(data,status){
    		//alert(data);
    		if(data == 1){
    			//alert("用户名存在");
    			$("#span01").html("<font color='red'>用户名已被注册</font>");
    		}else{
    			//alert("用户名可用");
    			$("#span01").html("<font color='green'>用户名已可用</font>");
    		}
    	});
    	//3.接收请求返回的响应数据，根据响应数据呈现给用户不同的提示
    }
    	
    </script>
   

JQuery 与 Ajax 的对比

1. 可以明显的由上面的代码感受出来，在实现用户名注册校验这个功能的时候，JQuery可以很明显的感受到代码量相对于使用Ajax方式大量减少
2. 当然，JQuery相对于Ajax而言，较难理解