Sencha Touch:Ajax

Ajax是异步JavaScript和xml。Ajax提供了无需刷新整个页面即可获取和加载数据的功能。

Sencha Touch提供了使用ajax加载和存储数据的功能。在ajax中,我们可以从同一域中获取和存储数据。它不允许我们在不同域之间交换数据。

例如,如果您使用域www.myApp.com,则可以在同一域的不同页面之间交换数据,例如www.myApp.com?page=1www.myApp.com/#Page.html。但是,如果您位于www.myApp.com域,并且想与其他域(例如,www.myNewApp.com)交换数据,那么它将不允许您这样做。

即使Ajax有此限制,Sencha Touch也使您可以灵活地在不同域之间交换数据,我们将在后续章节中学习。

简单的Ajax请求

Ext.Ajax.request({
   url: 'myUrl', Method: 'GET', timeout: 5000, params: {
      username: 'Ed', id: '1234'
   },
   headers: {
      "Content-Type": "application/json"
   }, 
   success: function(response) {
      console.log("The request was successfull");
   }, 
   failure: function(response) {
      console.log("Request is failed");
   }, 
   callback: function(options, success, response) {
      console.log(response.responseText);
   }
});

Ext.Ajax.request是发出ajax请求的方法。

在ajax调用中传递了不同的参数。第一个参数是发出Ajax请求的域的URL

第二个参数是确定发出ajax请求的目的的方法,例如GET,POST,PUT,DELETE。Get是仅获取数据。POST是用于创建新数据并保存它。PUT用于更新或替换服务器上的现有数据。DELETE是删除一些记录。

下一个参数是参数,其中我们以JSON的形式发送数据,这有助于获取和存储数据。

标头参数显示服务器为请求发送的数据类型。在上面的示例中,返回的数据将为json。

最有用的方法中的回调,使整个ajax概念异步。发送请求后,服务器将处理该请求并将响应发送回去。一旦获得响应,便会调用回调函数。基于此,我们可以获得成功,失败或正常的回调。

因此,如果响应成功,则将调用成功回调,如果响应失败,则将调用失败回调。如果我们没有定义任何成功或失败,则将调用常规回调。在回调中,只有在收到特定响应后,我们才能编写要处理的代码。

有时,请求花费的时间太长,无法回复,并且发生超时。默认超时时间为30秒。我们可以通过ajax请求中传递的timeout参数来自定义它。如上例所示,超时为5000毫秒。一旦发生超时,就会调用失败函数。

也可以通过调用中止请求。

var myReq = Ext.Ajax.request({
   url: 'myUrl', failure: function(response) {
      console.log(response.aborted); 
   }
});
Ext.Ajax.abort(myReq);

请求中止后,将调用失败回调。如果response.aborted返回true,则由于请求中止而导致失败。

跨域请求

Ajax请求只能在同一域中,但是,Sencha提供了进行跨域请求的功能。

现代浏览器提供了一项新功能CORS(跨源请求共享),因此可以在没有浏览器安全限制的情况下发出跨域请求。如果您的网络服务器启用了CORS,则在Sencha Touch中,您需要在ajax请求中提供参数,然后才能进行跨域请求。

Ext.Ajax.request({
   url: 'https://www.myNewDomain.com/newPage.html', withCredentials: true, useDefaultXhrHeader: false
});

作者:terry,如若转载,请注明出处:https://www.web176.com/senchatouch/1647.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年1月25日 下午8:54
下一篇 2021年1月25日 下午9:00

相关推荐

发表回复

登录后才能评论