Ajax:
ajax,不是一个新的技术,是用于实现网页的异步请求和局部刷新,减轻服务器的压力,提高用户的体验
在一个网页上,可能需要实现这样一个功能效果,当某个地方的数据不正确的时候只是局部刷新该地方的数据,其他的地方
的功能数据不改变,这就是异步请求的效果
实现ajax需要的步骤:
①创建一个ajax对象,不是现代浏览器的AJAX对象需要创建的是ActiveXObject类;而现代浏览器创建的是XMLHttpRequest对象
②打开连接;请求的方式和请求的路径,open(method,url)
③发送请求正文:send();如果请求的方式是GET,则参数为null,参数为POST,参数为所需要带的数据的键值对,同时还需要
设置请求头setRequestHeader("content-type","application/x-www-form/data")
④监听服务器响应的数据:onreadystatechange(readyState == 4 && status == 200)
使用get的方式来实现ajax的异步
使用post的方式来使用ajax的异步
readyState:
在服务器接收请求的状态中:
ajax.readyState==0:表示Ajax异步对象已经创建好,但是还没有调用open()方法
ajax.readyState==1: 表示Ajax异步对象已经调用open()方法,但是还没有调用send()方法
ajax.readyState==2:表示Ajax异步对象已经调用send()方法,但是请求还没有到达服务器
ajax.readyState==3:表示服务端已经接收到Ajax异步对象的请求,正在处理响应中
ajax.readyState==4:表示Ajax异步对象已经完全接收到了响应信息
ajax,不是一个新的技术,是用于实现网页的异步请求和局部刷新,减轻服务器的压力,提高用户的体验
在一个网页上,可能需要实现这样一个功能效果,当某个地方的数据不正确的时候只是局部刷新该地方的数据,其他的地方
的功能数据不改变,这就是异步请求的效果
实现ajax需要的步骤:
①创建一个ajax对象,不是现代浏览器的AJAX对象需要创建的是ActiveXObject类;而现代浏览器创建的是XMLHttpRequest对象
②打开连接;请求的方式和请求的路径,open(method,url)
③发送请求正文:send();如果请求的方式是GET,则参数为null,参数为POST,参数为所需要带的数据的键值对,同时还需要
设置请求头setRequestHeader("content-type","application/x-www-form/data")
④监听服务器响应的数据:onreadystatechange(readyState == 4 && status == 200)
使用get的方式来实现ajax的异步
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'user.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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
window.onload = function(){
document.getElementById("username").onblur = function(){
//使用get的方式进行ajax
//1、创建一个ajax对象
var ajax;
try{
ajax = new XMLHttpRequest();
}catch(e){
ajax = new ActiveXObject();
};
//2、调用回调函数
ajax.onreadystatechange = function(){
if(ajax.readyState==4 && ajax.status==200){
var result = ajax.responseText;
if(result=="1"){
document.getElementById("span1").innerHTML = "该名字已被注册";
}else{
document.getElementById("span1").innerHTML = "该名字可以注册";
}
}
};
//3、调用open方法
var url = "<c:url value='/CheckName' />";
ajax.open("GET",url+"?name="+this.value );
//4、调用send方法
ajax.send(null);
};
};
</script>
</head>
<body>
用户名:<input type="text" name="username" id="username" /><span id="span1"></span><br />
密码:<input type="password" name="password" />
</body>
</html>
使用post的方式来使用ajax的异步
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'user.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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
window.onload = function(){
document.getElementById("username").onblur = function(){
//使用post的方式进行ajax
//1、创建一个ajax对象
var ajax;
try{
ajax = new XMLHttpRequest();
}catch(e){
ajax = new ActiveXObject();
};
//2、调用回调函数
ajax.onreadystatechange = function(){
if(ajax.readyState==4 && ajax.status==200){
var result = ajax.responseText;
if(result=="1"){
document.getElementById("span1").innerHTML = "该名字已被注册";
}else{
document.getElementById("span1").innerHTML = "该名字可以注册";
}
}
};
//3、调用open方法
var url = "<c:url value='/CheckName' />";
ajax.open("POST",url);
//还要设置一个请求头
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//4、调用send方法
ajax.send("name="+this.value);
};
};
</script>
</head>
<body>
用户名:<input type="text" name="name" id="username" /><span id="span1"></span><br />
密码:<input type="password" name="password" />
</body>
</html>
readyState:
在服务器接收请求的状态中:
ajax.readyState==0:表示Ajax异步对象已经创建好,但是还没有调用open()方法
ajax.readyState==1: 表示Ajax异步对象已经调用open()方法,但是还没有调用send()方法
ajax.readyState==2:表示Ajax异步对象已经调用send()方法,但是请求还没有到达服务器
ajax.readyState==3:表示服务端已经接收到Ajax异步对象的请求,正在处理响应中
ajax.readyState==4:表示Ajax异步对象已经完全接收到了响应信息