一、AJAX介绍
- AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
- AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
- AJAX是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
- 使用 AJAX 的应用程序案例:京东购物车、百度搜索框、新浪注册
二、ajax发送请求步骤
1. 创建对象: XMLHttpRequest 对象
该对象是对JavaScript 的一个扩展,可使网页与服务器进行通信。是创建Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词。所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject 。为了每次写Ajax的时候都节省一点时间,可以把对象检测的内容打包成一个可复用的函数:
function getHTTPObject(){
var xhr=false;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}
else if(window.ActiveXObject){
// code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
对window.XMLHttpRequest的调用会返回一个对象或null,if语句会把调用返回的结果看作是true或false(如果返回对象则为true,返回null则为false)。如果XMLHttpRequest对象存在,则把 xhr 的值设为该对象的新实例。如果不存在,就去检测 ActiveObject 的实例是否存在,如果答案是肯定的,则把微软 XMLHTTP 的新实例赋给 xhr
2. 创建一个连接
创建的链接可以根据需求来拼接不同的参数,但请求方式(get和post)的不同使其也不相同
var url=相应的链接的值
xhr.open(method, url, async, username, password)
*-method包括POST和GET两种
-url即设置的参数url
-async代表对是否异步的设置,默认为true即异步,false代表同步
-username与password通常不使用*
var url=this.href+"?time="+new Date();
//测试get请求
xhr.open("GET", url, true);
//测试post请求
xhr.open("POST", url, true);
3. 发送请求
(1)get方式
//xhr.send(null);//测试get请求,加null,为了防止火狐浏览器出错
(2)post方式
//post方式发送请求,它会告知服务器正在发送数据,并且数据已经符合URL编码了。
//该方法必须在open()之后才能调用
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("goal=study&today=ajax");//post方式发送ajax请求的参数的编写方法
4. 监听请求相应过程(*)
xhr.onreadystatechange=function(){
// alert("请求的状态的变化情况:"+xhr.readyState);
if(xhr.readyState==4){//确保与服务器有成功的交互
//alert("请求http协议状态码和原因描述为:"+xhr.status+" "+xhr.statusText);
if(xhr.status==200||xhr.status==304){//确定得到OK
//接收响应信息
var result=xhr.responseText;//代表接收的是字符串内容,可以包含片段html代码,json格式字符串。
//xhr.responseXML;//代表接收的数据格式是xml的
//输出检验
//alert(result);
//根据用户的需求进行显示控制,将结果放入div中
document.getElementById("showDiv").innerHTML=result;
}
//额外的处理(拓展)
if(xhr.status==404){
alert("sorry,请求的资源不存在");
}
}
}
以一个小例子为例:
实现代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="${applicationScope.basePath}">
<title>My JSP 'ajax.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
//页面加载事件
window.onload=function(){
//每加载一次页面就给出提示信息( 整个页面)
var code=Math.random();
document.getElementById("hh").innerHTML+=code;
//利用a标签发出ajax请求
document.getElementsByTagName("a")[0].onclick=function(){
//ajax发请求
//1.创建对象 核心对象 XMLHttpRequest
var xhr="";
//alert(window.XMLHttpRequest);
//alert(window.ActiveXObject);//undefined
if(window.XMLHttpRequest){
//alert("modren");
xhr=new XMLHttpRequest();
}else if(window.ActiveXObject){//了解即可
// alert("old");
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.创建一个连接
var url=this.href+"?time="+new Date();
//测试get请求
//xhr.open("GET", url, true);//async:是否异步。默认为true---》代表异步;false---》代表同步
xhr.open("POST", url, true);
//post方式发送请求,它会告知服务器正在发送数据,并且数据已经符合URL编码了。
//该方法必须在open()之后才能调用
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//3.发送请求
//xhr.send(null);//测试get请求,加null,为了防止火狐浏览器出错
xhr.send("goal=study&today=ajax");//post方式发送ajax请求的参数的编写方法
//4.监听请求响应过程(必须了解),每次状态的值的改变都会调用js函数,由服务器进行调用的
xhr.onreadystatechange=function(){
// alert("请求的状态的变化情况:"+xhr.readyState);
if(xhr.readyState==4){//确保与服务器有成功的交互
//alert("请求http协议状态码和原因描述为:"+xhr.status+" "+xhr.statusText);
if(xhr.status==200||xhr.status==304){//确定得到OK
//接收响应信息
var result=xhr.responseText;//代表接收的是字符串内容,可以包含片段html代码,json格式字符串。
//xhr.responseXML;//代表接收的数据格式是xml的
//输出检验
//alert(result);
//根据用户的需求进行显示控制,将结果放入div中
document.getElementById("showDiv").innerHTML=result;
}
//额外的处理(拓展)
if(xhr.status==404){
alert("sorry,请求的资源不存在");
}
}
}
return false;//防止a标签跳转
}
}
</script>
</head>
<body>
<h2 id="hh">学习原生ajax技术</h2>
<a href="hello.txt">ajax发出请求</a>
<div id="showDiv" style="height: 200px;width: 300px;border: 1px solid red">null</div>
<h3>我是占位的,就是打酱油的</h3>
</body>
</html>