Design, development and application of the webservice client of js

Welcome to: http://observer.blog.51cto.com

Webservcie is a technology that supports cross-language cross-platform development. servers can be built in various computer languages, and clients can also be developed in various computer languages. If a server is built in java, C ++, or php, other languages can develop the client based on its open wsdl, then, call the method just like calling the method of the local project. This article uses js to develop the client. The example relies on the previous article: CXF to build a webService server. If you do not understand, read this article first and then read this article.
There are many methods to compile the webservice client using js. It is also possible to use the wsdl2js command that comes with CXF, but the js Code produced by this command is simply unacceptable, too messy, and it is difficult to control the code of a large table, forget it! This section describes how to write a client using js.
Step 1: write xml
Write xml based on the published wsdl. There is a problem here. If you don't know the wsdl, how can you write it? It is also prone to errors. At that time, I don't know whether my xml is wrong or the js Code is wrong. Here we will introduce a very useful tool for implementing functional/load/compliance tests for web Services and web Services: soapui. This tool can generate xml based on wsdl and then test.
Download soapui because the file is too large, I will upload the liunx line, windows friends can do their best to search on the Internet .) : Soapui-4.5.1_for_liunx
Download decompress, enter the soapui-4.5.1/bin after running soapui. shwindows friends run their own installed soapui) such:

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1134213207-0.png "title =" webservicejsclient 1.png "/>

Right-click Projects --> new soapui project and customize the project name in the new window.) Fill in the wsdl and initial wsdl/wadl columns, for example:

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1134211010-1.png "title =" webservicejsclient 2.png "/>

Click OK to view the webservice to be connected under projects. Double-click request 1 under the corresponding webservcie method and you will see the xml automatically generated by soapui according to the wsdl, find the variable name of the method defined in xml, fill in the variable, and click the run button in the upper-left corner of the request 1 window for testing. The webservice test is successful, for example, my test is as follows:

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1134211C0-2.png "title =" webservicejsclient 3.png "/>

Step 2: Compile js Code
First, obtain the Secure Access Object of the HTTP protocol, and then send the request with the following code:

Function serviceHelloWrod () {var serviceWsdl = 'HTTP: // 127.0.0.1: 8080/webServiceCXF/services/Service? Wsdl '; // The wsdl var serviceUrl = 'HTTP: // www.observer.com/service' to connect to webservice; // a url defined by myself. This value is the server end, targetNamespace during interface definition // The serviceWsdl and serviceUrl will not be changed easily once the server is defined and run, so the two values are defined here in the js file function getXMLRequester () {// This method gets the XMLHttpRequest object var xmlhttp_request = false for secure HTTP access; try {if (window. activeXObject) {xmlhttp_request = new ActiveXObject ('Microsoft. XMLHTTP '); // in IE 5 and IE 6, ActiveXObject () constructor} else if (window. XMLHttpRequest) {xmlhttp_request = new XMLHttpRequest (); if (xmlhttp_request.overrideMimeType) {xmlhttp_request.overrideMimeType ('text/xml') ;}} catch (e) {xmlhttp_request = false; alert ('Sorry your browser version is too low, please update after use. ');} return xmlhttp_request;}; var xmlhttp = getXMLRequester (); function requestByPost (data) {// to webs Ervice sends a request to get the returned xml, and then parses the xml to get the returned var URL = serviceWsdl; xmlhttp. open ('post', URL, false); xmlhttp. setRequestHeader ('content-type', 'text/xml; charset = UTF-8 '); xmlhttp. setRequestHeader ('soapaction', 'HTTP: // dao.wfservice.ws.emolay.com '); xmlhttp. send (data); // send the request var str = xmlhttp. responseText; // xml var xmlDoc = new DOMParser (). parseFromString (str, 'text/xml'); // Parse xml var result = xmlDoc. getEle MentsByTagName ('result'); return result ;}; function getGradeName (toid) {// edit the xmldata variable sending the request), and then call the requestByPost method to request webservice, here xml can be used to automatically generate var data = '<soapenv: Envelope xmlns: soapenv = "http://schemas.xmlsoap.org/soap/envelope/" xmlns: ser = "' + serviceUrl + '"> '; data + = '<soapenv: Header/>'; data + = '<soapenv: Body>'; data + = '<ser: getGradeName> '; data + = '<toid>' + toid + '</toid>'; data + = '</Ser: getGradeName>'; data + = '</soapenv: Body>'; data + = '</soapenv: Envelope> '; var result = requestByPost (data); var str = []; for (var I = 0; I <result. length; I = I + 1) {str. push (result [I]. firstChild. nodeValue); // because webservice return is not necessarily a string, it may also be an array, and so on. Therefore, the xml tag does not necessarily have only one result, // It must be parsed one by one, then get the value in it. Of course, if you really determine the number of returned values of the server, you can also fix it} return str ;}; function getTest (toid) {// connect webservice return "test: "+ toid;} function getMeans (means) {// return method if (means =" getGradeName ") {return getGradeName;} Based on the given Parameter ;} else if (means = "getTest") {return getTest;} else {return null;} return getMeans ;}

At this point, the client has been developed, and the above technical issues are not mentioned, and the code has been clearly annotated. If you want to see more details, you can download the attachment, here we need to talk about the design:
First of all, the client js Code is written using the closure), which is highly portable. You can use it like a component to ensure that no repeated serviceHelloWrod methods are called on the page, don't worry about making js errors because the variables or methods in them are repeated.
Second, the client builds a method that imitates the ing in java. After initialization, The getMeans method is returned. This method can return a webservcie connection method based on the parameters passed to it, so that the caller can call it, if this method is not available, null is returned and the call fails. Just like ing in java, you don't need to know what this method is. As long as you know that webservice has this method, you can get this method based on a string and then pass the parameter to call it. This design is also easy to expand. If methods are added to webservice, for example, the getTest method is added above, you can directly add function getTest (toid) to js ), then, add the judgment that can be returned in getMeans.
Step 3: Application Client
Initialize the client, return the corresponding method, and then call it. For example, you can call it in html as follows:

<Script type = "text/javascript"> var toid = 123; var means = serviceHelloWrod (); // initialize var str = means ("getGradeName") (toid ); // call method </script>

My applications are as follows:

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"> 
(Sorry, after the above html code is put on and released, it will always show messy code. If you cannot understand it, you can download the attachment.) Here, the toid and other parameters that need to be dynamically generated, it can be generated Based on jsp, php, and other dynamic website creation languages. Finally, you can analyze your specific cases based on how your application is applied.
Here, the design, development, and application of the js webservice client have been completed, and a project is attached. If you are interested in java webservice, you can refer to this article: design, development, and application of the webservcie client in java
I will continue to post articles on technology and design later. Thank you for your attention.

This article is from the "Observer * unrestrained" blog, please be sure to keep this source http://observer.blog.51cto.com/4267416/1244274