Based on frequent questions about working with DHTMLX and Ajax, we decided to explain how it works in detail.<\/p>\n
The main function of Ajax is interaction with a server, sending requests and processing of user data in particular. dhtmlxAjax was simplified in the version 4.0.<\/p>\n
The general scripts of working with Ajax are the following:<\/p>\n
\nWe’ll use PHP as a server script, but in general any server script can generate the content.<\/p>\n
For data request either GET<\/a> or POST<\/a> requests are used. With GET we have the following:<\/p>\n The first param is the address of the server script server.php, there also can be any number of additional parameters p1=v1, p2=v2 (but don’t forget about the limit of GET request). As GET is an asynchronous request, we need the second param – a function that is called after the response is loaded (we’ll talk about it later). <\/p>\n POST request is similar to GET, but here we pass the parameters as a separate argument:<\/p>\n The examples of work with synchronous requests getSync<\/a> and postSync<\/a> you can find in our docs.<\/p>\n So, the data are requested by client. Now let’s see how to process them on the server and create a response for the client side. The most secure way is to pass data by means of using some structure, e.g. json or xml. Why them? These formats are described and they are the same in any environment. We won\u2019t show the business logic operations in our example, just the received result. Now let’s get back to the client and process the response got from the server:<\/p>\n When dealing with xml, don’t forget to make sure that the client got the correct content-type header, it should be \u201ctext\/xml\u201d:<\/p>\n And on the client side:<\/p>\n \nSometimes something goes wrong and we have an error during the request processing on the server. It can be connection error, expired session or just a bug in the server code. DHTMLX Ajax provides two events<\/a> for specifying custom handlers of server errors.<\/p>\n The Event takes place each time when the server returns the response with incorrect status (404 – Page not found, 500 – server error, and so on).<\/p>\n The event occurs only when working with xml and occurs when the returned data are not valid (response can’t be parsed as xml correctly).<\/p>\n <\/br> and<\/p>\n Syntax and behaviour are the same as in in case of dhx4.ajax.post.<\/p>\n <\/br> As we see from the example, this method allows using all types of requests to the server, using sync and async API, pass additional data or specify a function for handling the server response.<\/p>\n Also this method has “headers” param that allows specifying additional Request Headers. This API can be used in quite specific cases, for loading data from third party API and data services.<\/p>\n We tried to cover all the questions about using of DHTMLX Ajax, but if you still have something to ask, feel free to leave your comments below.<\/p>\n","protected":false},"excerpt":{"rendered":" Based on frequent questions about working with DHTMLX and Ajax, we decided to explain how it works in detail. The main function of Ajax is interaction with a server, …<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1],"tags":[33,43,14],"class_list":["post-2671","post","type-post","status-publish","format-standard","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","tag-all-posts","tag-dhtmlx-tips","tag-tips"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2671","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=2671"}],"version-history":[{"count":1,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2671\/revisions"}],"predecessor-version":[{"id":11406,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2671\/revisions\/11406"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n
\nWe’ll start with json. Let’s suppose that the server returns the following:<\/p>\n
\necho<\/span> '{status: "ok", code: 16, error: "none", id: 658}'<\/span>;<\/span>
\n?><\/span><\/div><\/div>\n
\n \/\/ use built-in function to convert string to json<\/span>
\n var<\/span> t =<\/span> dhx4.s2j<\/span>(<\/span>r.xmlDoc<\/span>.responseText<\/span>)<\/span>;<\/span>
\n if<\/span> (<\/span>t !=<\/span> null<\/span>)<\/span> {<\/span>
\n \/\/ response successfuly parsed<\/span>
\n }<\/span> else<\/span> {<\/span>
\n \/\/ response is not in json format<\/span>
\n }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
\nheader<\/span>(<\/span>"Content-Type: text\/xml"<\/span>)<\/span>;<\/span>
\necho<\/span> '<?xml version="1.0"?>'<\/span>.<\/span>
\n'<root status="ok" code="16" error="none" id="658"\/>'<\/span>;<\/span>
\n?><\/span><\/div><\/div>\n
\n var<\/span> xml =<\/span> r.xmlDoc<\/span>.responseXML<\/span>;<\/span>
\n if<\/span> (<\/span>xml !=<\/span> null<\/span>)<\/span> {<\/span>
\n \/\/ response successfuly parsed<\/span>
\n var<\/span> root =<\/span> xml.getElementsByTagName<\/span>(<\/span>"root"<\/span>)<\/span>[<\/span>0<\/span>]<\/span>;<\/span>
\n var<\/span> status =<\/span> root.getAttribute<\/span>(<\/span>"status"<\/span>)<\/span>;<\/span>
\n }<\/span> else<\/span> {<\/span>
\n \/\/ response is not in json format<\/span>
\n }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\nError handling<\/strong><\/h3>\n
REST requests<\/strong><\/h3>\n
\nAlthough we\u2019ve reviewed only POST and GET requests, dhtmlxAjax supports all REST operations – GET, POST, PUT<\/a>, DELETE<\/a>. For two last requests we can use:<\/p>\nComplex requests<\/strong><\/h3>\n
\nSometimes all the described above isn’t enough. In this case we can use dhx4.ajax.query method which allows implementing all of the mentioned operations and even more.<\/p>\n
\n method:<\/span>\u201dPOST\u201d,<\/span>
\n url:<\/span>\u201dsome.php<\/span>\u201d,<\/span>
\n data:<\/span>\u201dk1=<\/span>v1&<\/span>k2=<\/span>v2\u201d,<\/span>
\n async:<\/span>true<\/span>,<\/span>
\n callback:<\/span>function<\/span>(<\/span>)<\/span>{<\/span>...}<\/span>,<\/span>
\n headers:<\/span>{<\/span>
\n \u201cMyHeader-<\/span>Name1\u201d:<\/span>\u201dvalue\u201d,<\/span>
\n \u201cMyHeader-<\/span>Name2\u201d:<\/span>\u201dvalue\u201d
\n }<\/span>
\n}<\/span>)<\/span><\/div><\/div>\n