JavaWeb学习——Ajax学习

什么是Ajax?

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。
不是一种新技术，是如下几种技术的组合应用：

• 基于web标准（standards-based presentation）XHTML+CSS的表示；
• 使用 DOM（Document Object Model）进行动态显示及交互；
• 使用 XML 和 XSLT 进行数据交换及相关操作；
• 使用 XMLHttpRequest 进行异步数据查询、检索；
• 使用 JavaScript 将所有的东西绑定在一起。

Ajax本质上是一个浏览器端的技术。

 

为什么学习Ajax?

• 通过异步模式，提升了用户体验
• 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
• 现在几乎所有的B/S软件项目都会增加Ajax，从而提高用户体验度。最典型的应用：Google  Maps!

创建ajax程序的基本流程

• 创建XMLHttpRequest对象
• 使用XMLHttpRequest对象创建请求
• 监视response的状态，写回调函数处理服务器返回的数据
• 使用XMLHttpRequest对象发送请求

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>




  
    
    
    
    
	
	
	    
	
	
	

  
  
  
  
  
  
  
  
  
    
    

  

package com.servlet;


import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServlet;

//在web3.0后不用配置web就可以直接利用注解来实在url=pattern
//@WebServlet("/ajax")  
public class myAjax extends HttpServlet {

    @Override
    public void service(ServletRequest req, ServletResponse resp)
            throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");

        //模拟数据获取阻塞
        try {
	    Thread.sleep(3000);
	} catch (InterruptedException e) {
	    e.printStackTrace();
	}
        resp.getWriter().write("执手相看泪眼，竟无语凝噎");
        
        
        
    }
}

Ajax的俩种传参方式

• Get方法
  • 直接通过url传参

  • 注意：get方式提交经常会遇到浏览器缓存问题，浏览器不对同样的url重复提交。这时可以在url后面增加参数：

    • ?rand = Math.random()   或者：rand = new Date()；

• Post方法

  • 需要设置参数解析格式

  • request.open(“post”,url);
    req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    req.send("a=3&b=中国");  

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    
    
      
        
        
        
        
    	
    	
    	    
    	
    	
    	
    
      
      
      
      
      
      
      
        
        
    
        
        
    
        
        
      
    
    

    package com.servlet;
    
    
    import java.io.IOException;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    //在web3.0后不用配置web就可以直接利用注解来实在url=pattern
    //@WebServlet("/ajax")  
    public class myAjax extends HttpServlet {
    
        @Override
        public void service(HttpServletRequest req, HttpServletResponse resp)
                throws ServletException, IOException {
    	req.setCharacterEncoding("utf-8");
            resp.setContentType("text/html;charset=utf-8");
    
            String name = req.getParameter("name");
            String password = req.getParameter("password");
            System.out.println(name+"---"+password+"---"+req.getMethod());
            
            resp.getWriter().write("执手相看泪眼，竟无语凝噎");
    
            
        }
    }
    

     

 

Ajax接受数据的几种方式

• 普通文本数据
  • req.responseText得到返回的文本数据
• XML数据（testxml.jsp）
  • 暂时没学习，先空着
  • 
• JSON（javascript object native）(重点)
  • 

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
    
    
    
    
	
	
	    
	
	
	

  
  
  
  
    
欢迎来到英雄商店
    

   	英雄名称:
   	
    

    
  

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        //请求编码格式
	req.setCharacterEncoding("utf-8");
	//响应编码格式
	resp.setCharacterEncoding("utf-8");
	resp.setContentType("text/html;charset=utf-8");
	//获取请求数据
	String heroname = req.getParameter("name");
	//处理请求数据
	Hero hero = null;
	
	HeroService hs = new HeroServiceImpl();
	hero =  hs.getHeroInfo(heroname);
	
	//响应处理结果
	resp.getWriter().write(new Gson().toJson(hero));

    }

我们在通过ajax实现一个检验用户名是否存在的功能

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
    
    
    
    
	
	
	    
	
	
	

  
  
  
    
    
    
  

package com.servlet;


import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.servlet.service.HeroService;
import com.servlet.service.impl.HeroServiceImpl;

public class CheckUsername extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        //请求编码格式
	req.setCharacterEncoding("utf-8");
	//响应编码格式
	resp.setContentType("text/html;charset=utf-8");
	//获取请求数据
	String uname = req.getParameter("uname");
	System.out.println(uname);
	//处理请求数据
		//获取业务层对象
		HeroService hs = new HeroServiceImpl();
		Boolean flag = hs.checkUsernameExist(uname);
	System.out.println(flag);
	String str = "";
	if(flag==true){
	    str = "true";
	}else
	    str = "false";
	    
	//返回处理数据结果
	resp.getWriter().write(str);
    }
}