前言
AJAX这个东西还是很模糊的,下面会对AJAX这个技术进行详细讲解一些,另外,在网上商城中应用到了,使用它有四个步骤,下面详细介绍一些。
内容
定义:
AJAX=异步JavaScript和XML
它是一种用于创建快速动态的网页的技术,通过后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
工作原理:
相当于在用户和服务器之间加了一个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有用户请求都提交给服务器,像一些数据验证和数据处理等都交给了Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为服务器提交请求。
应用方式为:
*创建XMLHttpRequest对象
第一种:
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
第二种:
var xmlHttp;
try{//Firefox,Opera 8.0+,Safari
xmlHttp=new XMLHttpRequest();
}
catch(e){
try{//Internet Explorer
xmlHttp=new ActiveObject("Msxml2.XMLHTTP");
}
catch(e){
try{
xmlHttp=new ActiveObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}
return xmlHttp;
*设置监听的对象
将服务器响应形式发送给前台界面,响应结果为:
ResponseText:获得字符串形式的响应数据
ResponseXML:获得XML形式的响应数据
监听的结果情况:
*打开链接
*发送请求
小例子
需求:
通过点击查询订单详情按钮,得出订单信息;(采用AJAX异步加载)
解决方式:
1、创建异步加载的对象
2、设置监听
3、 打开链接
4、 发送
Demo
<script type="text/javascript">
function showDetail(oid){
//获得按钮对象
var but = document.getElementById("but"+oid);
//获得div对象
var div1 = document.getElementById("div"+oid);
if(but.value == "订单详情"){
//1、创建异步加载对象
var xhr = createXmlHttp();
//2、设置监听
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
div1.innerHTML = xhr.responseText;//获得字符串形式的响应数据
}
}
}
//3、打开链接
xhr.open("GET","${pageContext.request.contextPath}/adminOrder_findOrderItem.action?tiem="+new Date().getTime()+"&oid="+oid,true);
//4、发送
xhr.send(null);
but.value = "关闭";
}else{
but.value="订单详情";
div1.innerHTML = "";
}
}
function createXmlHttp(){
var xmlHttp;
try{//Firefox,Opera 8.0+,Safari
xmlHttp=new XMLHttpRequest();
}
catch(e){
try{//Internet Explorer
xmlHttp=new ActiveObject("Msxml2.XMLHTTP");
}
catch(e){
try{
xmlHttp=new ActiveObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}
return xmlHttp;
}
</script>
小结
ITOO项目的时候,用到AJAX异步请求,但是没有这么仔细的写下来过,AJAX的也是有优缺点的,但是个人感觉利大于弊。感兴趣的同胞们可以看看AJAX的优缺点,我在这里就不复制粘贴了。AJAX工作原理及其优缺点