ajax java forward_ajax使用

1.概念

Ajax是Asynchronous JavaScript and XML的缩写,就是异步JavaScript与XML。

传统WEB应用中,页面中用户的每一次操作都将触发一次返回Web服务器的HTTP请求,服务器进行相应处理后返回相应的HEML页面。而在Ajax应用中,页面中用户的操作将通过Ajax

引擎与服务器端进行通信,然后将返回结果提交给客户端Ajax引擎,再由Ajax引擎来决定将这些数据插入到页面的指定位置。

99236e6a194418bda2cbc0886a87edbe.png

所以Ajax最大的特点就是无刷新的更新页面,减轻了服务器的负担。

2.Ajax技术

Ajax是JavaScript、XML、CSS、DOM等多种已有技术的组合。

2.1XMLHttpRequest

Ajax最核心的技术就是XMLHttpRequest,它是一个具有应用程序接口的JavaScript对象,通过它,可以只同服务器进行数据层面的交换,而不用每次都刷新页面。

XMLHttpRequest对象的常用方法及常用属性如下:

b03097c19d7f7b806f3bb18c77d72c38.png

2.2JavaScript

在Web页面中添加动态脚本代码的解释性程序语言。

2.3DOM

Document Object Model(文档对象模型),是表示文档和访问、操作构成文档的各种元素(如HTML标记和文本串)的应用程序接口。在Ajax应用中,通过JavaScript操作DOM,可以达到在不刷新页面的情况下实时修改用户界面的目的。

2.4XML

Extensible Markup Language(可扩展的标记语言),提供了用于描述结构化数据的格式。

2.5CSS

层叠样式表,用于页面布局,通过改变文档对象的CSS属性控制页面的外观和行为。

3.传统Ajax的工作流程

3.1发送请求

1)初始化XMLHttpRequest对象

使用XMLHttpRequest之前需要进行初始化,初始化的方法如下:

48304ba5e6f9fe08f3fa1abda7d326ab.png

if(window.XMLHttpRequest){

http_request=new XMLHttpRequest(); //非IE浏览器

}

else if(window.ActiveObject){ //IE浏览器

try{

http_request=new ActiveObject("Msxml2.XMLHTTP");

}

catch(e){

try{

http_request=new ActiveObject("Microsoft.XMLHTTP");

}

catch(e){}

}

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

2)为XMLHttpRequest对象指定一个回调函数,用于对返回结果进行处理。

http_request.onreadystatechange=getResult; //调用回调函数

如果要指定传递的参数,可以应用以下方法:

http_request.onreadystatechange=function(){getResult(param)};

3)创建一个与服务器的连接,在创建时,需要指定发送请求的方式,以及设置是否采用异步方式发送请求

http_request.open("GET", url, true);

// http_request.open("POST", url,true);

4)向服务器发送请求。利用send()方法可以实现向服务器发送请求,该方法需要传递一个参数,如果发送的是GET请求,可以将参数设置为null;如果发送的是POST请求,该方法需要通过该参数指定要发送的请求参数。

发送GET请求:

http_request.send(null);

发送POST请求:

http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

var param="user="+......;//组合参数

http_request.send(param);

3.2处理服务器响应

在指定的回调函数中,首先需要判断服务器的请求状态,保证请求已完成,然后再根据服务器的HTTP状态码,判断服务器对请求的响应是否成功,如果成功,则获取服务器的响应反馈给客户端。XMLHttpRequest对象提供了两个用来访问服务器响应的属性:一个是responseText属性,返回字符串响应;另一个是responseXML属性,返回XML响应。

1)处理字符串响应

48304ba5e6f9fe08f3fa1abda7d326ab.png

function getResult(){

if(http_request.readyState==4){ //判断请求状态

if(http_request.status==200){ //请求成功,开始处理相应

alert(http_request.responseText); //弹出提示对话框显示响应结果

}else{

alert("错误");

}

}

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

2)处理XML响应

var xmldoc=http_request.responseXML;

解析xmldoc

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值