后端开发基础-Ajax学习-004——基于jQuery的Ajax使用

jQuery中Ajax的使用方式

 我们使用jQuery重写之前ajax案例来演示本案例：

演示案例 

演示工程目录结构

需要引入 jquery-1.11.1.js脚本 

 pom.xml

  4.0.0
  com.study
  ajaxcase-day02
  0.0.1-SNAPSHOT
  war
  
  	
  		net.sf.json-lib
  		json-lib
  		2.2.3
  		jdk15
  	
  

web.xml

  ajaxcase-day02
  
    index.html
    index.htm
    index.jsp
    default.html
    default.htm
    default.jsp
  
  
  
  	helloservlet
  	
  		com.servlet.HelloServlet
  	
  
  
  
  	helloservlet
  	/hello.do
  
  
  
  	checkservlet
  	
  	com.servlet.CheckServlet
  	
  
  
  	checkservlet
  	/check.do
  
  
  
  	loadcityservlet
  	
  	com.servlet.LoadCityServlet
  	
  
  
  	loadcityservlet
  	/loadcities.do
  
  

City.java

package com.entity;

import java.io.Serializable;

public class City implements Serializable{
	private int id;
	private String name;
	//带参数构造器
	public City(int id, String name) {
		super();
		this.id = id;
		this.name = name;
	}
	
//	public int getNumber(){
//		return 1000;
//	}
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

HelloServlet.java

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;

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

public class HelloServlet extends HttpServlet{

	@Override
	protected void service(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
			
			System.out.println("进入HelloServlet...");
			//响应输出一个text字符串信息
			PrintWriter out = response.getWriter();
			out.print("Hello Ajax");
			out.close();
	}

	
}

CheckServlet.java

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;

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

public class CheckServlet extends HttpServlet{

	@Override
	protected void service(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
			//获取请求参数name值
			request.setCharacterEncoding("utf-8");
			String name = request.getParameter("name");
			System.out.println("用户输入："+name);
			//模拟延迟
			try {
				Thread.sleep(3000);
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
			//判断name值
			response.setContentType("text/html;charset=utf-8");
			PrintWriter out = response.getWriter();
			if("scott".equals(name)){
				out.print("用户名被占用");
			}else{
				out.print("用户名可用");
			}
			out.close();
	}

	
}

LoadCityServlet.java

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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

import com.entity.City;

import net.sf.json.JSONArray;

public class LoadCityServlet extends HttpServlet{

	@Override
	protected void service(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
			System.out.println("进入LoadCityServlet...");
			response.setContentType("text/html;charset=utf-8");
			PrintWriter out = response.getWriter();
			
			//out.print("1:北京;2:上海;3:深圳");//【1】
			//[{"id":1,"name":"北京"},{"id":2,"name":"上海"},{"id":3,"name":"天津"}]
//			String data = 
//			"[{\"id\":1,\"name\":\"北京\"},"
//		   + "{\"id\":2,\"name\":\"上海\"},"
//		   + "{\"id\":3,\"name\":\"天津\"}]";//【2】
//			System.err.println(data);
//			out.print(data);
			
			//获取数据
			List list = getCities();
			//将数据转成JSON字符串
			JSONArray jsonObj = JSONArray.fromObject(list);
			System.out.println(jsonObj);//控制台显示
			out.print(jsonObj.toString());//给Ajax对象返回.【3】
			out.close();
	}

	private List getCities() {
		
		List list = new ArrayList();
		City c1  = new City(1,"北京");
		City c2  = new City(2,"上海");
		City c3  = new City(3,"广州");
		City c4  = new City(4,"深圳");
		list.add(c1);
		list.add(c2);
		list.add(c3);
		list.add(c4);
		return list;
	}
	
	

}

 demo4.html

	
		
		
		
		
		
		
	
	
		
		

		
		用户名：
		
	
	

demo5.html

启动Tomcat 运行 ajaxcase-day02工程， 录入请求http://localhost:8088/ajaxcase-day02/demo4.html

启动Tomcat 运行 ajaxcase-day02工程， 录入请求http://localhost:8088/ajaxcase-day02/demo5.html