Ajax要点及实例

最新推荐文章于 2022-12-09 17:05:52 发布

GRAY_KEY

最新推荐文章于 2022-12-09 17:05:52 发布

阅读量739

点赞数

分类专栏： Java 文章标签： ajax 异步 xmlhttprequest javascript 实例

本文链接：https://blog.csdn.net/GRAY_KEY/article/details/72810091

版权

Java 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

 
 1.Ajax简介 

  Ajax：（Asynchronous JavaScript And XML）指 
 异步 JavaScript 及 XML不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是 
 基于 
 JavaScript、XML、HTML、CSS新用法。 

 
 Ajax：只刷新局部页面的技术 

  JavaScript：更新局部的网页。 

  XML：一般用于请求数据和响应数据的封装。 

 
 XMLHttpRequest对象：发送请求到服务器并获得返回结果。 

  CSS：美化页面样式。 

  异步：发送请求后不等返回结果，由 
 回调函数处理结果。 

 
 2.Ajax的要点 

 
 JavaScript中 
 XMLHttpRequest对象 
 是整个 
 Ajax技术的核心 
 ，它提供了 
 异步发送请求 
 的能力。 

 
 Ajax的缺点： 
 不同浏览器 
 ，甚至相同浏览器的 
 不同版本 
 ，获取 
 XMLHttpRequest对象 
 的方式是不同的。 

  var xhr; 

  if (window.XMLHttpRequest) { 
 // code for IE7+, Firefox, Chrome, Opera, Safari 

  xhr = new XMLHttpRequest(); 

  } else { 
 // code for IE6, IE5 

  xhr = new ActiveXObject("Microsoft.XMLHTTP"); 

}

 
 XMLHttpRequest对象的属性、方法及事件 

 
 1）属性 

  readyState：类型short；只读 ——XMLHttpRequest 
 的状态信息  

  status：类型short；只读 ——HTTP 
 的状态码 

         responseText：类型String；只读 —— 
 获得响应的文本内容 

         responseXML：类型Document；只读 —— 
 获得响应的XML 
 文档对象 documednt 

 
 readyState: XMLHttpRequest 
 的状态信息

就绪状态码	说明
0	XMLHttpRequest对象没有完成初始化即：刚刚创建。
1	XMLHttpRequest对象开始发送请求调用了open方法，但还没有调用send方法。请求还没有发出
2	XMLHttpRequest对象的请求发送完成 send方法已经调用，数据已经提交到服务器，但没有任何响应
3	XMLHttpRequest对象开始读取响应，还没有结束收到了所有的响应消息头，但正文还没有完全收到
4	XMLHttpRequest对象读取响应结束一切都收到了

 
  
 status 
 ： 
 HTTP 
 的状态码 

状态码	说明
200	服务器响应正常
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

 
 （注：就绪状态是4而且状态码是200，才可以处理服务器数据） 

 
 2）方法 

方法名	说明
open(method,URL,async)	建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET或POST URL参数指请求的地址 async参数指定是否使用异步请求，其值为true或false
send(content)	发送请求 content参数指定请求的参数
setRequestHeader(header,value)	设置请求的头信息

 
 3）事件 

  onreadystatechange：指定回调函数 

 
 3.使用Ajax验证用户名是否存在的实现步骤： 

  1）获取输入框对象 

  2）使用该对象的onBlur事件 

  3）创建XMLHttpRequest对象 

  4）通过 XMLHttpRequest对象设置请求信息（open） 

  5）向服务器发送请求（send） 

  6）创建回调函数，根据响应状态动态更新页面（onreadystatechange） 

 
 4.实例 

 
 1）新建一个.jsp文件 

 
 可能会遇到如上图中的报错，解决方法如下： 

 
 选中当前项目右键，点击Build Path，之后根据下图步骤操作即可。 

 
 至此，刷新当前项目后，报错消失。 

 
 2）jsp文件具体内容如下： 

 
 3）新建一个Servlet，具体内容如下： 

 
  详细代码如下： 
 

 
  logIn.jsp 
 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录界面</title>
<script type="text/javascript">
	window.onload = function() {
		var nameElement = document.getElementById("userName");
		nameElement.onblur = function() { //onblur 在对象失去焦点时发生（当鼠标离开input输入框时执行）
			var name = this.value; //this等价于nameElement
			//1.创建 XMLHttpRequest 对象
			var xhr;
			if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
				xhr = new XMLHttpRequest();
			} else {// code for IE6, IE5
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
			//4.处理响应结果
			/* 之所以将第4步写在2,3前面，是因为在第1步刚创建完 XMLHttpRequest对象时，
			该对象的 readyState属性就会随着客户端的一些请求处理而改变。	*/
			xhr.onreadystatechange = function() {
				//alert(xhr.readyState);	查看客户端发送状态
				if (xhr.readyState == 4) {
					//alert(xhr.status);	查看服务器端响应状态
					if (xhr.status == 200) { //200 代表服务器响应一切正常
						var msg = document.getElementById("msg");
						if (xhr.responseText == "true") {
							msg.innerHTML = "<font color='green'>用户名正确</font> "
						} else {
							msg.innerHTML = "<font color='red'>用户名错误，请重新输入</font>"
						}
					}
				}
			}
			//2.建立一个连接
			//xmlhttp.open(method, url, async, username, password)
			xhr.open("get","${pageContext.request.contextPath}/LogInServlet?name="+ name);
			//3.发送请求
			xhr.send(null);
		}
	}
</script>
</head>
<body>
	用户名：<input type="text" id="userName" />
	<span id="msg"></span>
	<br /> 
	密码：<input type="password" />
</body>
</html>

 
   LogInServlet.java 
  

package ajax.util;

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

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

@WebServlet("/LogInServlet")
public class LogInServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name = request.getParameter("name");
		PrintWriter out = response.getWriter();
		//如果用户名为graykey，返回true，否则，返回false。
		if("graykey".equals(name)){
			out.print(true);
		}else {
			out.print(false);
		}
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

GRAY_KEY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax要点及实例

1.Ajax简介Ajax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法。Ajax：只刷新局部页面的技术JavaScript：更新局部的网页。XML：一般用于请求
复制链接

扫一扫

专栏目录

就绪状态码	说明
0	XMLHttpRequest对象没有完成初始化即：刚刚创建。
1	XMLHttpRequest对象开始发送请求调用了open方法，但还没有调用send方法。请求还没有发出
2	XMLHttpRequest对象的请求发送完成 send方法已经调用，数据已经提交到服务器，但没有任何响应
3	XMLHttpRequest对象开始读取响应，还没有结束收到了所有的响应消息头，但正文还没有完全收到
4	XMLHttpRequest对象读取响应结束一切都收到了

Ajax要点及实例

“相关推荐”对你有帮助么？