jQuery+ajax

最新推荐文章于 2022-03-07 20:58:53 发布

最新推荐文章于 2022-03-07 20:58:53 发布 · 166 阅读

文章标签：

#Ajax #jQuery #JavaScript #JSP #Web #ViewUI

开源专栏收录该内容

6 篇文章

订阅专栏

本文通过一个具体实例对比了使用原生JavaScript实现Ajax与使用jQuery实现Ajax的区别。展示了jQuery如何简化Ajax请求，减少代码量并提高开发效率。

我又来了！独奏改双人转，jQuery+Ajax，无限可能，无限精彩！

比如说吧，我们现在要实现这样一个功能：在页面输入name与age，不刷新提交到服务器端，返回“your name is XX and your age is XX”

web页面

    <table>
    	<tr>
    		<td>name:<input id="name" type="text"/></td>
    		<td>age:<input id="age" type="text"/></td>
    	</tr>
    </table>
    <div></div>

让我们先来看看不使用jQuery，ajax是怎么做的

首先要在web页面的代码上进行改动

    <table>
    	<tr>
    		<td>name:<input id="name" type="text" onchange="ajaxStart()"/></td>
    		<td>age:<input id="age" type="text" onchange="ajaxStart()/></td>
    	</tr>
    </table>
    <div id="msg"></div>

下来是ajax代码

  <script type="text/javascript">
  	var xhr = null;  
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        try{
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e) {}
        }
     }    
     
     function ajaxStart(){
     	var url = "do.jsp";
     	var name = document.getElementById("name").value;
     	var age = document.getElementById("age").value;
     	xhr.open("POST",url,true);
     	xhr.onreadystatechange = getMsg;
     	xhr.send(null);
     }
     
     function getMsg(){
        if (xhr.readyState == 4){
            if (xhr.status == 200){
            	Display();
           	}else if (xhr.status == 404){
                alert ("Requested URL is not found.");
            }else if (xhr.status == 403){
                alert("Access denied.");
            }else  
                alert("status is " + xhr.status);
         }
     }  
        
     function Display(){
     	var info = xhr.responseText;
                alert(info);
     }
     
  </script>

一个最简单的使用就要如此多代码，而且几乎全是重复的代码，就在我们感到恼怒不已时，jQuery横空出世！

我们来看看jQuery怎么处理

  <script type="text/javascript">
  $(document).ready(function(){
        $('input').change(function(){
  	$.ajax({
	      url:'do.jsp',
	      type:'POST',
	      data:'name='+$('#name').val()+'&age='+$('#age').val(),
	      dataType: 'html',
	      timeout: 20000,
	      error: function(){
	      alert("error");
	      },
	      success: function(html){
	            $('div').text(html);
	      }
	});//end of ajax
	});//end of change
  });//end of ready
  </script>

简洁！优秀！果然不同凡响啊！

我们可以将精力完全放在需要的地方！并且使js与html代码分离，太棒了！