AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
用途:快速创建动态网页,不需要刷新整个页面,只需与服务器进行少量的数据交换便可达到属于新的目的,适用于需要局部刷新的用例场景。如:省市联动、股票K线图、地图等。
Ajax工作流程:
1、浏览器创建一个XMLHttpRequest对象,发送HttpRequest请求到服务器,使用xmlHttpRequest.open()和xmlHttpRequest.send()方法,具体看代码。
2、服务器收到请求,做相应处理后返回结果到浏览器
3、客户端通过xmlRequest的属性responseText,或responseXML取得数据,实现页面的局部刷新。
XMLHttpRequest对象:
所有的现代浏览器均支持此对象,所以无需下载任何浏览器插件就能使用Ajax技术
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象,老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象。
为避免浏览器的版本的原因,写出下面通用代码:
function getXmlHttpObject(){
var xmlhttp;
if (window.ActiveXObject)
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
//window.alert("其他");
}
else
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
//window.alert("dada");
}
return xmlhttp;
}
下面介绍xmlHttpRequest的open()方法和send()方法
open(method,url,async):
open方法有三个参数,
method参数:表示请求的类型post或get类型
这两种方式的区别在后面介绍。
url参数:文件在服务器上的位置
asyn参数:同步或异步,有true(同步)和false(异步),解释一下这两种方式的区别:
异步:在执行到此处代码的时候,javascript无需等待服务器的响应,继续执行下面的javascipt代码,当响应就绪后对其进行处理。
同步:JavaScript等待其响应就绪后才会执行,这使得在大型应用中,如果服务器繁忙,程序会出现挂起、停止现象。
实现异步主要依赖于JavaScript回调函数(顺便说一下回调函数的设计目的,回调函数是一种以参数形式传递给另一个函数的函数,太伟大了?):
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
send()方法:
如果在open方法中使用了get方法提交请求,则send()无需传参数,因为在open()方法url里已经带有数据,如下;
xmlhttp.open("GET","/try/ajax/demo?name=aaa&id=4",true);
xmlhttp.send();
如果使用了post方法提交请求,则是在send方法里传数据,这是代码需要增加一条语句设置Http头:
xmlHttpRequest.open("POST","./try/demo.jsp",true);
xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttpRequest.send("name=aaa&id=4");
POST与GET请求的区别:
get请求:传输简单且较快,大多数情况下能用,都有些情况不适用,比如在一个验证用户名是否可用的场景下,如果提交的用户名不发生变化,则浏览器不会真的发请求,而是获取的缓存结果数据,解决办法是:(1)在发请求的时候加一个变化的参数(如加一个随机函数)(2)在服务器送回结果禁用缓存,这样就浏览器不会使用缓存结果
post请求:(1)post传输没有数据量的限制(2)post传输更安全可靠(3)无法使用缓存文件*
下面实现一个用户名无刷新验证:
写了一个html和jsp,(话说jsp和html又有啥区别?简单来说,html只是静态页面,jsp是动态web页面,利用Java代码分析产生结果后生成html页面,产生动态结果,具体区别请参看这篇文章)
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function getXmlHttpObject(){
var xmlhttp;
if (window.ActiveXObject)
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
//window.alert("其他");
}
else
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
return xmlhttp;
}
var myXmlRequest="";
function checkName(){
myXmlRequest=getXmlHttpObject();
if(myXmlRequest){
var url="registerProcess.jsp?username="+$("username").value;
myXmlRequest.open("get",url,true);
myXmlRequest.onreadystatechange=chuli;
myXmlRequest.send(null);
}
}
function chuli(){
//window.alert("处理函数被调回"+myXmlRequest.readyState);
if(myXmlRequest.readyState==4){
//window.alert("服务器返回"+myXmlRequest.responseText);
$('myres').innerHTML=myXmlRequest.responseText;
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="" method="post">
用户名字:<input type="text" οnkeyup="checkName();" name="username1" id="username" >
<input type="button" οnclick="checkName();" value="验证用户名">
<span style="border-width:0;color:red" type="text" id="myres"></span>
<br>
用户密码:<input type="password" name="password" ><br>
电子邮件:<input type="text" name="email"><br>
<input type="submit" value="用户注册">
</form>
<form action="" method="post">
用户名字:<input type="text" name="username2" >
<br>
用户密码:<input type="password" name="password" ><br>
电子邮件:<input type="text" name="email"><br>
<input type="submit" value="用户注册">
</form>
</body>
</html>
阐述代码流程:
1、用户输入用户名,利用<input>标签onkeyup这个监听函数触发checkname()函数
2、checkname()函数被触发后,获取XMLHttpRequest对象,利用这个对象用open()send()方法向服务器发请求
3、当服务器响应就绪后触发chuli这个函数
4、chuli函数中利用$("")函数修改页面内容
jsp代码:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<%
String username=request.getParameter("username");
if(username.equals("peng")){
out.println("用户名不可用");
}else{
out.println("用户名可用");
}
%>
</body>
</html>
运行结果: