Ajax技术简单案例

ajax
由XML和javascript结合的产物。

XMLHttPRequest对象
用法：
分为四步：
第一步：怎么发出XMLHttPRequest
浏览器支持这样的对象
IE浏览器以ActiveX提供了XMLHttPRequest对象，IE不需要创建该对象，其他浏览器需要用户自己创建该对象

第二步：回调函数——>处理服务器传回的资料
1.request目前的状态。
xmlHTTPRequest.readyState == 4代表服务器已经传回信息，开始解析信息
if(xmlHTTPRequest.readyState == 4){
//ok,可以解析信息
}else{
还没完成
}

readState有如下4个值：
0.还没开始
1.读取中
2.已读取
3.信息交换中
4.一切完成

2.status是检查的http协议状态：只要看200
if(xmlHttpRequest.status == 200){
//正常
}else{
//异常
}

第三步：呼叫服务
open("1"，"2","3")//1、请求类型（GET/POST）2、路径url 3、交互类型（false同步，true异步）

第四步：发送请求到服务器

范例：

1、编写index.jsp，页面展示一个用户名文本框，密码文本框，并添加相应的函数

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<Meta http-equiv="pragma" content="no-cache">
<Meta http-equiv="cache-control" content="no-cache">
<Meta http-equiv="expires" content="0">
<Meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<Meta http-equiv="description" content="This is my page">

</head>
<script type="text/javascript">
var xmlHttpRequest;

//创建XMLHTTPRequest对象
function createXMLHttPRequest(){
if(window.ActiveXObject){//IE
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
}

//回调函数
function callBack(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
var result = xmlHttpRequest.responseText;//常见的有xml/json/text/html
if(result == "false"){
document.getElementById("resultDiv").innerHTML="<font color='red'>对不起，该用户名已经存在！</font>";
}else{
document.getElementById("resultDiv").innerHTML="<font color='green'>恭喜，该用户名可以使用！</font>";
}
}
}

function checkUser(){
var name = document.getElementById("username").value;
var url = "username?username="+name;
//1.创建XMLHTTPRequest对象
xmlHttpRequest = createXMLHttPRequest();
//2.注册回调函数
xmlHttpRequest.onreadystatechange = callBack;
//3.初始化XMLhttpRequest对象
xmlHttpRequest.open("GET",url,true);
//4.发送请求
xmlHttpRequest.send(null);
}
</script>
<body>
<form action="userid" method="post">
<table border="0"></table>
<tr>
<td>用户名：</td>
<td><input type="text" id="username" name="username"
onblur="checkUser()" />
</td>
<td>
<div id="resultDiv" style="font-size:12;"></div>
</td>
</tr>
<tr>
<td>密    码：</td>
<td><input type="password" name="password" /></td>
<td> </td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提交">
</td>
</tr>
</form>
</body>
</html>

2、编写RegistServlet作为后台处理逻辑

package com.zgy.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 RegistServlet extends HttpServlet {

/**
* Constructor of the object.
*/
public RegistServlet() {
super();
}

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

public void doPost(HttpServletRequest request,IOException {
response.setContentType("text/html;charser=utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String user = request.getParameter("username");

System.out.println("user:"+user);
if("".equals(user) || user == null){
out.write("false");
}else if("zgy".equals(user)){
out.write("false");
}else{
out.write("true");
}
}

3、在web.xml中配置RegisServlet

package com.zgy.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 RegistServlet extends HttpServlet {

/**
* Constructor of the object.
*/
public RegistServlet() {
super();
}

public void doGet(HttpServletRequest request,IOException {
response.setContentType("text/html;charser=utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String user = request.getParameter("username");

System.out.println("user:"+user);
if("".equals(user) || user == null){
out.write("false");
}else if("zgy".equals(user)){
out.write("false");
}else{
out.write("true");
}
}

}

结果：用户名文本框实现ajax异步交互，输入非zgy的用户名，鼠标移除后，提示“恭喜，该用户名可以使用！”。输入“zgy”光标移除后提示“对不起，该用户名已经存在！”

Ajax技术简单案例

猜你在找的Ajax相关文章