ajax概要的Javascript实现

ajax应用非常流行,ajax的优势大家都知道,具体的说不上,缺点真的很多,比如浏览器的功能受损,用URL打开界面是不完全一样的,而且安全性能,因为有这么多的缺点,我们会停止使用ajax的步伐。

下面是一个表单示例,它是实现Ajax的步骤的一个示例:

1。首先从表单中获取我们需要的数据。



2。然后建立相应的URL



三.集onreadystatechange函数



4。打开连接



5。发送请求

以上是ajax步骤的实现,下一步是简要总结。

首先是对XRH型目标的确立。


功能creatxhr(){
VaR XHR = null;
如果(窗口。XMLHttpRequest){
新的XMLHttpRequest(XHR)=;
其他{ }
XHR =新的ActiveX对象(微软电子);
}
}


写这篇文章有点完整:


功能creatxhr(){
VaR XHR = null;
尝试{
XHR =新的ActiveX对象(MSXML2. XMLHTTP );
} catch(e){
{试
XHR =新的ActiveX对象(微软。XMLHTTP );
}捕获(E2){
XHR = false;
}
}
如果(!XmlHttp typeof XMLHttpRequest!= 'undefined){
新的XMLHttpRequest(XHR)=;
}
}


所有这些都与IE浏览器和非IE浏览器兼容。

然后是发送Ajax请求的时候了,以表单项国家为例。


功能callreqest(){
VaR国= document.getelementbyid(国家的)的价值;
如果((国= = null)| |(国= =))
返回;
var url = 'example。phpcountry = + encodeURIComponent(国);
XHR onreadystatechange =更新;
Xhr.open(' ',网址,真的);
Xhr.send(空);
}


国家表格项目获得以上。onreadystatechange函数是一个事件的发生变化引起的,它可以被用来确定是否需要采取行动。

onreadystatechange函数如下:


功能onreadystatechange(){
如果((XHR。onreadystatechange = = 4)((XHR。状态= = 200)| |((XHR。状态> 200)(XHR。国家< 300)))){
document.getelementbyid('countrycode的价值= xhr.responsetext);
}
}


onreadystatechange等于4的时候,资源是完全下载到客户端,可用于在同一时间,查看状态代码,200至300,左闭右开,你可以刷新,这里只是简单地给responseText形式,当然,也可以返回XML和其他相关数据相关内容,查看其他相关介绍。

最后,作为触发Ajax,您可以在窗体中添加国OnChange事件让用户触发Ajax在进入形式。

ps ajax摘要

1。创建XHR对象





方法
解释


新的ActiveX对象(微软。XMLHTTP)
IE5和IE6,这是适合我的支持window.activexobject


新的XMLHttpRequest()
适用于IE7 + / / / Safari浏览器FF /歌剧等等





2、XHR对象的属性和方法





属性或方法
解释


readyState
通信状态,值为0~4,见下文


onreadystatechange
事件触发此事件时发生的变化


responseText
服务器返回的文本格式文档


响应**毫升
服务器返回的xml格式文档


现状
状态代码,如100200404500,等等。


StatusText
与状态代码相对应的文本(未找到)


中止()
中止当前请求


打开(方法,URL)
打开一个请求


发送(args)
发送请求


setrequestheader(键,值)
设置请求的头部


getresponseheader(关键)
获取响应的头部值


getallresponseheaders()
以键值的形式返回所有标头信息





3、readyState属性





代码
解释



代表未初始化状态。创建一个未初始化的XHR对象



它表示连接状态。已调用open方法来准备发送请求。



代理发送状态。调用方法已被调用,响应数据尚未获得。



代表正在接收状态,已经接收到HTTP响应的头信息,并正在接收响应内容。



代表已被加载,响应内容已全部收到。