Java web 学习—ajax

相比传统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("请求错误");

}

}

}

当需要将响应结果响应到页面的指定位置时,则添加一个

标记,设置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);

}



你可能感兴趣的:(Java web 学习—ajax)