ajax异步加载数据 Ajax异步加载解析(2)_H5之家 - 中国HTML5教程资源分享第一站

ajax.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Ajax测试</title></head><body><div> <h2>AJAX Test</h2> <input type="text" placeholder="用户输入，Ajax方式获得数据" onblur="getResult(this)"> <br> <span></span> <script> getResult = function(str){ var httpxml; if(0 == str.value.length) { document.getElementById("ajax_result").innerHTML = "Nothing"; } if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function(){ if(4 == xmlhttp.readyState && 200 == xmlhttp.status) { document.getElementById("ajax_result").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true); xmlhttp.send(); } </script></div></body></html>

实验结果
•长度小于6时：

Ajax 异步加载解析

•长度大于等于6：

Ajax 异步加载解析

使用JSP方式

receiveParams.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <% //接收参数 String userinput = request.getParameter("userinput"); //控制台输出表单数据看看 System.out.println("userinput =" + userinput); //检查code的合法性 if (userinput == null || userinput.trim().length() == 0) { out.println("code can't be null or empty"); } else if (userinput != null && userinput.equals("admin")) { out.println("code can't be admin"); } else { out.println("OK"); } %>

ajax.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Ajax测试</title></head><body><div> <h2>AJAX Test</h2> <input type="text" placeholder="用户输入，Ajax方式获得数据" onblur="getResult(this)"> <br> <span></span> <script> getResult = function(str){ var httpxml; if(0 == str.value.length) { document.getElementById("ajax_result").innerHTML = "Nothing"; } if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function(){ if(4 == xmlhttp.readyState && 200 == xmlhttp.status) { document.getElementById("ajax_result").innerHTML = xmlhttp.responseText; } } //xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true); xmlhttp.open("GET","receiveParams.jsp?userinput="+str.value,true); xmlhttp.send(); } </script></div></body></html>

效果一致。

JQuery 中的Ajax

前面介绍的是原生的Ajax实现方式，我们需要做的工作还是很多的，而JQuery帮助我们完成了平台无关性的工作，我们只需要专注于业务逻辑的开发即可。直接用jquery的.post或者.get或者.ajax方法，更方便更简单，js代码如下：
•.POST方式

$.post("./newProject",{newProjectName:project_name}, function(data,status){ //alert("data:" + data + "status:" + status); if(status == "success"){ var nodes = data.getElementsByTagName("project"); //alert(nodes[0].getAttribute("name")); for(var i = 0;i < nodes.length;i ++){ $("#project_items").append("<option value="" + (i+1) + "">" + nodes[i].getAttribute("name") + "</option>"); } } })

•.ajax方式

$(function(){ //按钮单击时执行 $("#testAjax").click(function(){ //Ajax调用处理 $.ajax({ type: "POST", url: "test.php", data: "name=garfield&age=18", success: function(data){ $("#myDiv").html('<h2>'+data+'</h2>'); } }); }); });

•.get方式

$(document).ready(function(){ $("#bt").click(function(){ $.get("mytest/demo/antzone.txt",function(data,status){ alert("Data:"+data+"nStatus:"+status); }) })})

总结

今天的演示对于实际开发的过程中，服务器端的用户输入数据验证，或者即时更新页面而又减少网络流量是非常的有必要的。而且用处也很广泛,还能有效的提升用户体验。

这次的案例，就当是抛砖引玉，给你的应用也添加上异步加载吧。