1. 程式人生 > >jquery,ajax,同步非同步

jquery,ajax,同步非同步

文章出處:http://www.cnblogs.com/xmphoenix/archive/2011/11/21/2257651.html

谷歌瀏覽器,F12,提示:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

這裡面有2個概念。
一個是Ajax請求分非同步和同步2種模式。如果請求是同步的,在請求返回之前執行緒會一直阻塞,如果請求是在主執行緒中發起的,那就會造成整個瀏覽器阻塞。
另外一個就是主執行緒。這段話應該是針對HTML5說的,因為在HTML5以前,JavaScript是完全的單執行緒方式,主執行緒之外不存在其他執行緒。但在HTML5中增加了Worker物件,每個Worker執行在一個獨立的執行緒中,Worker執行緒被阻塞一般是不會影響主執行緒和瀏覽器的。因此,如果非要使用同步的Ajax(這種情況應該很少見),那就放到Worker執行緒中吧,千萬千萬不要放到主執行緒裡。

之前一直在寫JQUERY程式碼的時候遇到AJAX載入資料都需要考慮程式碼執行順序問題。最近的專案用了到AJAX同步。這個同步的意思是當JS程式碼載入到當前AJAX的時候會把頁面裡所有的程式碼停止載入,頁面出去假死狀態,當這個AJAX執行完畢後才會繼續執行其他程式碼頁面假死狀態解除。 

而非同步則這個AJAX程式碼執行中的時候其他程式碼一樣可以執行。 
jquery的async:false,這個屬性 
預設是true:非同步,false:同步。

$.ajax({ 

        type: "post", 

       url: "path", 

       cache:false, 

       async:false, 

        dataType: ($.browser.msie) ? "text" : "xml", 

         success: function(xmlobj){ 

        } 

});

有了這個屬性可以相對的減少程式碼執行書序問題,但是如果用的太多,頁面假死次數太多。這樣反而導致使用者體驗不佳~!

$.Ajax()中 async 和success的官方的解釋:

async 
Boolean 
Default: true

By default, all requests are sent asynchronous (e.g. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

A function to be called if the request succeeds. The function gets passed two arguments: The data returned from the server, formatted according to the 'dataType' parameter, and a string describing the status. This is an Ajax Event.

在這裡,async預設的設定值為true,這種情況為非同步方式,就是說當ajax傳送請求後,在等待server端返回的這個過程中,前臺會繼續 執行ajax塊後面的指令碼,直到server端返回正確的結果才會去執行success,也就是說這時候執行的是兩個執行緒,ajax塊發出請求後一個執行緒 和ajax塊後面的指令碼(另一個執行緒)例:

$.ajax({  

          type:"POST", 

         url:"Venue.aspx?act=init", 

           dataType:"html", 

          success:function(result){   //function1()

             f1(); 

             f2(); 

        } 

         failure:function (result) {  

            alert('Failed');  

         }, 

  } 

  function2(); 

在上例中,當ajax塊發出請求後,他將停留function1(),等待server端的返回,但同時(在這個等待過程中),前臺會去執行function2(),也就是說,在這個時候出現兩個執行緒,我們這裡暫且說為function1() 和function2()。

          當把asyn設為false時,這時ajax的請求時同步的,也就是說,這個時候ajax塊發出請求後,他會等待在function1()這個地方,不會去執行function2(),知道function1()部分執行完畢。


相關推薦

jqueryajax,同步非同步

文章出處:http://www.cnblogs.com/xmphoenix/archive/2011/11/21/2257651.html 谷歌瀏覽器,F12,提示: Synchronous XMLHttpRequest on the main thread is dep

Ajax(使用 jQueryphp)非同步上傳圖片(二進位制流)儲存到新浪雲平臺storage

這兩天實現了一個釋出圖片的功能,可謂是一波三折,bug不斷啊,趁剛搞定,趕緊把過程寫下來,順便把程式碼傳過來。記錄了圖片在本地的儲存和 將本地的圖片以二進位制流提交到後臺php檔案 在html檔案中的操作自然就是在表單form元素中新增屬性  enctype="multi

JavaWeb筆記-23-AJAX非同步互動ajax傳送非同步請求(四步操作)

1)ajax: asynchronous javascript and xml:非同步的js和xml 作用:能使用js非同步訪問伺服器. (原本只是響應伺服器,不能傳送請求) 應用場景: 1)百度的搜尋框 2)使用者註冊時(校驗使用者名稱是否被註冊過)

$.ajax 同步/非同步(async:false/true)

我覺得這個理解挺通透的: 雖然說ajax用來執行非同步請求的比較多,但有時還是存在需要同步執行的情況的。 比如:我需要通過ajax取執行請求以返回一個值,這個值在ajax後面是需要使用到的,這時就不能用非同步請求了。這時候就需要使用到async這個屬性了。 async:true,(預設)

jQueryAjax同步頁面假死/卡頓 解決辦法

起因: 需求是日曆中選擇不同日期,請求一次ajax,返回大量資料的時候會有頁面卡頓的錯覺,錯覺來自頁面效果一直不出現,直到資料即將完成渲染前出現一瞬間; 假死原因: 瀏覽器的渲染(UI)執行緒和js

ajax同步非同步的坑

function companyValueULHtml(){ var faxhtml =''; var tel = ''; faxhtml += '<select style="width:100px;height:30px;" id="companyfaxc

React專案中使用 jQueryajax進行非同步請求操作

import React, { Component} from 'react'; import $ from 'jquery'; import Cropper from 'react-cropper'; //import 'cropperjs/dist/cropper.cs

JqueryAjax等前端技術總結一

裝糊塗的前提是已明白。 技術和生活一樣,每一步我們都要知道自己在做什麼,否則,你連裝糊塗的權利都沒有了,走馬觀花而已。 關於專案中引用的Jquery外掛 一:Jquery核心庫檔案(此檔案不包含不必要的空白字元,沒有註釋,並且所有的區域性變數名稱的長度是一個字元。在

jq——ajax同步非同步區別

同步:相當於電路的串聯 非同步:相當於電路的並聯 Ajax同步和非同步的區別 之前一直在寫JQUERY程式碼的時候遇到AJAX載入資料都需要考慮程式碼執行順序問題。 最近的專案用了到AJAX同步。這個同步的意思是當JS程式碼載入到當前AJAX的時候會把頁面裡

使用JQuery編寫AJax實現非同步請求

上一篇已經介紹了關於Ajax的作用和使用場景,並且介紹了使用JS進行編寫的AJax,下面就直接介紹使用JQuery版本得Ajax非同步重新整理。 $. post()以post請求方式傳送 ajax 格式:JQuery.post ( url , [data] , [callb

利用jqueryajax實現非同步請求傳送資料到後臺

很多時候,作為一個使用者在前臺操作的時候,處理資料的時候並不一定要後臺實時處理然後再返回訊息,這樣,我們可以實用jquery的$.ajax方法實現非同步請求,在頁面不重新整理的情況下,將資料傳到後臺,

JQuery使用Ajax同步提交資料

Ajax請求預設的都是非同步的 如果想同步 async設定為false就可以(預設是true) var html = $.ajax({   url: "some.php",   async: false }).responseText; 或者在全域性設定Ajax屬性 $.a

jQuery基礎(Ajaxload()getJSON()getScript()post()ajax()同步/異步請求數據)

發送請求 它的 fun 使用 json格式 單元素 生成 set log 1.使用load()方法異步請求數據 使用load()方法通過Ajax請求加載服務器中的數據,並把返回的數據放置到指定的元素中,它的調用格式為: load(url,[data],[callb

jquery ajax屬性async(同步非同步)

在jquery的ajax中如果我們希望實現同步或者非同步我們可以直接設定async發生為真或假即可true false,下面舉幾個jquery ajax同步和非同步例項 一.什麼是同步請求:(false)        同步請求即是當前發出請求後,瀏覽

ajax同步非同步簡單的介紹

星期天一個人搗鼓個人網站的事情,read8686.com,如果哪位開發者又歡迎大家一起探討,在文章的有我的微信                      就是這樣的一個註冊的頁面,其

Ajax同步非同步的區別如何解決跨域問題

同步的概念應該是來自於OS中關於同步的概念:不同程序為協同完成某項工作而在先後次序上調整(通過阻塞,喚醒等方式).同步強調的是順序性.誰先誰後.非同步則不存在這種順序性. 同步:瀏覽器訪問伺服器請求,使用者看得到頁面重新整理,重新發請求,等請求完,頁面重新整理,新內容出現,使用者看到新內容,進行下一步操作。

續上篇改用struts2實現JQueryajax非同步請求

······························································································································· 前面的兩篇因為是在csdn文字上編

jQuery根據文字框輸入實時模糊查詢全詞匹配 ajax非同步查詢

/* ***人員檢索start (ajax實時後臺獲取最新資料) */     //按姓名檢索 /* function submitForm_serch() { var devicdids = $("#deviceid").val(); var search_roles=$("#Poli

jQueryajax async同步非同步介紹

專案中有這樣一個需求,使用ajax載入資料返回頁面並賦值,然後前端取出該值 這其中涉及到程式碼的順序問題,有時後臺還未返回資料,但已執行後面程式碼, 所以就會造成取不到值   $.ajax({ type: "post", url: "admin/PfmOptionRul

JS —— 筆記$("document").ready() 中ajax 與 $.ajax() 及同步非同步優先順序問題

jQuery 所有方法(包括 $.load()等)預設都是非同步執行的,所以,它們具有相同的執行順序優先順序。此時誰先執行取決於位置前後順序。 關鍵想記錄的一點是,若將某個這類AJAX 方法改為同步