1、ajax
asynchronous javascript and xml :异步的js和xml
能使用js访问服务器,而且是异步访问
服务器给客户端的响应一般是整个页面,一个html完整页面。但在ajax中因为是局部刷新,那么服务器就不用再响应整个页面,而是数据
text:纯文本
xml:熟悉
json:是js提供的数据交互格式,在ajax最受欢迎
2、异步交互和同步交互
同步:
发出一个请求:要等待服务器的响应结束,然后才能发送第二个请求。中间时间等待
刷新的是整个页面
异步:
发出一个请求后,无序等待服务器的响应,就可以发出第二个请求
可以使用js来接收服务器的响应,然后使用js来局部刷新
3、应用场景
百度的搜索框
用户注册时(校验用户名是否被注册过)
4、ajax的优缺点
优点:
异步交互:增强了用户的体验
性能:因为服务器无需再响应整个页面,只需要响应部分内容,所以服务器的压力减轻了
缺点:
ajax不能应用在所有场景
ajax无端的增多了对服务器的访问次数,给服务器带来了压力(本来不用关联搜索)
ajax发送异步请求(四步操作)
1、第一步(得到XMLHttpRequest)
ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了,就掌握了ajax
得到XMLHttpRequest
大多数浏览器都支持 var xmlHttp = new XMLHttpRequesst();
IE6.0: var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
IE5.5以及更早版本的IE: var xmlHttp = new ActiveXObject = new ActiveXObject("Microsoft.XMLHTTP");
编写创建XMLHttpRequest对象的函数
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
} catch(e){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTPP");
}catch(e){
alert("用的什么浏览器?");
throw e;
}
}
}
}
2、第二步(打开与服务器的连接)
xmlHttp.open():用来打开与服务器的连接,需要三个参数
请求方式:可以是GET或POST
请求的URL:指定服务器端资源,例如/day06_01/AServlet
请求是否为异步:如果为true表示发送异步请求,否则同步请求
xmlHttp.open("GET","/day06_01/AServlet",true);
3、第三步(发送请求)
xmlHttp.send(null);如果不给会造成部分浏览器无法发送
参数:就是请求体内容。如果是GET请求,必须给出null,xmlHttp.send("username=zs&password=123");
4、第四步()
在xmlHttp对象的一个事件上注册监听器:onreadystatechange
xmlHttp对象共有5个状态
0状态:刚创建,没有调用open()方法
1状态:请求开始,调用了open方法,但还没有调用send()方法
2状态:调用完了send方法
3状态:服务器已经开始响应,但不表示响应结束了
4状态:服务器响应结束 (通常只关心这个状态)
得到xmlHttp对象的状态
var stats = xmlHttp.readyState;//可能是0、1、2、3、4
得到服务器响应的状态码
var status = xmlHttp.status;//例如200、404、500
得到服务器响应的内容
var content = xmlHttp.responseText;//得到服务器响应的文本格式的内容
var content = xmlHttp.responseXML;//得到服务器响应的xml格式的内容,是Document对象
xmlHttp.onreadystatechange = function(){//xmlHttp的5中状态都会调用本方法
if(xmlHttp.readyState ==4 && xmlHttp.status == 200){//双重判断:判断是否为4状态,而且还有判断是否为200
//获取服务器的响应内容
var text = xmlHttp.responseText;//更通用
}
}
发送POST请求(如果发送请求时需要带有参数,一般都用POST)
open:xmlHttp.open("POST",...);
添加一步:设置Content-Type请求头
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
send:xmlHttp.send("username=zs&password=123");//发送请求时指定请求体
注册表单之校验用户是否注册
1、编写页面:
ajax3.jsp
给出注册表单页面
给用户名文本框添加onblur事件的监听
获取文本框的内容,通过ajax4步发送给服务器,得到响应结果
如果为1:在文本框后显示"用户名已被注册"
如果为0:什么都不做
2、编写Servlet
ValidateUsernameServlet
获取客户端传递的用户名参数
判断是否为itcase
是:返回1
否:返回0
响应内容为xml数据
服务器端:
设置响应头:Content-Type:其值为:text/xml;charset=utf-8;
客户端:
var doc = xmlHttp.responseXML;//得到的是document对象
<script type="text/javascript">
window.onload = function() {//在文档加载完成后马上执行
//得到btn元素
var btn = document.getElementById("btn");
//给btn的click事件注册监听
btn.onclick = function(){//在按钮被点击时执行
//获取h1元素对应的dom对象
var h1 = document.getElementById("h1");
//给h1添加内容
h1.innerHTML = "hello";
}
}
</script>
</head>
<body>
<button id="btn">点击</button>
<h1 id="h1"></h1>
</body>
ajax的helloword
public class AServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("hello ajax");
response.getWriter().print("hello aaaa");
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");//获取请求参数
System.out.println("Post:hello ajax"+username);
response.getWriter().print("Post:hello aaaa"+username);
}
}
get ajax
<script type="text/javascript">
//创建异步对象
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();//大多数浏览器
}catch(e){
try{
return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
}catch(e){
try{
return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早
}catch(e){
alert("什么浏览器?");
throw e;
}
}
}
}
window.onload = function(){//文档加载完毕后执行
var btn = document.getElementById("btn");
btn.onclick = function(){//给按钮的点击事件注册监听
/*
ajax四步操作,得到服务器的响应
把响应结果显示到h1元素中
*/
/*
1、得到异步对象
*/
var xmlHttp = createXMLHttpRequest();
/*
2、打开与服务器的连接
指定请求方式
指定请求的URL(页面由服务器发送过来 在发送之前已经被服务器变成html)
指定是否为异步请求
*/
xmlHttp.open("GET","<c:url value='/AServlet'/>",true);
/*
3、发送请求
*/
xmlHttp.send(null); //get请求没有请求体,也要给出null,不然firefox可能不能发送
/*
4、给异步对象的onreadystatechange事件注册监听器
*/
xmlHttp.onreadystatechange = function() { //当xmlHttp的状态发送变化时执行}
//双重判断:xmlHttp的状态为4(服务器响应结束),以及服务器响应的状态码为200(响应成功)
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//获取服务器的响应结果
var text = xmlHttp.responseText;
//获取h1元素
var h1 = document.getElementById("h1");
h1.innerHTML = text;
}
}
}
}
</script>
</head>
<body>
<button id="btn">点击</button>
<h1 id="h1"></h1>
</body>
post ajax
/创建异步对象
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();//大多数浏览器
}catch(e){
try{
return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
}catch(e){
try{
return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早
}catch(e){
alert("什么浏览器?");
throw e;
}
}
}
}
window.onload = function(){//文档加载完毕后执行
var btn = document.getElementById("btn");
btn.onclick = function(){//给按钮的点击事件注册监听
/*
ajax四步操作,得到服务器的响应
把响应结果显示到h1元素中
*/
/*
1、得到异步对象
*/
var xmlHttp = createXMLHttpRequest();
/*
2、打开与服务器的连接
指定请求方式
指定请求的URL(页面由服务器发送过来 在发送之前已经被服务器变成html)
指定是否为异步请求
*/
//修改open方法,指定请求方式为POST
xmlHttp.open("POST","<c:url value='/AServlet'/>",true);
//设置请求头 :Content-Type
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
/*
3、发送请求
*/
//发送时指定请求体
xmlHttp.send("username=zs&password=123"); //get请求没有请求体,也要给出null,不然firefox可能不能发送
/*
4、给异步对象的onreadystatechange事件注册监听器
*/
xmlHttp.onreadystatechange = function() { //当xmlHttp的状态发送变化时执行}
//双重判断:xmlHttp的状态为4(服务器响应结束),以及服务器响应的状态码为200(响应成功)
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//获取服务器的响应结果
var text = xmlHttp.responseText;
//获取h1元素
var h1 = document.getElementById("h1");
h1.innerHTML = text;
}
}
}
}
</script>
</head>
<body>
<button id="btn">点击</button>
<h1 id="h1"></h1>
</body>
判断参数是否已有
<script type="text/javascript">
//创建异步对象
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();//大多数浏览器
}catch(e){
try{
return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
}catch(e){
try{
return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早
}catch(e){
alert("什么浏览器?");
throw e;
}
}
}
}
window.onload = function(){
//获取文本框,给它的失去焦点事件注册监听
var userEle = document.getElementById("usernameEle");
userEle.onblur = function(){
//1、得到异步对象
var xmlHttp = createXMLHttpRequest();
//2、打开链接
xmlHttp.open("POST", "<c:url value='/ValidateUsernameServlet'/>",true);
//3、设置请求头:Content-Type
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4、发送请求,给出请求体
xmlHttp.send("username=" +userEle.value);
//5、给xmlHttp的onreadystatechange事件注册监听
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState ==4 && xmlHttp.status == 200){//双重判断
//获取服务器的响应,判断是否为1
//是:获取span,添加内容:"用户名已被注册"
var text = xmlHttp.responseText;
var span = document.getElementById("errorSpan");
if(text == "1"){
//得到span元素
span.innerHTML = "用户名已被注册";
} else{
span.innerHTML = "";
}
}
};
};
};
</script>
</head>
<body>
<h1>用户名是否被注册</h1>
<form action="" method="post">
用户名:<input type="text" name="username" id="usernameEle"/><span id="errorSpan"></span><br/>
密码:<input type="password" name="password"/><br/>
<input type="submit" value="注册"/>
</form>
</body>
public class ValidateUsernameServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
/*
* 1、获取参数username
* 2、判断是否为my
* 3、如果是:响应1
* 4、如果不是:响应0
*/
String username = request.getParameter("username");
if(username.equalsIgnoreCase("my")){
response.getWriter().print("1");
} else{
response.getWriter().print("0");
}
}
}
ajax4.jsp
<script type="text/javascript">
//创建异步对象
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();//大多数浏览器
}catch(e){
try{
return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
}catch(e){
try{
return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早
}catch(e){
alert("什么浏览器?");
throw e;
}
}
}
}
window.onload = function(){//文档加载完毕后执行
var btn = document.getElementById("btn");
btn.onclick = function(){//给按钮的点击事件注册监听
/*
ajax四步操作,得到服务器的响应
把响应结果显示到h1元素中
*/
/*
1、得到异步对象
*/
var xmlHttp = createXMLHttpRequest();
/*
2、打开与服务器的连接
指定请求方式
指定请求的URL(页面由服务器发送过来 在发送之前已经被服务器变成html)
指定是否为异步请求
*/
xmlHttp.open("GET","<c:url value='/BServlet'/>",true);
/*
3、发送请求
*/
xmlHttp.send(null); //get请求没有请求体,也要给出null,不然firefox可能不能发送
/*
4、给异步对象的onreadystatechange事件注册监听器
*/
xmlHttp.onreadystatechange = function() { //当xmlHttp的状态发送变化时执行}
//双重判断:xmlHttp的状态为4(服务器响应结束),以及服务器响应的状态码为200(响应成功)
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//获取服务器的响应结果(xml)
var doc = xmlHttp.responseXML;
//查找文档下名为student的所有元素,得到数组,再取下标0元素
var ele = doc.getElementsByTagName("student")[0];
var number = ele.getAttribute("number");//获取元素名为number的属性值
//var name = ele.getElementsByTagName("name")[0].textContent;//IE支持
//var age = ele.getElementsByTagName("age")[0].textContent;//IE支持
//var sex = ele.getElementsByTagName("sex")[0].textContent;//IE老版本支持.text
var name;
var age;
var sex;
//处理浏览器的差异
if(window.addEventListener) {//一般浏览器都有这
name = ele.getElementsByTagName("name")[0].textContent;
age = ele.getElementsByTagName("age")[0].textContent;
sex = ele.getElementsByTagName("sex")[0].textContent;
} else{
name = ele.getElementsByTagName("name")[0].text;
age = ele.getElementsByTagName("age")[0].text;
sex = ele.getElementsByTagName("sex")[0].text;
}
var text1 = number +","+name+","+age+","+sex;
document.getElementById("h1").innerHTML = text1;
}
}
}
}
</script>
</head>
<body>
<button id="btn">点击</button>
<h1 id="h1"></h1>
</body>
BServlet
public class BServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String xml = "<students>"+
"<student number='my_01'>"+
"<name>zs</name>"+
"<age>10</age>"+
"<sex>male</sex>"+
"</student>"+
"</students>";
response.setContentType("text/xml;charset=utf-8");
response.getWriter().print(xml);
}
}