原生的ajax+jsp

浅浅的花香味﹌ 2022-02-27 02:14 173阅读 0赞

前端

ajax返回三种数据类型方式

1.返回一个字符串

//创建ajax引擎
    		function getXmlHttpObject()
    		{
    			var xmlHttp=null;
    			
    			//不同浏览器获取XMLHttpRequest的方法不同
    			try
    			{
    				
    				xmlHttp=new XMLHttpRequest();
    			}
    			catch(e)
    			{
    				
    				try
    				{
    					xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    				}
    				catch(e)
    				{
    					xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    				}
    			}
    			return xmlHttp;
    		}
    		function check()
    		{
    			var xmlHttp=getXmlHttpObject();
    			//window.alert("xmlHttp:"+xmlHttp);
    			//通过xmlHttp对象向服务器某个页面发送请求
    			//参数:1.方法 get/post 2.url 3.是否异步
    			var username=$("#username").val();
    			var url="./checkUser.action?username="+username;
    			
    			//打开请求
    			xmlHttp.open("get",url,true);
    			//指定回调函数
    			xmlHttp.onreadystatechange= function checkDeal(){
    				
    				if(xmlHttp.readyState==4)
    				{
    					console.log("完成");
    					//alert("success:"+xmlHttp.responseText)
    					$("#username1").val(xmlHttp.responseText);
    					
    				}
    				/*if(xmlHttp.readyState==0)
    				{
    					console.log("未初始化");
    				}
    				if(xmlHttp.readyState==1)
    				{
    					console.log("读取中");
    				}
    				if(xmlHttp.readyState==2)
    				{
    					console.log("已读取");
    				}
    				if(xmlHttp.readyState==3)
    				{
    					console.log("交互中");
    				}*/
    			};
    			//真的发送请求,如果是get请求，填入空，如果是post，填入实际数据
    		//	var data="username="+username;
    			xmlHttp.send(null);
    		}

controller层

@RequestMapping(value= {"/checkUser"},method=RequestMethod.GET,produces="text/html;charset=utf-8")
    	@ResponseBody
    	public void checkUser(HttpServletResponse response,String username) throws IOException
    	{
    		PrintWriter out=response.getWriter();
    		
    		System.out.println("username:"+username);
    		System.out.println(username.equals("123"));
    		if(username.equals("123"))
    		{
    			out.println(true);
    			System.out.println(true);
    		}
    		else
    		{
    			out.println(false);
    			System.out.println(false);
    		}
    		
    	}

2.返回xml格式的文本  
ajax函数

controller

@RequestMapping(value= {"/checkUser"},method=RequestMethod.	GET,produces="text/xml;charset=utf-8")
    	@ResponseBody
    	public void checkUser(HttpServletResponse response,String username) throws IOException
    	{
    		PrintWriter out=response.getWriter();
    		response.setHeader("Cache-Control", "no-cache");
    		response.setContentType("text/xml;charset=utf-8");
    		System.out.println("username:"+username+"欢迎您");
    		String s2="欢迎您";
    		String s1="抱歉";
    		
    		System.out.println(username.equals("123"));
    		if(username.equals("123"))
    		{
    			//out.println(true);
    			String str1=URLEncoder.encode(s1.toString(),"UTF-8");
    			
    			out.println("<res><msg>The username is valiad."+str1+"</msg></res>");
    			
    		
    		}
    		else
    		{
    			//对字符进行utf-8编码
    			String str2=URLEncoder.encode(s2.toString(),"UTF-8");
    			out.println("<res><msg>The username is not valiad."+str2+"</msg></res>");
    
    		}
    		
    	}

3返回json字符串  
ajax函数  
function check() \{  
var xmlHttp = getXmlHttpObject();  
// window.alert(“xmlHttp:”+xmlHttp);  
// 通过xmlHttp对象向服务器某个页面发送请求  
// 参数:1.方法 get/post 2.url 3.是否异步  
var username = $("\#username").val();  
var url = “./test/checkUser.action?username=” + username;

// 打开请求
    xmlHttp.open("get", url, true);
    // 指定回调函数
    xmlHttp.onreadystatechange = function checkDeal() {
    
    	if (xmlHttp.readyState == 4) {
    		console.log("完成");
    	
    		//将json字符串转换为一个对象
    		var msg_json = eval("(" + decodeURIComponent(xmlHttp.responseText)
    				+ ")");
    		alert(msg_json[0].res + msg_json[1].res);
    
    		// 遍历返回的json数据
    		for (var i = 0; i < msg_json.length; i++) {
    			window.alert(msg_json[i].res);
    		}
    
    	}
    	if (xmlHttp.readyState == 0) {
    		console.log("未初始化");
    	}
    	if (xmlHttp.readyState == 1) {
    		console.log("读取中");
    	}
    	if (xmlHttp.readyState == 2) {
    		console.log("已读取");
    	}
    	if (xmlHttp.readyState == 3) {
    		console.log("交互中");
    	}
    };
    // 真的发送请求,如果是get请求，填入空，如果是post，填入实际数据
    var data = "username=" + username;
    xmlHttp.send(null);

controller

@RequestMapping(value= {"/checkUser"},method=RequestMethod.	GET,produces="text/xml;charset=utf-8")
    	@ResponseBody
    	public void checkUser(HttpServletResponse response,String username) throws IOException
    	{
    		PrintWriter out=response.getWriter();
    		response.setHeader("Cache-Control", "no-cache");
    		response.setContentType("text/xml;charset=utf-8");
    		System.out.println("username:"+username+"欢迎您");
    		String s2="欢迎您";
    		String s1="抱歉";
    		
    		System.out.println(username.equals("123"));
    		if(username.equals("123"))
    		{
    
    			String str1=URLEncoder.encode(s1.toString(),"UTF-8");
    			
    		
    			out.println("[{'res':'"+str1+"'},{'res':'"+URLEncoder.encode("该账号已经被注册","UTF-8")+"'}]");
    		
    		
    		}
    		else
    		{
    			//对字符进行utf-8编码
    			String str2=URLEncoder.encode(s2.toString(),"UTF-8");
    	
    			out.println("[{'res':'"+str2+"'},{'res':'"+URLEncoder.encode(username,"UTF-8")+"'}]");
    			
    
    		}
    		
    	}