一:ajax概述
1.ajax简介
1.ajax是什么?
- asynchronous javascript and xml;异步的js和xml。
- 它能使用js访问服务器,而且是异步访问!
- 服务器给客户端相应的一般是整个页面,一个html完整页面!但在ajax中因为是局部刷新,那么服务器就不用再响应整个页面!而只是数据!
- 数据的表现方式:
1.text:纯文本
2.xml:两种语言都能识别
3.json:它是js提供的数据交互格式,它在ajax中最受欢迎
2.异步交互和同步交互
- 同步:发一个请求,就要等待服务器的响应结束,才能发第二个请求。刷新的是整个页面
- 异步:发一个请求后,无需等待服务器的响应,然后就可以发送第二个请求!可以使用js接受服务器的响应,然后使用js来局部刷新
javascript的局部刷新示例:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){//在文档加载完成后马上执行
var btu=document.getElementById("btu");
btu.onclick=function(){
var h1=document.getElementById("h1");
h1.innerHTML="Hello ajax!";
}
}
</script>
</head>
<body>
<button id="btu">点击这里</button>
<h1 id="h1"></h1>
</body>
</html>
异步交互和同步交互解析图:
2.AJAX常见应用场景和优缺点
- 应用场景:
- 用户注册时(校验用户名是否被注册过)
3.ajax的优缺点
优点:
- 异步交互:增强了用户的体验!
- 性能:因为服务器无需再响应整个页面,只需要响应部分内容,所以服务器的压力减轻了!
缺点:
- ajax不能应用在所有场景!
- ajax无端的增多‘了对服务器的访问次数 ,给服务器带来了压力!
4.ajax发送异步请求(四步操作)
- 第一步(得到XMLHttpRequest)
得到XMLHttpRequest
大多数浏览器都支持:var xmlHttp=new XMLHttpRequest()
IE6.0:var xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
IE5.5及更早的版本:var xmlHttp=new ActiveXObject(“Micorsoft.XMLHTTP”);
利用函数得到XMLRequest对象:
function crateXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveObject("Microsoft.XMLHTTP");
} catch (e) {
alert("哥们儿,你用的是什么浏览器啊?");
throw e;
}
}
}
}
-
第二步(打开与服务器的连接)
xmlHttp.open():用来打开与服务器的连接,它需要三个参数:
- 请求方式:可以是GET或POST
- 请求的URL:指定服务器的资源,例如:/a/servlet
- 请求是否为异步:如果为true表示发送同步请求,否则为异步请求!
xmlHttp.open(“GET”,“a/servlet”,true); -
第三步(发送请求)
xmlHttp.send(null):如果不给可能会造成部分浏览器无法发送! -
第四步()
在xmlHttp对象的一个事件上注册监听器:onreadystatechange