摘要:公司在1186信息通信客户服务工作成果基础上,自主研发1186信息通信客户服务app平台,与1186信息通信系统用户间构建一个不受时间、空间限制的“零距离”沟通平台。本文重点论述了在1186app平台研发过程中使用Ajax技术实现客户端与服务端的信息交互,使服务端更好的与客户端进行交互,减少用户操作的等待时间,不间断用户的操作,为用户提供更为流畅的操作体验,同时提升了应用程序的性能。
关键词:Ajax技术;实现;信息交互
0.引言
公司在1186信息通信客户优质服务工作开展过程中,不断探索服务模式的创新以及信息实时交互,为构建全方位、立体式的信息通信客户服务支撑体系,与1186信息通信系统用户间构建一个不受时间、空间限制的“零距离”沟通平台,公司自主研发1186信息通信客户服务app平台,以开辟新的1186信息通信服务途径,进一步提升1186信息通信客户服务能力。
1.1186app平台设计
1.1平台总体设计
1186app平台功能上主要实现手机端信息通信相关报修申请、报修处理,以及信息通信系统相关知识、消息的资源共享等。总体设计如图1:
平台采用了四层架构模型:终端应用层、业务服务层、应用开发层、数据层。终端应用层为用户提供了运行平台,同时支持Android和Ios操作系统;业务服务层是为用户提供业务功能操作界面;应用开发层:客户端主要负责处理业务间逻辑,服务端负责对与数据库的数据交互,以完成数据存取;数据层主要完成数据的存储。平台由不同的逻辑块组成,降低了系统的开发与维护成本。
1.2平台技术框架
平台应用开发层总体分为客户端、服务端、数据库端三部分。客户端用于app界面展示,主要使用HTML+JS技术,服务端主要负责对数据库执行各种操作,完成数据存取,主要使用servlet技术。客户端使用Ajax技术向服务端发起服务请求,并接受服务端返回的响应信息。
3. Ajax技术在1186app平台中的应用
1186app平台所有涉及客户端与服务端交互部分均使用Ajax技术。如用户登录信息验证、故障申报及故障处理结果提交、故障信息及消息知识查询等方面。
下面以用户登录信息验证为例,对Ajax技术在平台中的应用进行阐述:
用户在登录界面输入用户登录帐号、密码后,系统会自动完成用户登录信息的验证,并向用户返回相应的提示信息。主要代码实现方式如下:
……………
}
……………
用户登陆:
帐 号:
密 码:
登 陆
……………
……………
/*
* ----用户登陆---
*/
$('#USER_login').click(function() {
var V_USER_ID = $("#USER_ID").val()
var V_USER_PASS = $("#USER_PASS").val()
varmydata = {
jp_userid : V_USER_ID,
jp_userpass : V_USER_PASS
};
$.ajax({
type : "post",
url : "http://*.*.*.*:7001/CSS/servlet/LOGINVERIFY",
dataType : 'jsonp',
data :mydata,
jsonp : 'callback',jquery
timeout : 3000,
scriptCharset : 'utf-8',
success : function(res) {
alert("登陆成功!")
……………
}
……………
});
});
……………
上述代码中,使用HTML代码实现登陆页面的“登陆名”、“登陆密码”的输入框及“登陆”按钮的展现,其中“登陆”按钮相应事件触发将页面输入的“登陆名”、“登陆密码”的输入信息提交服务器端,这个过程采用Ajax异步数据传输方式,Ajax将对数据库的访问结果通过局部刷新页面的方式返回页面。
4. Ajax技术在1186app平台应用的优势
Ajax技术是对“用户提交请求,然后等待系统重新显示页面”的同步交互模式的优化。传统方式下通常采用表单方式来完成用客户端和服务端之间的数据交互,在用户提交表单后,通过刷新整个页面的方式显示新数据,如果网速比较慢或者服务器繁忙,则用户提交表单后,势必长时间处于等待状态、页面也会处于空白状态很长时间。采用Ajax技术之后的用户登录验证则会体现出很大的优势,它可以在不刷新页面的情况下直接验证,即使用客户端加载的中间层(Ajax引擎)来处理用户请求的一部分数据,并通过页面的局部即时更新,将更新后的结果快速显示在页面上,用户无需等待处理结果可以继续发送请求。其优势主要体现在:
1) 无刷新更新数据
能够在不刷新整个页面的前提下实现客户端与服务端的通信,这使得APP应用程序更为迅捷的响应用户请求,减少了用户等待时间,使用户操作更流畅、更高效。
2) 与服务端异步通信
这种通信方式,不需要打断客户端的操作,具有更加迅速的响应能力,减少了客户端与服务端之间不必要的数据传输、时间、降低网络上数据流量。
5 结语
平台采用HTML+JS+JAVA技术模式实现,客户端与服务端逻辑独立,在客户端与服务端交互过程中应用了Ajax技术,实现客户端与服务端的信息交互,使服务端更好的与客户端进行交互,减少用户的等待时间,不间断用户的操作,同时减少了冗余请求和响应对应用造成的压力,同时提升了应用程序的性能。
参考文献:
[1]《网页程序设计HTML5、JavaScript、CSS、XHTML、Ajax(第4版)》陈惠贞.清华大学出版社2016年1月出版
[2]《AJAX从人门到精通》陈华.清华大学出版社2008年10月出版