ajax简单例子

view plaincopy to clipboardprint?

1. //创建XMLHttpRequest对象，需要根据IE和浏览器类型创建不同的xhr对象   
2. var xhrobj;  
3.   
4. function check()  
5. {  
6.     //获取文本框的值   
7.     var username = document.getElementById("username").value;  
8.     if(window.XMLHttpRequest)  
9.     {  
10.         //针对firefox，Mozilla，ie7，ie8等   
11.         xhrobj =  new XMLHttpRequest();  
12.         //针对某些特定版本的Mozilla浏览器的bug进行修正   
13.         if(xhrobj.overrideMimeType)  
14.         {  
15.         xhrobj.overrideMimeType("text/html");  
16.         }  
17.     }  
18.     else if(window.ActiveXObject)  
19.     {  
20.         //针对ie6，ie5   
21.         //将创建xhr对象的控件名称保存在数组中   
22.         var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];  
23.         for(var i=0;i<activexName.length;i++)  
24.         {  
25.             try  
26.             {  
27.                 xhrobj = new ActiveXObject(activexName[i]);  
28.                 break;  
29.             }  
30.             catch(e)  
31.             {  
32.             }  
33.         }  
34.     }  
35.       
36.     /*if(!xhrobj) 
37.     { 
38.         alert("XMLHttpRequest对象创建失败"); 
39.         return; 
40.     } 
41.     else 
42.     { 
43.         alert(xhrobj); 
44.     }*/  
45.       
46.     //注册回调函数。这里只需要函数名不需要加括号   
47.     xhrobj.onreadystatechange = callback;  
48.     //设置连接.get连接方式，true表示采取异步方式交互   
49.     xhrobj.open("GET","test?username="+username,true);  
50.     //发送数据和服务器交互   
51.     xhrobj.send(null);  
52.     //post方式,需要自己设置请求头。   
53.     //xhrobj.open("POST","test",true);   
54.     //xhrobj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   
55.     //xhrobj.send("username="+username);   
56. }  
57.   
58. function callback()  
59. {  
60.     //判断对象的状态是否交互完成   
61.     if(xhrobj.readyState==4)  
62.     {  
63.         //判断HTTP的交互是否完成   
64.         if(xhrobj.status==200)  
65.         {  
66.             //获取服务器端返回的数据   
67.             var responseText = xhrobj.responseText;  
68.             //通过dom方式找到div节点   
69.             var divNode = document.getElementById("result");  
70.             //将数据显示在HTML页面上   
71.             divNode.innerHTML = responseText;  
72.         }  
73.     }  
74. }  

//创建XMLHttpRequest对象，需要根据IE和浏览器类型创建不同的xhr对象 var xhrobj; function check() { //获取文本框的值 var username = document.getElementById("username").value; if(window.XMLHttpRequest) { //针对firefox，Mozilla，ie7，ie8等 xhrobj = new XMLHttpRequest(); //针对某些特定版本的Mozilla浏览器的bug进行修正 if(xhrobj.overrideMimeType) { xhrobj.overrideMimeType("text/html"); } } else if(window.ActiveXObject) { //针对ie6，ie5 //将创建xhr对象的控件名称保存在数组中 var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for(var i=0;i<activexName.length;i++) { try { xhrobj = new ActiveXObject(activexName[i]); break; } catch(e) { } } } /*if(!xhrobj) { alert("XMLHttpRequest对象创建失败"); return; } else { alert(xhrobj); }*/ //注册回调函数。这里只需要函数名不需要加括号 xhrobj.onreadystatechange = callback; //设置连接.get连接方式，true表示采取异步方式交互 xhrobj.open("GET","test?username="+username,true); //发送数据和服务器交互 xhrobj.send(null); //post方式,需要自己设置请求头。 //xhrobj.open("POST","test",true); //xhrobj.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //xhrobj.send("username="+username); } function callback() { //判断对象的状态是否交互完成 if(xhrobj.readyState==4) { //判断HTTP的交互是否完成 if(xhrobj.status==200) { //获取服务器端返回的数据 var responseText = xhrobj.responseText; //通过dom方式找到div节点 var divNode = document.getElementById("result"); //将数据显示在HTML页面上 divNode.innerHTML = responseText; } } }

 

view plaincopy to clipboardprint?

1. 请输入用户名:<br>  
2.   
3. <input type="text" id="username">  
4. <input type="button" value="校验" onclick="check()">  
5. <div id="result"></div>  

请输入用户名:<br> <input type="text" id="username"> <input type="button" value="校验" onclick="check()"> <div id="result"></div>

 

view plaincopy to clipboardprint?

1. package com.gyb.ajax;  
2.   
3. import java.io.IOException;  
4. import java.io.PrintWriter;  
5. import java.net.URLDecoder;  
6.   
7. import javax.servlet.ServletException;  
8. import javax.servlet.http.HttpServlet;  
9. import javax.servlet.http.HttpServletRequest;  
10. import javax.servlet.http.HttpServletResponse;  
11.   
12. public class AjaxServlet extends HttpServlet  
13. {  
14.     private static final long serialVersionUID = 1L;  
15.       
16.     protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException   
17.     {  
18.         res.setContentType("text/html;charset=utf-8");  
19.         PrintWriter out = res.getWriter();  
20. //         
21. //      Integer inte = (Integer)req.getSession().getAttribute("cacheNo");   
22. //      int temp=0;   
23. //      if(inte==null)   
24. //      {   
25. //          temp=1;   
26. //      }   
27. //      else   
28. //      {   
29. //          temp = inte.intValue()+1;   
30. //      }   
31. //      req.getSession().setAttribute("cacheNo", temp);   
32.         //解决中文乱码，方法1：   
33.         //String name = new String(req.getParameter("username").getBytes("ISO-8859-1"),"utf-8");   
34.         //方法2：   
35.         String name=URLDecoder.decode(req.getParameter("username"), "utf-8");  
36.         if(name==null || "".equals(name))  
37.         {  
38.             out.println("用户名不能为空！");  
39.         }  
40.         else if(name.equals("gyb"))  
41.         {  
42.             out.println("用户名"+name+"已存在，"+temp);  
43.         }  
44.         else  
45.         {  
46.             out.println("用户名"+name+"可以使用，"+temp);  
47.         }  
48.     }  
49.   
50.     protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException   
51.     {  
52.         doGet(req, res);  
53.     }  
54.   
55. }  

package com.gyb.ajax; import java.io.IOException; import java.io.PrintWriter; import java.net.URLDecoder; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AjaxServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { res.setContentType("text/html;charset=utf-8"); PrintWriter out = res.getWriter(); // // Integer inte = (Integer)req.getSession().getAttribute("cacheNo"); // int temp=0; // if(inte==null) // { // temp=1; // } // else // { // temp = inte.intValue()+1; // } // req.getSession().setAttribute("cacheNo", temp); //解决中文乱码，方法1： //String name = new String(req.getParameter("username").getBytes("ISO-8859-1"),"utf-8"); //方法2： String name=URLDecoder.decode(req.getParameter("username"), "utf-8"); if(name==null || "".equals(name)) { out.println("用户名不能为空！"); } else if(name.equals("gyb")) { out.println("用户名"+name+"已存在，"+temp); } else { out.println("用户名"+name+"可以使用，"+temp); } } protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { doGet(req, res); } }