AJAX服务器异步通信
来源:互联网 发布:淘宝售后客服怎么应聘 编辑:程序博客网 时间:2024/04/30 19:27
首先简单的了解一下下什么是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服务器异步通信
- Ajax异步通信
- AJAX实现异步通信
- ajax实现异步通信
- AJAX异步交互通信
- AJAX 实现异步通信
- AJAX异步通信
- 服务器异步通信
- ajax异步访问服务器
- 轻松掌握AJAX异步通信
- 轻松掌握AJAX异步通信
- 原生Ajax实现异步通信
- JavaScript Ajax实现异步通信
- Ajax 网页和服务器通信
- Ajax异步通信中文乱码的解决
- 轻松掌握AJAX(Jquery)异步通信
- AJAX-实现服务端客户端异步通信
- AJAX-实现服务端客户端异步通信
- C专家编程
- 关于centos ssh无密登录失败的记录
- 文件乱问题
- 黑马程序员:正则表达式介绍:QQ匹配、E-mail提取应用
- 使用Web.config
- AJAX服务器异步通信
- php 文件比较类
- SharePoint 2013 REST Service - CRUD on list items
- 页面中添加flash动画。
- IE兼容设置
- centos livecd 开启 ssh
- android_退出
- 开始学习OSG
- AutoCompleteExtender详细介绍(一)