在SAP WebClient UI里使用AJAX进行异步数据读取-阿里云开发者社区

开发者社区> jerrywangsap> 正文

在SAP WebClient UI里使用AJAX进行异步数据读取

简介: 在SAP WebClient UI里使用AJAX进行异步数据读取
+关注继续查看

For POC purpose I need to implement the AJAX functionality in Webclient UI component.

The UI component has only one input field:


image.png


Once type “a” into the input field, it immediately displays all the records in the database table SCARR whose column carrname contains the character “a” ( without any other operation like manual refresh)


image.png


change the value in the input field, the page will display the latest matched result automatically:


image.png


Here below are the steps how to build this very simple UI component which implement AJAX functionality:


(1) Create a new UI component and a new empty view


In the html view, paste the following code:

Part1

image.png

Since we will send asynchronous xml request to ABAP backend to query records from database table. The query must be implemented in ABAP backend. Here I will create a new ICF service node to accomplish such query. The creation of ICF node and its handler class will be discussed later. In this step we just need to pass in the ICF node path ‘/sap/crm/zajax’ to metod create_url. That method will return the url which would be used as prefix of the final url of the asynchronous request to be sent to ABAP backend.


Part2

Here we define the four JavaScript functions:


image.png

comment: this function is designed to support different kinds of browsers.

image.png

comment: this function will assemble the final url which is to be sent to ABAP backend. The ABAP variable lv_url contains the full url of our icf node appended with request prefix “query=”. So within this function we just simply concatenate the string which is typed by end user in the input field.

image.png

Part3

image.png

for the complete source code which could directly be “Ctrl + C” and “Ctrl + V”, please find it in attachment.


(2) Create a new ICF node and its handler class


Use tcode SICF, create a new ICF node.


image.png


The path should be consistent with the hardcode path in the method call in step one:

image.png

Create a new handler class which implement interface IF_HTTP_EXTENSION:

image.png

Implement the method HANDLE_REQUEST as below:image.png

Monitor AJAX request and response in Chrome

It is very convenient to monitor AJAX behavior via developer tool in Chrome. Launch the U component with Chrome, click F12 to open developer tool. Then mark the checkbox “Any XHR” under “XHR Breakpoints”.


image.png


So that once there is a AJAX request sent from your application, the developer tool will automatically stop at the very code in which the XHR ( XML Header Request ) is sent:

Switch to debug mode, and then type a character like “a” in the input field, the session will stop – The UI becomes gray and

there is a tooltip “Paused in debugger” in the top-right part of the window:


image.png


In the left-most part of development tool, you can observe which view the AJAX request is sent from. In our example from prefix “bspwd_cmp_test” we could judge that currently our ui component is launched in test mode ( by clicking the test button in UI Component Workbench);

In the middle part we could see the exact line where the request is sent;


In the right most part we could check the detail value of variables used in JavaScript and the function callstack, just the same logic as ABAP debugger. For example we could get the detail of XHR like request url, and what character end user has input.


image.png


click F10 to step over until the response is returned from ABAP backend.


image.png


Put the mouse into field “responseText” and it will display the complete content of it:

image.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
javascript:使用document.getElementById读取数据为空分析
  今天写个网页,想在页面加载onLoad时,动态显示由后台其他程序传来的数据时,用document.getElementById获取控件对象总是为空。但是检查了这个id确实是存在的。在网上查阅一番后才知道了其中的原因。
886 0
使用常对象——为共用数据加装一个名为const的玻璃罩
原创案例讲解——”玻璃罩const”系列的三篇文章: 1. 使用常对象——为共用数据加装一个名为const的玻璃罩 2. 常(const)+ 对象 + 指针:玻璃罩到底保护哪一个 3. 对象更有用的玻璃罩——常引用   话题的引入:C++采取了不少有效的措施(如设private保护)以增加数据的安全性,但也可以在不同的场合通过不同的途径访问同一个数据对象。有时在无意之中的误操作
927 0
iOS网络编程之六——数据缓存类NSURLCache使用解析
iOS网络编程之六——数据缓存类NSURLCache使用解析
17 0
1.1 - C#语言习惯 - 使用属性而不是可访问的数据成员
  属性一直是C#语言中的一等公民。自1.0版本以来,C#对属性进行了一系列的增强,让其表达能力不管提高。你甚至可以为setter和getter指定不同的访问权限。   隐式属性也极大降低了声明属性时的工作量,不会比声明数据成员麻烦多少。
861 0
如何用 ajax 连接mysql数据库,并且获取从中返回的数据。ajax获取从mysql返回的数据。responseXML分别输出不同数据的方法。
开讲前,先说下网上,大部分的关于这方面的博文或者其他什么的,就我自己的感觉,第一说得不详细,第二语言不能很好的被初学者了解。 我这篇博文的标题之所以用了三句,是为了方便其他人好查找;       这里介绍的方法有什么用呢? 使用它,就可以无闪刷新页面,并且从数据库获取实时改变的数据反馈回界面,显示出来!是不是很爽,的确。
990 0
【BBED】使用bbed恢复已经删除的行数据
  在oracle中,当数据行被删除时,实际上并未真正的删除。这一行仅仅是被标记为删除,并且可利用空间计数器和指针会相应的调整。 行的状态信息存储在占用每一行的前几个字节的Row Header。
506 0
使用ABAP(ADBC)和Java(JDBC)连接SAP HANA数据库
在表DBCON里维护一条记录,指向HANA数据库。con_ENV里填入HANA数据库的主机名和端口号。如vmXXXX:30015
7 0
使用 Kafka + Spark Streaming + Cassandra 构建数据实时处理引擎
Apache Kafka 是一个可扩展,高性能,低延迟的平台,允许我们像消息系统一样读取和写入数据。我们可以很容易地在 Java 中使用 Kafka。 Spark Streaming 是 Apache Spark 的一部分,是一个可扩展、高吞吐、容错的实时流处理引擎。
2817 0
+关注
2627
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载