首先简单的了解一下下什么是Ajax:
AJAX是一种运用JavaScript和可扩展编辑语言(XML),在网络浏览器和服务器之间传送或接收数据的技术。
AJAX是WEB2.0的核心之一.AJAX技术运用于浏览器中,使向服务器索取网页的部分信息成为可能.
再简单的了解一下下它的工作原理:
AJAX的工作原理相当与在用户和服务器之间加了一个中间层,使用户请求与服务器响应异步化(我们经常用它来做数据校验)。这样还可以把以前的一些服务器负担的工作转交给客户端,利用客户端闲置的处理能力来处理这些工作,减轻服务器和宽带的负担,同时也可以缩短用户等待时间,提高工作效率。
这样说有点抽象,看两个图就明白了:
上图为没有使用异步通信技术的事件请求,明显的看出只有得到通知后才能继续输入密码和其它需要的信息,这样是不是很浪费时间,有时候时间长了,用户也可能会等的不耐烦,放弃注册也不是没有可能。
上图为使用了异步通信技术后的事件请求,用户不用等待消息的返回,继续输入就可以了,当用户输入到下面的某一项时,通知的消息可能就返回了,在相应的地方给出提示,这样也不影响用户的操作,是不是很友好,很强大。
AJAX的核心是JavaScript对象XMLHttpRequest:
XMLHttpRequest提供客户端同HTTP服务器异步通信的协议.通过这个协议,AJAX可以使页面像桌面程序一样同服务器端进行数据层面的交换,而不必每次都刷新页面,也不用每次都将数据处理的工作都交给服务器来做,这样既减轻了服务器负担又加快了响应速度,缩短了用户等待的时间.
了解几个XMLHttpRequest对象的方法:
Abort()
|
停止当前请求
|
getAllResponseHeaders()
|
返回HTTP请求的所有响应头部的键/值字符串
|
getResponseHeader("header")
|
返回指定头部属性的字符串值
|
Open("method", "url", true)
|
建立对服务器的调用。Method参数可以是GET POST PUT, url参数可以是相对URL或绝对URL,true/false代表是否要进行异步通信
|
Send(content)
|
向服务器发送请求(要是get提交参数为null)
|
setRequestHeader("header","value")
|
为指定头部属性设置指定值
|
了解几个XMLHttpRequest对象的属性:
Onreadystatechange状态改变的时间触发器,通常绑定一个JavaScript 函数,每当状态发生改变时,就调用该函数
readyState 请求的状态,有5个可取值:
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成
responseText 从服务器返回的文本形式的响应内容
responseXML 从服务器返回的兼容DOM的XML文档对象
Status 从服务器返回的状态码,例如404="文件找不到"、 200 =
"成功"
statusText 从服务器返回的状态文本信息,例如OK或Not Found(未找到)
最后我们一起了解一下实现代码(有详细的注释,看了就懂):
<script language ="javascript">
//定义一个将指向XMLHttpRequest对象的变量
var xmlHttp = null;
//定义一个函数用于创建XMLHttpRequest对象
function createXMLHttpRequest(){
if(window.ActiveXObject){ //表示当前浏览器是IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest(); //表示当前浏览器不是IE,如:firefox
}
}
//定义一个函数用于启动与服务器的异步通信
function begin(){
createXMLHttpRequest(); //调用createXMLHttpRequest函数
xmlHttp.onreadystatechange = processor; //将事件触发器绑定到 processor上
xmlHttp.open("GET", "test.xml", true); //使用GET方法建立对服务器资源test.xml的一个异步调用
xmlHttp.send(null); //向服务器发送请求 ,参数为null
}
//定义一个状态处理函数用于处理状态触发器的状态改变
function processor(){
//如果处理请求完成
if(xmlHttp.readyState == 4){
//如果服务器返回状态为成功
if(xmlHttp.status = 200){
//将从服务器返回的内容报告给用户
alert("从服务器返回的内容为:"+ xmlHttp.responseText);
} else{
alert("请求失败,错误码="+ xmlHttp.status);
}
}
}
</script>
下一篇博客将介绍AJAX的优缺点以及Jquery是如何对它进行封装方便我们轻松实现异步通信。
分享到:
相关推荐
AJAX的工作原理相当与在用户和服务器之间加了一个中间层,使用户请求与服务器响应异步化。这样还可以把以前的一些服务器负担的工作转交给客户端,利用客户端闲置的处理能力来处理,减轻服务器和宽带的负担。 AJAX是...
用ajax写的实现客户端和服务器之间的异步通信,很小的demo ,适合初学者使用。
ajax异步自动填充信息,类似于百度查询的简单demo,希望能帮到大家
Ajax存在问题就是在异步情况下无法控制什么时候完成记录显示,本人根据回调方法封装了个类,能够将回调方法用参数方式指定,使ajax调用结束后调用回调方法,吧内容传回。ajaxSubmitToDivCallback(显示内容div,提交...
《ASP.NET.AJAX程序设计.第II卷.客户端Microsoft.AJAX.Library与异步通信层》pdf版part2
精通javaweb整合开发中ajax技术章节,主要讲ajax,与ajax框架json和各种ajax标签,非常好的实例。
这篇文章把AJAX异步处理解吸得淋淋尽致
ajax异步调用实例
有五个值(0,1,2,3,4),表示ajax对象与服务器通信的状态。其中,4表示ajax对象已经获得了服务器返回的所有的数据。 responseText 获得服务器返回的文本。 responseXML 获得服务器返回的xml文档。 status 获得服务器...
很好的ajax异步上传插件是jquery
Ajax异步请求分页
Ajax异步调用框架 程序介绍 不错的代码 共享一下
ajax 异步传参数 获取json 循环拼接表头和数据展示
ajax 异步上传 需要的js文件 ajax 异步上传
ajax异步上传文件实现,主要是使用h5的技术,大家可以试试看
Ajax异步请求!PRIVATE。
包括对JavaScript 在面向对象、DOM 操作方面的扩展、ASP.NET AJAX 客户端组件、ASP.NET AJAX XML脚本等,还介绍了ASP.NET AJAX 框架为开发者在客户端用JavaScript 与服务器端通信而创造的种种便利条件,包括直接调用...
主要为大家详细介绍了JavaScript Ajax实现异步通信的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
ajax异步