小饶学编程之JAVA SE第二部分——Java Web 技术：18AJAX

- 日理万妓 2022-12-31 06:20 100阅读 0赞

### AJAX ###

*  一、简介
 *  二、Ajax的基本使用
 *  三、JQuery中的Ajax使用

# 一、简介 #

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax 是一种用于创建快速动态网页的技术，在无需重新加载整个网页的情况下，能够更新部分网页。

# 二、Ajax的基本使用 #

// 创建异步请求对象
    		var xmlhttp = new XMLHttpRequest();
    		// 设置请求类型、请求地址以及参数、是否异步
    		xmlhttp.open("post","HelloServlet",true);
    		// 设置请求头部信息
    		xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
    		// 发送请求
    
    		var input = document.getElementById("userName");
    		xmlhttp.send("userName="+input.value);
    		// 状态监听
    		xmlhttp.onreadystatechange = function(){
        
    			// 当状态为4 响应码为200的时则表示请求完成
    			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        
    				// 获取返回请求结果
    				 var result = xmlhttp.responseText;
    				 // 根据请求结果进行处理
    				 if(result == 1){
        
    				  	$("#msg").text("恭喜你，可以使用此用户名");					 
    				 }else{
        
    				 	$("#msg").text("对不起，此用户名已被使用");					 
    				 }
    			}
    		};

后台代码：

// 获取用户提交的请求参数
    		String name = request.getParameter("userName");
            PrintWriter pw = response.getWriter();
            // 当用户名是seven返回字符串0，否则返回字符串1
            if("seven".equals(name)){
        
                pw.write("0");
            }else{
        
                pw.write("1");
            }

# 三、JQuery中的Ajax使用 #

$("#userName").on("blur",function(){
        
    			// $.ajax 表示jquery中的ajax的调用方式
    			$.ajax({
        
    					 "url":"HelloServlet",  // 请求地址
    					 "data":"userName="+$("input").val(),  //参数
    					 "type":"POST",  // 请求类型
    					 "success":function(data){
            // 请求成功时的回调函数
    						 if(data == 1){
        
    							 $("#msg").text("恭喜你，可以使用此用户名");
    						 }else{
        
    							 $("#msg").text("对不起，此用户名已被使用");
    						 }
    						
    					 },
    					 "error":function(){
          // 请求失败时的回调函数
    						
    					 } 
    				});
                );

后台代码同上。

**如果与服务器交互的数据时json格式可使用如下方式：**

/*
    				使用 HTTP GET 请求从服务器加载 JSON 编码的数据
    				第1个参数为请求地址，第2个参数为请求参数，请3个参数为成功时的回到函数
    			*/
    			$.getJSON("HelloServlet",{
        userName:$("input").val()},function(data){
        
                    // 如果返回的json字符串定义了result的键，可以直接通过键取出值进行判断操作
    					if(data.result){
        
    						 $("#msg").text("恭喜你，可以使用此用户名");
    					 }else{
         
    						 $("#msg").text("对不起，此用户名已被使用");
    					 }
    			});

后台代码：

// 获取用户提交的请求参数
    		String name = request.getParameter("userName");
    		PrintWriter pw = response.getWriter();
    		if("seven".equals(name)){
        
    			pw.write("{\"result\":false}");
    		}else{
        
    			pw.write("{\"result\":true}");
    		}