Ajax框架的实现

一.Ajax
1.Asynchronous Javascript And XML：异步的Javascript与XML
异步的：非同步的
2.Ajax是一种用来改善用户体验的技术，其实质是，
使用XMLHttpRequest对象异步的向服务器发请求
3.服务器返回部分数据，而不是一个完整的页面，
以页面无刷新的效果更改页面中的局部内容

二.在XMLHttpRequest中的5个属性
1.onreadystatechange：处理函数，即请求发出后，哪个函数对后续的操作进行处理，该属性的值应该是一个函数。
2.readyState：状态，该属性的值为0~4之间的数值，即共5种状态：
（1）0[不关心]：连接尚未初始化
（2）1[不关心]：初始化连接
（3）2[不关心]：发出请求
（4）3[不关心]：服务器已经接收到请求
（5）4：响应已经就绪
3.status：响应码，例如200表示正确的响应
4.responseText：响应的正文（字符串）
5.responseXML：响应的XML，该属性和responseText选取其中一个来使用即可，取决于服务器响应的正文到底是字符串还是XML格式
6.发送请求
（1）发送请求需要调用open()和send()这2个函数
（2）POST请求需发送参数

三.根据首字母查找城市案例——GET请求方式
配置Tomcat访问项目名后跟index.html来访问文件

1.web.xml配置文件

  DAY09-01-Ajax-Suggest
  
    index.html
    index.htm
    index.jsp
    default.html
    default.htm
    default.jsp
  
  
    
    QueryCityServlet
    QueryCityServlet
    cn.tedu.ajax.servlet.QueryCityServlet
  
  
    QueryCityServlet
    /query.do
  

2.Servlet类

package cn.tedu.ajax.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 QueryCityServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//1.获取请求参数： 关键字
		String keyword = request.getParameter("keyword");
		
		//2.调用query()方法，获取关键字对应的结果
		String result = query(keyword);
		
		//3.获取输出流，向客户端输出结果
		PrintWriter out = response.getWriter();
		out.println(result);
		out.flush();
		out.close();
	}
	
	public String query(String keyword) {
		String[] cities = "BeiJing,ShangHai,GuangZhou,ShenZhen,TianJin,NanJing,ChangSha,ChengDu".split(",");
		StringBuffer result = new StringBuffer();
		
		for (int i = 0; i < cities.length; i++) {
			if (cities[i].startsWith(keyword)) {
				if (result.length()>0) {
					result.append(", ");
				}
				result.append(cities[i]);
			}
		}
		return result.toString();
	}

}

3.webapp下index.html文件

四.检验登录案例——POST请求方式
配置Tomcat访问项目名后跟index.html来访问文件
1.web.xml配置文件

  DAY09-02-Ajax-Login
  
    index.html
    index.htm
    index.jsp
    default.html
    default.htm
    default.jsp
  
  
    
    LoginServlet
    LoginServlet
    cn.tedu.ajax.servlet.LoginServlet
  
  
    LoginServlet
    /handleLogin.do
  

2.Servlet类

package cn.tedu.ajax.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;

/**
 * Servlet implementation class LoginServlet
 */
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		String result = handleLogin(username,password);
		
		PrintWriter out = response.getWriter();
		out.print(result);
		out.flush();
		out.close();
	}
	public String handleLogin(String username,String password) {
		String[] names = "linsa,rose,lily,yaya,feifei,kiki,lala,xixi".split(",");
		String[] pwds = "123,123,123,123,123,123,123,123".split(",");
		StringBuffer result = new StringBuffer();
		
		for (int i = 0; i < names.length; i++) {
			if (names[i].equals(username)) {
				if (pwds[i].equals(password)) {
					result.append("ok");
				} else {
					result.append("Password not match");
				}
			}
		}
		if (result.length()==0) {
			result.append("Username not exists");
		}
		return result.toString();
	}

}

3.webapp下index.html文件

	
Username
	
Password