Ajax(超级重点)

一时失言乱红尘 2022-03-16 00:57 117阅读 0赞

## 4.Ajax(超级重点) ##

AJax就是**局部刷新技术**，在和服务器之间交互时，不用刷新整个页面，只是更新页面的一部分。  
一个Ajax应用程序包含以下几种技术：  
**1).服务器端技术,比如Servlet需要在服务器端处理请求，发送响应给浏览器**  
**2).javascript:** 通过js事件来发送异步请求，即在事件的响应函数中**发送ajax异步请求，将服务器端返回的响应数据绑定到DOM元素中进行显示**  
3).DOM:需要使用DOM技术动态更新页面的一部分，比如输入关键字后，动态生成一个div,里面是包含关键字的所有词条。  
![在这里插入图片描述][20190225202329922.png]

4).Xhtml: **html+css,需要使用css来控制显示的样式**  
5).XMLHTTPRequest： ajax交互的核心对象，**它由浏览器的ajax引擎自动创建，无需开发人员创建**  
**4.1 Ajax应用程序的开发步骤**  
  
第1步：开发客户端程序

第2步：开发服务器端程序

public void doPost(HttpServletRequest request, HttpServletResponse 
    	response)
    			throws ServletException, IOException {
        
          //获取请求参数
    		String name=request.getParameter("name");
    		String age=request.getParameter("age");
    	     //把数据响应回去，就是把响应数据写回给浏览器
    		PrintWriter  out=response.getWriter();
    		out.print("返回来的数据，name:"+name+",age:"+age);
    		out.flush();
    		out.close();
    	}

注意：在用$.ajax()发送异步请求时，可以通过error回调函数来捕获到异常信息

**4.2 服务器端返回json文本时客户端的两种处理**

1.  .如果服务器端返回json文本，客户端指定dataType为text时，此时客户端接收到数据就是json字符串  
    ![在这里插入图片描述][20190225202454158.png]  
    2）.如果服务器端返回json文本，客户端指定dataType为json时，此时$.ajax方法会自动将返回的字符串转换为json对象，即\{key:value,key2:value2\}，则客户端接收到的是json对象  
    ![在这里插入图片描述][2019022520252738.png]

**$.ajax方法是ajax交互的底层方法，它的配置参数比较多，可以根据实际情况作精简**  
1).如果不需要给服务器端发送请求参数，则data属性可以省略  
2).如果能保证服务器端不会出现程序错误，则error回调函数可以省略  
3).如果不需要在服务器处理完成后进行任何处理，则complete函数可以省略

**4.3 $.post方法完成用户名唯一性验证的案例**

1）页面上的注册表单的用户名输入框要添加onblur事件

***在函数checkUsername中发送异步请求***

//检测用户名是否唯一的函数
    		    function checkUsername(){
    		    	 //获取输入的用户名
    		     var uname=$("#uname").val();
    		      //发送异步请求
    		      $.post("user.action?method=checkname",
    		      {"name":uname},function(data){
    		    	   // console.log(data+",,,"+typeof data);//1或0,string类型
    		    	    if(data==1){
    		    	    	 //用户名已存在
    		    	    	 $('#msg').html("用户名已存在，请更
    		    	    	 换！").css("color","red");
    		    	    }else{
    		    	    	//用户名不存在
    		    	    	 $('#msg').html("√").css("color","green");
    		    	    }
    		      });   	 
    		    }

2）.创建userDao，添加根据用户名查找它对应的记录数的方法

@Override
    	public int queryByUsername(String username) {
        
    		// TODO Auto-generated method stub
    		String sql = "select count(user_id)  from  t_user where user_name=?";
    		int total = this.getTotal(sql, username);
    		return total;
    	}

3）创建UserService，添加一个获取用户名所对应的记录数的方法

@Override
    	public int getCountByUsername(String username) {
        
    		// TODO Auto-generated method stub
    		int total = dao.queryByUsername(username);
    		return total;
    	}

**4.4  . p o s t ( ) 和 .post()和 .post()和.get()**  
这两个方法都是ajax异步交互的高级方法，参数都是相同的  
![在这里插入图片描述][20190225202740435.png]  
这两个方法的缺点：只有服务器端处理成功的回调函数，没有处理失败的回调函数，如果需要指定失败时的回调函数，请调用\*\*$.ajax()\*\*  
**这两个方法默认返回的数据格式就是字符串，即type的默认值text；如果服务器端返回json文本，客户端要将json文本转换为json对象，就必须指定type为json**

//发送GET异步请求
    		    $.get("user.action?method=m2",function(data){
    		    	  console.log(data.userid+"..."+data.username);
    		    },"json");

[20190225202329922.png]: /images/20220316/618bc97b25824a60b25efd7d85bd8999.png
[20190225202454158.png]: /images/20220316/f4e5c2b9b6a3484f9b85aad0dee7884e.png
[2019022520252738.png]: /images/20220316/26c03ac110274a678a2ee2bd581c4c3c.png
[20190225202740435.png]: /images/20220316/d1b3e4c7b9924e91ad55a5bad9c20bbb.png