相比传统web应用模式，ajax通过对ajax引擎的一次JavaScript调用来实现用户的行为。
ajax是XMLHttpRequest（一个具有应用程序接口的JavaScript对象）对象和javascript，XML，Css，dom等多种技术的组合。
在使用XMLHttpRequest对象发送请求和处理响应之前，要先初始化该对象。因为不是w3c标准，所以在初始化对象时要考虑是IE浏览器还是其他浏览器。
1.非IE浏览器：var http_request=new XMLHttpRequest();
2.IE浏览器：var http_request=new ActiveXObject("Msxml2.XMLHTTP");
或者 var http_request=new XMLHttpRequest();
为了提高兼容性
if(window.XMLHttpRequest){ //非IE浏览器
http-request=new XMLHttpRequest();
}else if(window.ActiveXObject){ IE浏览器
try{
http_request=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
http_request=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
xmlhttprequest对象的常用方法
1.open（）：设置参数信息
open("method请求类型（get/post），"url请求地址" ,[请求方式：同步true/异步false] ，[用户名][密码]");
2.send():向服务器发送请求
send(数据):必须在send方法之后才能调用
3.setRequestHeadere("header：http头","value:头设置值")
4.abort():用于请求或者放弃当前异步请求
5.getallresponseheader():以字符串型形式返回完整的http头消息
常用属性
1.onreadystatechange：指定状态改变时触发的事件处理器
http_rquest.onreadystatechange=function(){
getResult("参数");
}
2.readyState：获取请求的状态 4：完成
3.responsetext:获取服务器响应，表示为字符串
4.responseXML获取服务器响应，表示为xml
5.status返回服务器http状态码 200：成功 202：请求接受未成功 400：错误的请求 404：文件未找到 500： 内部服务器错误
6.status:返回httpp状态码对应的文本
与服务器通信
发送请求（get/post）
1.初始化XMLHttpRequest对象
if(window.XMLHttpRequest){ //非IE浏览器
http-request=new XMLHttpRequest();
}else if(window.ActiveXObject){ IE浏览器
try{
http_request=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
http_request=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
if(!http_request){
alert("创建失败");
return false；
}
2.为对象返回指定一个返回结果处理函数（回调函数）
http_request.onreadystatechange=function(){
getResult(参数);
}
3.创建与服务器的连接
http_request.open('post/get',url,true/false);
在指定URL参数时在参数后加一个时间戳，用来防止因浏览器缓存结果而不能实现得到最新结果
String url="deal.jsp?nocache="+new Date().getTime();
4.向服务器 发送请求:
get请求：http_request.send(null);
post请求：（在发送post请求前需要设置正确的请求头：http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");且添加在请求前）
http_request.send(参数);
处理服务器响应
1.处理字符串响应（响应简单情况）
function getresult(){
if(http_request.readyState==4){
if(http_request.status==200){
alert(htp_request.responseText);
}else{
alert("请求错误");
}
}
}
当需要将响应结果响应到页面的指定位置时，则添加一个<div>或<span>标记，设置id属性然后在回调函数中应用代码
document.getElementByld("id").innerHTML=http_request.responseText;
2.处理xml响应
Ajax重构
var net=new Object();
net.js1=function(url,onload,onerror,method,params){ //构造函数
this.req=null;
this.onload=onload;
this.onerror=(onerror) ? onerror:this.defaultError;
this.loadDate(url,method,params);
}
net.js1.prototype.loadDate=function(url,method,params){ //初始化对象指定处理函数，发送请求方法
if(!method){
method="GET";
}
if(window.XMLHttpRequest){
this.req=new XMLHttpRequest();
}else if(window.ActiveXObject){
this.req=new ActiveXobject("Microsoft.XMLHTTP");
}
if(this.req){
try{
var loader=this;
this.req.onreadystatechange=function(){
net.AjaxRequest.onReadyState.call(loader);
}
this.req.open(method,url,true);
if(method=="POST"){
this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
this.req.send(params);
}catch(err){
this.onerror.call(this);
}
}
}
net.js1.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.js1.prototype.defaultError=function(){ //默认错误处理函数
alert("错误数据\n\n回调状态："+this.req.readyState+"\n状态:"+this.req.ststus);
}
网友评论