Ajax框架的实现

最新推荐文章于 2023-12-07 21:39:01 发布

linsa_pursuer

最新推荐文章于 2023-12-07 21:39:01 发布

阅读量413

点赞数

分类专栏： SpringMVC基础文章标签： ajax

本文链接：https://blog.csdn.net/linsa_pursuer/article/details/79117893

版权

SpringMVC基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一.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配置文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
  <display-name>DAY09-01-Ajax-Suggest</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <description></description>
    <display-name>QueryCityServlet</display-name>
    <servlet-name>QueryCityServlet</servlet-name>
    <servlet-class>cn.tedu.ajax.servlet.QueryCityServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>QueryCityServlet</servlet-name>
    <url-pattern>/query.do</url-pattern>
  </servlet-mapping>
</web-app>

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文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript">
	function $(id){
		return document.getElementById(id);
	}
	function showSuggest(keyword){
		//测试获取输入框中的内容
		//alert(keyword)
		
		// 判断关键字是否为空
		if (keyword.length == 0) {
			$("suggestResult").innerHTML = "";
			return;
		}
		
		//异步请求对象： XMLHttpRequest
		var xmlhttp = getXMLHttpRequest();
		//请求URL
		var url = "query.do?keyword="+keyword;
		
		//设计： 得到响应结果后如何显示
		//on ready state change
		xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				//测试
				//alert(xmlhttp.responseText);
				$("suggestRusult").innerHTML = xmlhttp.responseText;
			}
		}
		//发出请求
		xmlhttp.open("GET",url,true);
		xmlhttp.send();
	}
	
	function getXMLHttpRequest(){
		var xmlhttp = null;
		if(window.XMLHttpRequest){
			//适用于IE 7+、Chrome、Firefox、Safari、Opera......
			xmlhttp = new XMLHttpRequest();
		}else{
			//适用于IE 5、IE 6
			xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
		}
		return xmlhttp;
	}
</script>
</head>
<body>
	<p><input type="text" οnkeyup="showSuggest(this.value)"/></p>
	<p><span id="suggestRusult"></span></p>
</body>
</html>

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

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
  <display-name>DAY09-02-Ajax-Login</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <description></description>
    <display-name>LoginServlet</display-name>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>cn.tedu.ajax.servlet.LoginServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/handleLogin.do</url-pattern>
  </servlet-mapping>
</web-app>

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文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<script type="text/javascript">
	function $(id){
		return document.getElementById(id);
	}
	function doLogin(){
		// 0. 清除可能的错误提示
		$("err_user").innerHTML = "";
		$("err_pwd").innerHTML = "";
		
		//1.获取输入框中的数据
		var u = $("user").value;
		var p = $("pwd").value;
		
		//2.验证数据的有效性（可选）
		
		//3.获取请求对象
		var xmlhttp = getXMLHttpRequest();
		
		//4.配置请求对象的onreadystatechange
		xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				//测试
				//alert(xmlhttp.responseText);
				var text = xmlhttp.responseText;
				if("ok" == text){
					window.location = "user_center.html";
				}else if("Username not exists" == text){
					$("err_user").innerHTML = text;
				}else{
					$("err_pwd").innerHTML = text;
				}
			}
		}
		
		//5.提交请求
		var url = "handleLogin.do";
		var params = "username=" + u + "&password=" +p;
		
		xmlhttp.open("POST",url,true);
		xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xmlhttp.send(params);
	}
	function getXMLHttpRequest(){
		var xmlhttp = null;
		if(window.XMLHttpRequest){
			//适用于IE 7+、Chrome、Firefox、Safari、Opera......
			xmlhttp = new XMLHttpRequest();
		}else{
			//适用于IE 5、IE 6
			xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
		}
		return xmlhttp;
	}
</script>
</head>
<body>
	<p><label>Username</label><input id="user" name="username" type="text"/><span id="err_user"></span></p>
	<p><label>Password</label><input id="pwd" name="password" type="password"/><span id="err_pwd"></span></p>
	<p><span id="result"></span></p>
	<p><input type="button" οnclick="doLogin();" value="保存" /></p>
</body>
</html>

linsa_pursuer

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax框架的实现

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

扫一扫