1.什么是ajax
Asynchronous JS And Xml 异步JS 和 XML
2.ajax 技术构成
以html 为骨架
以css 为渲染手段
以js 作为主要的操作语言
以XML 或者 JSON 作为数据传输格式
以 XMLHttpRequest 作为请求 和 响应的处理对象
3.ajax 的优点
异步请求
局部刷新
4.使用js 创建 XMLHttpRequest 或者ActiveObject("Microsoft.XMLHTTP")
function createXHR(){
var xhr = null;
// 如果浏览器支持 XMLHttpRequest
if(this.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//alert(xhr);
return xhr;
}
5.XMLHttpRequest 的API
function sender(){
// 准备发送Http 请求
var xhr = createXHR();
xhr.open(type,url,async);
type 请求的方式 string 类型 取值有 get post put delete
url 请求的路径 string 类型 hello.do http://localhost:....
async 是否异步 boolean 类型 默认是 true
// 注册数据处理函数
xhr.onreadystatechange = 数据处理函数;
xhr.onreadystatechange = function(){
// 获取请求状态 readyState http的状态码是 200
if(xhr.readySate == 4 && xhr.status == 200){
// 获取服务器返回的数据
var text = xhr.responseText;
}
};
// 发送请求
xhr.send(null);
}
练习1
首先编写一个servlet 可以返回 10000以内的随机数。
然后写一个 html 页面 上面有一个点击按钮 按钮上显示发送ajax 请求 ,把ajax返回的数据
显示html 页面的一个span 标记上.
servlet代码的书写
@WebServlet("/randomVaule.do")
public class XdlRandomValueServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Random random = new Random();
int a = random.nextInt(10000);
PrintWriter pWriter = response.getWriter();
pWriter.write(""+a);
pWriter.close();
}
html代码的书写
<script type="text/javascript">
<!-- 使用js 创建 XMLHttpRequest -->
function createXHR(){
var xhr = null;
if (this.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveObject("Microsoft.XMLHTTP");
}
//alert(xhr);
return xhr;
}
</script>
<script type="text/javascript">
function sendAJAX() {
// 准备发送Http 请求
var xhr = createXHR();
xhr.open('post', 'randomVaule.do', true);
// 注册数据处理函数
xhr.onreadystatechange=function(){
// 获取请求状态 readyState http的状态码是 200
if(xhr.readyState==4 && xhr.status==200){
// 获取服务器返回的数据
var text = xhr.responseText;
//给网页中标签设置内容
document.getElementById("sp1").innerHTML=text;
}
};
//发送请求
xhr.send(null);
}
</script>
</head>
<body>
<span id="sp1"></span>
<input type="button" value="发送Ajax 请求" onclick="sendAJAX()">
</body>
练习2
首先编写一个servlet 可以返回按照 yyyy-MM-dd hh:mm:ss 的系统日期字符串。
然后写一个html页面 上面有一个点击按钮，按钮上显示发送ajax请求，把Ajax返回的数据显示到html页面的一个span标签上。
//创建一个名为XdlDateServlet的servlet
@WebServlet("/date.do")
public class XdlDateServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
*/
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
Date date = new Date();
SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
String time = sf.format(date);
PrintWriter pWriter = response.getWriter();
pWriter.write(time);
pWriter.close();
}
}
// Html页面的编写
<script type="text/javascript">
function createXHR(){
var xhr = null;
if (this.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveObject("Microsoft.XMLHTTP");
}
//alert(xhr);
return xhr;
}
</script>
<script type="text/javascript">
function sendAJAX() {
// 准备发送Http 请求
var xhr = createXHR();
xhr.open('post', 'date.do', true);
// 注册数据处理函数
xhr.onreadystatechange=function(){
// 获取请求状态 readyState http的状态码是 200
if(xhr.readyState==4 && xhr.status==200){
// 获取服务器返回的数据
var text = xhr.responseText;
//给网页中标签设置内容
document.getElementById("sp2").innerHTML=text;
}
};
xhr.send(null);
}
</script>
</head>
<body>
<span id="sp2"></span>
<input type="button" value="ajax请求" onclick="sendAJAX()">
</body>