jquery中ajax学习笔记一 |
|
本文标签：ajax AJAX简单介绍： 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>ajax</title> <!--导入js，注意src的路径--> <script type="text/javascript" src="jslib/jquery.js"></script> <script type="text/javascript" src="jslib/verify.js"></script> </head> <body> <!-- ajax不需要表单进行数据提交，因此不用写表单标签--> <!-- ajax不需要name属性，需要一个id的属性--> <!--onblur 事件会在对象失去焦点时发生--> 用户名:<input type="text" id="username" onblur="verify3()"/><div id="result"></div> </br></br> <input type="submit" value="登录" onclick="login()"/> </body> </html> 后台AJAXServer.java： 复制代码 代码如下: import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.ServletException; import java.io.IOException; import java.io.PrintWriter; public class AJAXServer extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out=response.getWriter(); //1.取参数 String old=request.getParameter("name"); //2.检查是否有问题 if(old==null||old.length()==0){ out.println("用户名不能为空"); }else{ //3.校验操作 String name=old; if(name.equals("pan")){ //4.和传统应用不同之处 。这一步需要将用户感兴趣的数据返回给页面端，而不是到新的页面 out.println("用户名["+name+"]已经存在"); }else{ out.println("用户名["+name+"]可以使用"); } } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request,response); } } javascript：verify.js 复制代码 代码如下: <!--（1）用户名称的校验，采用jquery封装的ajax动态校验表单数据--> function verify1(){ //1.获取文本框中的内容 //document.getElementById("username"); var jqueryObj= $("#username"); //获取节点的值 var userName=jqueryObj.val(); //2.将文本框中的数据发送给服务器的servlet $.get("AJAXServer?name=" +username,null,callback); } function callback(data){ //3.接收服务器返回的数据 //4.把服务器端返回的数据动态的显示在页面上 //找到保存信息的节点 var resultObj=$("#result"); resultObj.html(data); } //验证方法2是把验证方式1写在了一个方法中，效果是一样的，都是采用jquery封装的ajax动态校验表单数据 function verify2(){ $.get("AJAXServer?name="+$("#username").val(),null,function(data){ $("#result").html(data); }); } <!--（2）用户名称的校验，使用XMLHTTPRequest对象来进行ajax的异步数据验证--> var xmlhttp;//定义一个全局变量 function verify3(){ //1.采用dom的方式获取文本框中属性的值 var username=document.getElementById("username").value; //2.创建XMLHttpRequest对象 //需要针对IE和其他类型的浏览器的差异建立这个对象的不同方式写不同的代码 if(window.XMLHttpRequest){ //针对FireFox，IE7，IE8，Safari，Opera，Mozillar xmlhttp=new XMLHttpRequest(); //针对某些特定的版本的mozillar浏览器的BUG进行修正 if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/html"); } } else if(window.ActiveXObject){ //针对IE6，IE5.5，IE5 //两个用于可以创建XMLHttpRequest对象的控件名称，保存在一个js数组中，排在前面的版本较新 var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for(var i=0;i<activexName.length;i++){ // 取出一个控件名称进行创建，如果创建成功就终止循环 //如果创建失败，会抛出异常，然后可以继续循环，继续尝试创建 try{ xmlhttp=new ActiveXObject(activexName[i]); break; }catch(e){ } } } if(!xmlhttp){ alert("XMLHttpRequest对象创建失败！！"); return; } //3.注册回调函数 注册回调函数时，只需要函数名，不要加括号 //我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这个是错误的 xmlhttp.onreadystatechange=callback3; //4.设置连接信息 xmlhttp.open("GET","AJAXServer?name="+username,true); //5.发送数据，开始和服务器端进行交互 xmlhttp.send(null);//GET方式url中封装了用户名，故发送只用发一个null //POST方式请求和发送数据 <!-- xmlhttp.open("POST","AJAXServer",true); xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlhttp.send("name="+username); --> } //回调函数 function callback3(){ //判断对象的状态是否交互完成 if(xmlhttp.readyState==4){ //判断http的交互是否成功 if(xmlhttp.status==200) { //获取服务器端返回的数据 //第一种方式：获取服务器端输出的纯文本数据 var responseText=xmlhttp.responseText; //将数据显示在页面上 通过dom的方式找到div标签对应的元素节点 var divNode=document.getElementById("result"); //设置元素节点中的html的内容 divNode.innerHTML=responseText; } } } web.xml 复制代码 代码如下: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <servlet> <servlet-name>AJAXServer</servlet-name> <servlet-class>AJAXServer</servlet-class> </servlet> <servlet-mapping> <servlet-name>AJAXServer</servlet-name> <url-pattern>/AJAXServer</url-pattern> </servlet-mapping> </web-app> web.xml 复制代码 代码如下: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <servlet> <servlet-name>AJAXServer</servlet-name> <servlet-class>AJAXServer</servlet-class> </servlet> <servlet-mapping> <servlet-name>AJAXServer</servlet-name> <url-pattern>/AJAXServer</url-pattern> </servlet-mapping> </web-app> 1.web.xml servlet的配置 2.AJAXServer.java 包名相关 截图1： 截图2：
截图3：
截图4：
截图说明:以上四个截图url显示的都是一样的，只是为了便于显示我没有把它截下来 。 |
