1、ajax是什么?
asynchronous javascript and xml:异步的javascript和xml。是一种用来改善用户体验的技术,其本质是利用浏览器内置的一种特殊的对象(XMLHttpRequest)异步
(即发送请求时,浏览器不会销毁当前页面,用户可以继续在当前页面做其它的操作)的向服务器发送请求,并且利用服务器返回的数据(不再是一个完整的页面,只是部分的数据,一般使用文本或者xml返回)来部分更新当前页面。使用ajax技术之后,页面无刷新,并且不打断用户的操作。
2、ajax对象
b, responseText: 获得服务器返回的文本
c, responseXML:获得服务器返回的xml数据
d, status:获得状态码
e, readyState:ajax对象在与服务器进行通讯时,
通过readyState属性值可以获取该对象的通讯的状态,其属性有5个(0,1,2,3,4),当属性值为4时,表示ajax对象已经获得了服务器返回的所有的数据。
(3)ajax编程的基本步骤
step1, 先获得ajax对象
var xhr = getXhr();
step2, 发送请求
xhr.open(请求方式,请求地址,异步还是同步);
请求方式: get/post
请求地址:如果是get请求,请求参数要添加到请求地址的后面。true表示异步请求 :ajax对象发请求的同时,用户可以对当前页面做其它的操作。false表示同步请求:ajax对象发请求的同时,浏览器会锁订当前页面,用户需要等待处理完成之后才能做下一步操作。
方式一:get请求
xhr.open('post');
step3,编写服务器端的代码,服务器端一般不需要返回完整的页面,只需要返回部分的数据,比如一个简单的字符串。
step4, 编写监听器
一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null。例如 :
例如:
step4,web.xml配置
asynchronous javascript and xml:异步的javascript和xml。是一种用来改善用户体验的技术,其本质是利用浏览器内置的一种特殊的对象(XMLHttpRequest)异步
(即发送请求时,浏览器不会销毁当前页面,用户可以继续在当前页面做其它的操作)的向服务器发送请求,并且利用服务器返回的数据(不再是一个完整的页面,只是部分的数据,一般使用文本或者xml返回)来部分更新当前页面。使用ajax技术之后,页面无刷新,并且不打断用户的操作。
2、ajax对象
(1)如何获得ajax对象?XMLHttpRequest并没有标准化,要区分浏览器:
function getXhr(){
var xhr;
if(window.XMLHttpRequest){
//非ie浏览器
xhr = new XMLHttpRequest();
}else{
//ie
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
}
(2)ajax对象的属性
a, onreadystatechange : 绑订一个事件处理函数(注册监听器),当ajax对象的readyState值发生了改变(比如,从0-->1),就会产生readystatechange事件。
b, responseText: 获得服务器返回的文本
c, responseXML:获得服务器返回的xml数据
d, status:获得状态码
e, readyState:ajax对象在与服务器进行通讯时,
通过readyState属性值可以获取该对象的通讯的状态,其属性有5个(0,1,2,3,4),当属性值为4时,表示ajax对象已经获得了服务器返回的所有的数据。
(3)ajax编程的基本步骤
step1, 先获得ajax对象
var xhr = getXhr();
step2, 发送请求
xhr.open(请求方式,请求地址,异步还是同步);
请求方式: get/post
请求地址:如果是get请求,请求参数要添加到请求地址的后面。true表示异步请求 :ajax对象发请求的同时,用户可以对当前页面做其它的操作。false表示同步请求:ajax对象发请求的同时,浏览器会锁订当前页面,用户需要等待处理完成之后才能做下一步操作。
方式一:get请求
xhr.open('get',
'check_username.do?username=zs',true);
xhr.onreadystatechange=f1;
xhr.send(null);
方式二:post请求
xhr.open('post');
step3,编写服务器端的代码,服务器端一般不需要返回完整的页面,只需要返回部分的数据,比如一个简单的字符串。
step4, 编写监听器
function f1(){
if(xhr.readyState == 4){
//获得服务器返回的数据
var txt = xhr.responseText;
//dom操作
}
}
3,下面着重介绍一下Ajax中send方法的使用
Ajax中send方法参数的使用一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null。例如 :
var url = "login.jsp?user=XXX&pwd=XXX";
xmlHttpRequest.open("GET",url,true);
xmlHttpRequset.send(null);
此外,也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法,需要设定Content-Type头信息,模拟HTTP POST方法发送一个表单,这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。
例如:
xmlHttpRequest.open("POST","login.jsp",true);
xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttpRequest.send("user="+username+"&pwd="+password);
需要注意的是根据提交方式的不同,两种提交方式分别调用后台的doGet方法和doPost方法。
4,下面是我写的一个验证用户合法性的ajax:
step1,生成验证码图片的servlet
import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;
public class CheckcodeServlet extends HttpServlet {
public void service(HttpServletRequest request,
HttpServletResponse response)throws ServletException,
IOException{
System.out.println("service...");
/*设置服务器返回文件的格式为jpg格式的图片
* 常见的还有text/html和text/xml
* */
response.setContentType("image/jpeg");
/*画图*/
//BufferedImage内存映像对象
BufferedImage image=new BufferedImage(60,20,BufferedImage.TYPE_INT_RGB);
Random r=new Random();
//获得画笔
Graphics g=image.getGraphics();
//设置背景颜色
g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)));
//填充背景颜色
g.fillRect(0,0,60,20);
//设置前景颜色
g.setColor(new Color(0,0,0));
//划线,起到干扰识别的作用
g.drawLine(r.nextInt(60), r.nextInt(20),
r.nextInt(60), r.nextInt(20));
g.drawLine(r.nextInt(60), r.nextInt(20),
r.nextInt(60), r.nextInt(20));
g.drawLine(r.nextInt(60), r.nextInt(20),
r.nextInt(60), r.nextInt(20));
//生成随机数
String number=String.valueOf(r.nextInt(99999));
//注意,给用户看的是图片+验证数字,放入Session对象的是验证 数字
HttpSession session=request.getSession();
session.setAttribute("number", number);
System.out.println(number);
//滑到图片上
g.drawString(number, 5, 15);
/*压缩图片并输出
* 获得字节输出流,因为要输出的是图像压缩之后的字节数组,所以不能用PrintWriter*/
OutputStream os=response.getOutputStream();
//将图片压缩输出
JPEGImageEncoder encoder=JPEGCodec.createJPEGEncoder(os);
encoder.encode(image);
}
}
step2,写ActionServlet
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;
import javax.servlet.http.HttpSession;
public class ActionServlet extends HttpServlet {
@SuppressWarnings("unused")
public void service(HttpServletRequest request,HttpServletResponse
response)throws ServletException,IOException{
String uri=request.getRequestURI();
String path=uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
response.setContentType("text/html;charset=utf-8");
//在服务器端,需要使用request.setCharacterEncoding("utf-8")去解码
request.setCharacterEncoding("utf-8");
PrintWriter out=response.getWriter();
if(path.equals("/check_username")){
if(1==2){
throw new ServletException("some error");
}
//模拟网络延迟
try{
Thread.sleep(5000);
}catch(InterruptedException e){
e.printStackTrace();
}
String username=request.getParameter("username");
System.out.println("username:"+username);
if(username.equals("张")){
out.println("用户名被占用");
}
else{
out.println("可以使用");
}
}
else if(path.equals("/check")){
String number1 = request.getParameter("number");
// session中绑定的验证码
HttpSession session = request.getSession();
String number2 = (String) session.getAttribute("number");
// 用于测试
System.out.println("number1:" + number1);
System.out.println("number2:" + number2);
// 当用户禁用cookie,session将失效number2为null
if (number2 != null && number2.equals(number1)) {
out.println("验证码正确");
}
else{
out.println("验证码错误,请重新输入");
}
}
out.close();
}
}
step3,写jsp页面:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<script type="text/javascript" src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
function getXmlHttpRequest() {
var xhr = null;
if ((typeof XMLHttpRequest) != 'undefined') {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
function check_username() {
//step1 获得XmlHttpRequest对象
var xhr = getXmlHttpRequest();
//step2 发送请求
xhr.open('get', 'check_username.do?username=' + $F('username'), true);
xhr.onreadystatechange = function() {
//step4获取服务器返回的数据,更新页面
if (xhr.readyState == 4) {
var txt = xhr.responseText;
$('username_msg').innerHTML = txt;
} else {
$('username_msg').innerHTML = '正在验证。。。';
}
};
xhr.send(null);
}
function check_username2() {
//获得XmlHttpRequest对象
var xhr = getXmlHttpRequest();
//发送请求
var uri = 'check_username.do?username=' + $F('username');
xhr.open('get', encodeURI(uri), true);
//xhr.open('post', 'check_username.do', true);
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
//获取服务器返回的数据,更新页面
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var txt = xhr.responseText;
$('username_msg').innerHTML = txt;
} else {
$('username_msg').innerHTML = '系统错误';
}
} else {
$('username_msg').innerHTML = '正在验证。。。';
}
};
xhr.send('username=' + $F('username'));
}
function check_number(){
//获得XmlHttpRequest对象
var xhr = getXmlHttpRequest();
//发送请求
var uri = 'check.do?number=' + $F('number');
xhr.open('get', encodeURI(uri), true);
//xhr.open('post', 'check_username.do', true);
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
//获取服务器返回的数据,更新页面
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var txt = xhr.responseText;
$('number_msg').innerHTML = txt;
} else {
$('number_msg').innerHTML = '系统错误';
}
} else {
$('number_msg').innerHTML = '正在验证。。。';
}
};
xhr.send('number=' + $F('number'));
}
</script>
</head>
<body>
<form action="check.do" method="post">
<fieldset>
<legend>注册</legend>
用户名:<input id="username" name="username" οnblur="check_username2();" />
<span style="color:red;" id="username_msg"></span> <br /> 密码:<input
type="password" name="pwd" /><br /> 验证码:<input name="number"
id="number" οnblur="check_number();" /> <span style="color:red;"
id="number_msg"></span> <br /> <img src="checkcode" id="img1" /> <a
href="javascript:;"
οnclick="$('img1').src='checkcode?' + Math.random();">看不清,换一个</a><br />
<input type="submit" value="确定" />
</fieldset>
</form>
</body>
</html>
step4,web.xml配置