AJAX技术

AJAX

异步的JavaScript、CSS、DOM等多种技术的组合，可以实现客户端的异步请求操作，实现不刷新页面的情况下与服务器通信，减少用户等待时间。

下面解释下异步与同步

同步：提交请求->等待服务器处理->处理完毕返回这个时间段内客户端浏览器不能干任何事

异步: 请求通过事件触发->服务器处理（浏览器可以处理其他事情）->处理完毕

AJAX开发模式与传统开发模式

传统开发模式

AJAX开发模式

AJAX核心技术——XMLHttpRequest对象

它是一个应用程序接口的JavaScript对象，能够实现超文本传输协议连接到一个服务器。

1、初始化XMLHttpRequest对象

IE浏览器： IE浏览器把XMLHttpRequest实例化为一个ActiveX对象

var HTTP_Request=new ActiveXObject("Microsoft");

Fireox、oper等非IE浏览器

var HTTP_Request=new XMLHttpRequest();

2、XMLHttpRequest对象的常用属性和方法

1、常用属性

onreadystatechange:用于指定状态改变时所触发的事件的属性

readyState:获取请求状态

responseXML：获取服务器XML响应的属性

if(window.XMLHttpRequest)//noIE
{
HTTP_Request=new XMLHttpRequest();
else if(window.ActiveXObject)//IE
{
HTTP_Request=new ActiveXObject("Microsoft.XMLHTTP");
}
}
var xmldoc=HTTP_Request.responseXML;//赋值给xmldoc

status：返回服务器HTTP状态码的属性

2、常用方法

open：创建新请求

send：向服务器发送请求

setRequestHeader：设置请求的HTTP头的方法，在open之后才可以使用

getResponseHeader()以字符串形式返回指定HTTP头信息:

getAllResponseHeaders()以字符串形式返回完整HTTP头信息

AJAX重构

1 创建AjaxRequest.js

var net=new Object();
//构造函数
net.AjaxRequest=function(url,onload,onerror,method,params)
{
this.req=null;
this.onload=onload;
this.onerroe=(onerrroe)? onerroe :this.defaultError;
this.loadDate(url,params);
}
net.AjaxRequest.prototype.loadDate=function(url,params)
{
	if(!method)
	{
		method="GET"；//设置默认的请求方式为GET
	}
	if(window.XMLHttpRequest)//noIE浏览器
	{
		this.req=new XMLHttpRequest();//创建XMLHttpRequest对象
	}
	else if(Window.ActiveXObject)//IE浏览器
    {
try
{
	this.req=new ActiveXObject("Microsoft.XMLHTTP");//创建XMLHttpRequest对象
}
catch (e)
{
	this.req=new ActiveXObject("Msxml2.XMLHTTP");//(另一种创建方式)创建XMLHttpRequest对象
}

	}
}
if(this.req)
{
	try
	{
		var loader=this;
		this.req.onreadystatechange=function()//用于指定状态改变时所触发的事件的属性
		{
			net.AjaxRequest.onReadyState.call(loader);

		}
		this.req.oepn(method,url,true);//创建新请求，建立对服务器的调用
		if(method=="POST")
		{
            this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求的内容内型
			this.req.setRequestHeader("x-requested-with","ajax");//设置请求的发出者
		}
		this.req.send(params);//发出请求

	}

	catch (err)
	{
		this.onerror.call(this);
	}
}

//重构构造函数
net.AjaxRequest.onReadyState=function()
{
	var req=this.req;//获取请求状态
	var ready=req.readyState;//请求完成
if(ready==4)
	{
		if(req.status==200)
		{
			this.onload.call(this);
		}
		else
		{
			this.onerror.call(this);//调用错误处理函数
		}
	}
}
//重构默认的错误处理函数
net.AjaxRequest.protype.defaultError=function()
{
	alert(this.req.readyState+this.req.status);
}

2 在需要应用AJAX的页面中应用一下语句

<script language="javascript" src="AjaxRequest.js"></scipt>

3 在应用AJAX的页面中编写错误的处理方法、实例化AJAX对象的方法和回调函数

<script language="javascript">
//错误处理方法
function onerror()
{
	alert("操作有误");
}
//实例化AJAX对象的方法
function getInfo()
{
	var loader= new net.Ajaxrequest("check.PHP?nocache="+new Date().getTime(),deal_getInfo,"GET");
}
//回调函数
function deal_getInfo()
{
	document.getElementById("show").innerHTML=this.req.responseText;
}
</script>