Ajax的使用

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX使用流程

• 创建XmlHttpRequest对象

            var xmlhttp;
			if(window.XMLHttpRequest){
				//如果是新版本浏览器
				xmlhttp=new XMLHttpRequest();
			}else{
				//如果是古老的版本:IE5,IE6...
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}

• 发送Ajax请求

1. 创建请求：xmlhttp.open();
2. 发送请求：xmlhttp.send();

xmlhttp.open("GET","/ajax/content",true);//第三个参数设置同步或异步
xmlhttp.send();

• 处理服务器响应

1. xmlhttp.onreadystatechange() 事件用于监听AJAX的执行过程
2. xmlhttp.readyState属性说明XMLHttpRequest当前状态
3. xmlhttp.status属性服务器响应状态码

xmlhttp.onreadystatechange=function(){
				//响应已被接收且服务器处理成功时才执行
				if(xmlhttp.readyState==4&&xmlhttp.status==200){
					//获取响应体文本
					var responseText=xmlhttp.responseText;
					//对服务器结果进行处理
					document.getElementById("divContent").innerHTML=responseText;
				}
			}

 ContentServlet.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().println("hello,I'am content");
	}

index.html

    

---

Ajax实现新闻列表

News.java

package com.ulikeme.ajax;

public class News {
	private String title;
	private String date;
	private String source;
	private String content;
	public News() {
		
	}
	
	public News(String title, String date, String source, String content) {
		super();
		this.title = title;
		this.date = date;
		this.source = source;
		this.content = content;
	}


	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getDate() {
		return date;
	}
	public void setDate(String date) {
		this.date = date;
	}
	public String getSource() {
		return source;
	}
	public void setSource(String source) {
		this.source = source;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
	
}

NewsListServlet.java

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		List list=new ArrayList();
		list.add(new News("天气预报1","2021-01-21","北京","会下雨...."));
		list.add(new News("天气预报2","2021-01-22","北京","会下雨...."));
		list.add(new News("天气预报3","2021-01-23","北京","会下雨...."));
		list.add(new News("天气预报4","2021-01-24","北京","会下雨...."));
		list.add(new News("天气预报5","2021-01-25","北京","会下雨...."));
		String json= JSON.toJSONString(list);
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().println(json);
	}

news.html

效果：

---

Ajax的同步和异步 

同步请求即是当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码，相当于是排队，前一个人办理完自己的事务，下一个人才能接着办。

 异步请求就当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。

JQuery对Ajax的支持

---

实现二级联动菜单

Channel.java

package com.ulikeme.ajax;

public class Channel {
	private String code;
	private String name;
	public Channel() {
		
	}
	public Channel(String code, String name) {
		super();
		this.code = code;
		this.name = name;
	}
	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	
}

ChannelServlet.java

/**
 * Servlet implementation class ChannelServlet
 */
@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ChannelServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String level=request.getParameter("level");
		String parent=request.getParameter("parent");
		List chlist=new ArrayList();
		if(level.equals("1")) { //一级频道
			chlist.add(new Channel("php","世界上最好的语言"));
			chlist.add(new Channel("java","世界最热门语言"));
		}else if(level.equals("2")) {
			if(parent.equals("php")) {
				chlist.add(new Channel("php入门","php编程入门"));
				chlist.add(new Channel("php基础","php编程基础"));
				chlist.add(new Channel("php高级","php高级编程"));
			}else if(parent.equals("java")) {
				chlist.add(new Channel("java入门","java编程入门"));
				chlist.add(new Channel("java基础","java编程基础"));
				chlist.add(new Channel("java高级","java高级编程"));
			}
		}
		
		String json=JSON.toJSONString(chlist);
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().println(json);
	}


}

cascade_meun.html

	
		请选择
	

	
		请选择