前提:什么是Ajax?
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
Ajax的本质:
和刷新页面一样都是向服务器发送了一个http请求获得结果并进行显示(超链接或者提交表单),但不同的是ajax不需要刷新整个界面,只需要实现浏览器提供的接口创建一个XMLHttpRequest对象,使用现有标准的新方法即可实现向服务器发送http请求!使用Ajax只需要理清楚以下几点:
- 请求url(服务器端路径)
- 请求方法:get or post
- 请求数据(请求数据格式、数据是自定义还是通过JS界面获取)
- 响应数据返回(响应数据格式、如何接收并解析数据)
- 响应数据的显示(通过JS在html界面哪里显示)
1.入门程序:用户名校验
- 浏览器端: register.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=ISO-8859-1">
<title>Insert title here</title>
</head>
<script>
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
function showHint(str)
{
//1.创建xmlhttprequest对象
var request = ajaxFunction();
//判断输入是否为空
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
//4.获取响应数据
request.onreadystatechange=function()
{
//4.1添加监听
if (request.readyState==4 && request.status==200)
{
//4.2获取响应消息并显示在界面
document.getElementById("txtHint").innerHTML=request.responseText;
}
}
//2.设置请求:
/* 参数一:请求类型GET or POST
* 参数二:请求的路径
* 参数三:是否异步,一般true,表示发送后就不再去管而去做其他事
*/
request.open("POST","checkname.jsp?",true);
//2.1如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//3.发送请求:post请求需要在send方法里面写请求数据。
request.send("name="+str);
}
</script>
<body>
<h3>用户注册:</h3>
<form action="">
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p>
</body>
</html>
- 服务器端: checkname.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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%
String name = request.getParameter("name");
//模拟服务器端校验
if(name.equals("cyn")){
//存在用户名
out.println("<font color='red'>用户名已存在!</font>");
}
else{
//不存在用户名
out.println("<font color='green'>用户名可用!</font>");
}
%>
</body>
</html>
- 运行结果:
2.总结:
- 首先必须根据浏览器版本的不同创建Ajax引擎
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
- open()方法只是初始化http请求参数,并不真正发送http请求。可以调用send()方法发送http请求。
- 根据http请求的状态,自动调用相应处理函数接收数据并在前台界面进行显示操作:xmlhttp.onreadystatechange=function(){}。
- XMLHttpRequest的属性responseText自动封装了接收到的相应文本的所有内容!
ajax的基本流程可以概括为:
页面上js脚本实例化一个XMLHttpRequest对象,设置好服务器端的url、必要的查询参数、回调函数之后,向服务器发出请求,服务器在处理请求之后将处理结果返回给页面,触发事先绑定的回调函数。这样,页面脚本如果想要改变一个区域的内容,只需要通过ajax向服务器获取与该区域有关的少量数据,在回调函数中将该区域的内容替换掉即可,不需要刷新整个页面。