ajax技术如何实现,ajax技术的基本原来以及实现过程

异步的概念:当ajax对象(XMLHttpRequest)向服务器发送请求的时候,浏览器不会销货当前页面,用户仍然可以对向前页面进行操作。

以用户输入用户名注册判断该用户是否存在为例

当用输入完用户名进入下一个输入框后,当前输入框失去了一个焦点,从而产生了一个事件,该事件的事务处理函数就调用了一个ajax对象,ajax对象就会向服务器发送一个请求,服务器中会相应这个请求发回一个简单的文本或者是一个json而不是整个页面给这个ajax对象,ajax对象事先绑定了一个处理函数,该处理函数从ajax对象中获得服务器返回的数据,就会采取document操作对页面局部进行更新。

在这个过程中,html中要有个焦点事件οnblur=f1()

然后要先获得ajax 对象 ,获得对象可以写成一个js脚本文件,放到webroot下一个myjs的文件架下function getXhr(){

var xhr=null;

if(window.XMLHttpRequest){

xhr=new XMLHttpRequest();

}else{

xhr= new ActiveXObject('Microsoft.XMLHttp');

}

return xhr;

}

在这里要再说说ajax对象的一些重要的属性

onreadystatechange  绑定一个事件处理函数,当readystate发生改变时执行该函数

readyState 通信的状态  0 1 2 3 4 5  当为4的时候表示获得了从服务器返回的所有完整数据

responseText 获得服务器返回的文本数据

responseXML获得服务返回的xml文件数据(基本上不是用xml获得而是用json获得)

status 获得状态码

ps:json处理数据比xml更快,而且占用资源更少,所以在ajax数据传送中更多的是用json,但是xml的格式类型比json要更多,处理复杂的数据输送也更好些

编程的步骤:

一,获得ajax对象(上面已经写过了)

二,发送请求(分get请求和post请求,发送的方式略有不同,而且处理乱码的方法也不同,后面讲到)

1  get请求

xhr.open('get','check_name.do?username=Tom',true);

ps:true表示是异步请求,不会消除当前页面,而且也不影响用户操作

false是同步请求,不会消除当前页面,但是用户不能操作页面

xhr.onreadystatechange=f1;

xhr.send(null);

2   post请求(没有消息头,所以要加上)

xhr.open('post','check_name.do',true);

xhr.sendRequestHeader('content-type','......');

xhr.onreadystatechange=f1;

xhr.send('username'=$F(username));

三  编写服务器端的程序(这里会涉及到参数的中文乱码问题,另一篇专门写)

四  用匿名函数的方式来写处理函数

xhr.onreadystatechange=function(){

if(readyState==4&&status==200){

var txt=xhr.responseText;

$F('id')=txt;

}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值