您的位置：首页 > 其它

Ajax要点及实例

2017-05-30 15:28 316 查看
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的状态信息 

就绪状态码说 明
0XMLHttpRequest对象没有完成初始化

即：刚刚创建。
1XMLHttpRequest对象开始发送请求

调用了open方法，但还没有调用send方法。请求还没有发出
2XMLHttpRequest对象的请求发送完成

send方法已经调用，数据已经提交到服务器，但没有任何响应
3XMLHttpRequest对象开始读取响应，还没有结束

收到了所有的响应消息头，但正文还没有完全收到
4XMLHttpRequest对象读取响应结束

一切都收到了
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 {
90d3
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);
}

}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航