AJAX服务器异步通信

简介: 首先简单的了解一下下什么是Ajax:       AJAX是一种运用JavaScript和可扩展编辑语言(XML),在网络浏览器和服务器之间传送或接收数据的技术。


首先简单的了解一下下什么是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       从服务器返回的状态文本信息,例如OKNot Found(未找到)

最后我们一起了解一下实现代码(有详细的注释,看了就懂):

[javascript]  view plain copy
  1. <script language ="javascript">  
  2.    //定义一个将指向XMLHttpRequest对象的变量  
  3.    var xmlHttp = null;  
  4.    //定义一个函数用于创建XMLHttpRequest对象  
  5.    function createXMLHttpRequest(){  
  6.        if(window.ActiveXObject){            //表示当前浏览器是IE  
  7.            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
  8.        }  
  9.        else if(window.XMLHttpRequest){        
  10.            xmlHttp = new XMLHttpRequest();     //表示当前浏览器不是IE,如:firefox  
  11.        }  
  12. }  
  13.    
  14.    //定义一个函数用于启动与服务器的异步通信  
  15.    function begin(){  
  16.        createXMLHttpRequest();                 //调用createXMLHttpRequest函数  
  17.        xmlHttp.onreadystatechange = processor;     //将事件触发器绑定到 processor上  
  18.        xmlHttp.open("GET""test.xml"true);     //使用GET方法建立对服务器资源test.xml的一个异步调用  
  19.        xmlHttp.send(null);                      //向服务器发送请求 ,参数为null  
  20. }  
  21.    
  22.    //定义一个状态处理函数用于处理状态触发器的状态改变  
  23.    function processor(){  
  24.        //如果处理请求完成  
  25.        if(xmlHttp.readyState == 4){  
  26.            //如果服务器返回状态为成功  
  27.            if(xmlHttp.status = 200){  
  28.                 //将从服务器返回的内容报告给用户  
  29.                 alert("从服务器返回的内容为:"+ xmlHttp.responseText);  
  30.            } else{  
  31.                 alert("请求失败,错误码="+ xmlHttp.status);  
  32.            }  
  33.        }  
  34.     }  
  35. </script>  
相关文章
|
11月前
|
网络协议 开发者 Python
Socket如何实现客户端和服务器间的通信
通过上述示例,展示了如何使用Python的Socket模块实现基本的客户端和服务器间的通信。Socket提供了一种简单且强大的方式来建立和管理网络连接,适用于各种网络编程应用。理解和掌握Socket编程,可以帮助开发者构建高效、稳定的网络应用程序。
587 10
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
218 22
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
330 3
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
296 4
|
网络协议 Unix Linux
一个.NET开源、快速、低延迟的异步套接字服务器和客户端库
一个.NET开源、快速、低延迟的异步套接字服务器和客户端库
295 4
|
存储 监控 NoSQL
Redis的实现二: c、c++的网络通信编程技术,让服务器处理多个client
本文讨论了在C/C++中实现服务器处理多个客户端的技术,重点介绍了事件循环和非阻塞IO的概念,以及如何在Linux上使用epoll来高效地监控和管理多个文件描述符。
234 1
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
262 3
|
网络协议 C# 开发者
WPF与Socket编程的完美邂逅:打造流畅网络通信体验——从客户端到服务器端,手把手教你实现基于Socket的实时数据交换
【8月更文挑战第31天】网络通信在现代应用中至关重要,Socket编程作为其实现基础,即便在主要用于桌面应用的Windows Presentation Foundation(WPF)中也发挥着重要作用。本文通过最佳实践,详细介绍如何在WPF应用中利用Socket实现网络通信,包括创建WPF项目、设计用户界面、实现Socket通信逻辑及搭建简单服务器端的全过程。具体步骤涵盖从UI设计到前后端交互的各个环节,并附有详尽示例代码,助力WPF开发者掌握这一关键技术,拓展应用程序的功能与实用性。
927 0
|
4月前
|
弹性计算 运维 安全
阿里云轻量应用服务器与云服务器ECS啥区别?新手帮助教程
阿里云轻量应用服务器适合个人开发者搭建博客、测试环境等低流量场景,操作简单、成本低;ECS适用于企业级高负载业务,功能强大、灵活可扩展。二者在性能、网络、镜像及运维管理上差异显著,用户应根据实际需求选择。
362 10
|
4月前
|
运维 安全 Ubuntu
阿里云渠道商:服务器操作系统怎么选?
阿里云提供丰富操作系统镜像,涵盖Windows与主流Linux发行版。选型需综合技术兼容性、运维成本、安全稳定等因素。推荐Alibaba Cloud Linux、Ubuntu等用于Web与容器场景,Windows Server支撑.NET应用。建议优先选用LTS版本并进行测试验证,通过标准化镜像管理提升部署效率与一致性。