整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          在 JS 中如何使用 Ajax 來進行請求

          人已經過原 Danny Markov 授權翻譯

          在本教程中,我們將學習如何使用 JS 進行AJAX調用。

          1.AJAX

          術語AJAX 表示 異步的 JavaScript 和 XML

          AJAX 在 JS 中用于發出異步網絡請求來獲取資源。當然,不像名稱所暗示的那樣,資源并不局限于XML,還用于獲取JSON、HTML或純文本等資源。

          有多種方法可以發出網絡請求并從服務器獲取數據。我們將一一介紹。

          2.XMLHttpRequest

          XMLHttpRequest對象(簡稱XHR)在較早的時候用于從服務器異步檢索數據。

          之所以使用XML,是因為它首先用于檢索XML數據。現在,它也可以用來檢索JSON, HTML或純文本。

          事例 2.1: GET

          function success() {
            var data = JSON.parse(this.responseText)
            console.log(data)
          }
          
          function error (err) {
            console.log('Error Occurred:', err)
          }
          
          var xhr = new XMLHttpRequest()
          xhr.onload = success
          xhr.onerror = error
          xhr.open("GET", ""https://jsonplaceholder.typicode.com/posts/1")
          xhr.send()
          

          我們看到,要發出一個簡單的GET請求,需要兩個偵聽器來處理請求的成功和失敗。我們還需要調用open()和send()方法。來自服務器的響應存儲在responseText變量中,該變量使用JSON.parse()轉換為JavaScript 對象。

          function success() {
              var data = JSON.parse(this.responseText);
              console.log(data);
          }
          
          function error(err) {
              console.log('Error Occurred :', err);
          }
          
          var xhr = new XMLHttpRequest();
          xhr.onload = success;
          xhr.onerror = error;
          xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
          xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
          xhr.send(JSON.stringify({
              title: 'foo',
              body: 'bar',
              userId: 1
            })
          );
          

          我們看到POST請求類似于GET請求。我們需要另外使用setRequestHeader設置請求標頭“Content-Type” ,并使用send方法中的JSON.stringify將JSON正文作為字符串發送。

          2.3 XMLHttpRequest vs Fetch

          早期的開發人員,已經使用了好多年的 XMLHttpRequest來請求數據了。現代的fetch API允許我們發出類似于XMLHttpRequest(XHR)的網絡請求。主要區別在于fetch()API使用Promises,它使 API更簡單,更簡潔,避免了回調地獄。

          3. Fetch API

          Fetch 是一個用于進行AJAX調用的原生 JavaScript API,它得到了大多數瀏覽器的支持,現在得到了廣泛的應用。

          3.1 API用法

          fetch(url, options)
              .then(response => {
                  // handle response data
              })
              .catch(err => {
                  // handle errors
              });
          

          API參數

          fetch() API有兩個參數

          1. url是必填參數,它是您要獲取的資源的路徑。
          2. options是一個可選參數。不需要提供這個參數來發出簡單的GET請求。
          • method: GET | POST | PUT | DELETE | PATCH
          • headers: 請求頭,如 { “Content-type”: “application/json; charset=UTF-8” }
          • mode: cors | no-cors | same-origin | navigate
          • cache: default | reload | no-cache
          • body: 一般用于POST請求

          API返回Promise對象

          fetch() API返回一個promise對象。

          • 如果存在網絡錯誤,則將拒絕,這會在.catch()塊中處理。
          • 如果來自服務器的響應帶有任何狀態碼(如200、404、500),則promise將被解析。響應對象可以在.then()塊中處理。

          錯誤處理

          請注意,對于成功的響應,我們期望狀態代碼為200(正常狀態),但是即使響應帶有錯誤狀態代碼(例如404(未找到資源)和500(內部服務器錯誤)),fetch() API 的狀態也是 resolved,我們需要在.then() 塊中顯式地處理那些。

          我們可以在response 對象中看到HTTP狀態:

          • HTTP狀態碼,例如200。
          • ok –布爾值,如果HTTP狀態代碼為200-299,則為true。

          3.3 示例:GET

          const getTodoItem = fetch('https://jsonplaceholder.typicode.com/todos/1')
            .then(response => response.json())
            .catch(err => console.error(err));
          
          getTodoItem.then(response => console.log(response));
          
          Response
          
           { userId: 1, id: 1, title: "delectus aut autem", completed: false }
          

          在上面的代碼中需要注意兩件事:

          1. fetch API返回一個promise對象,我們可以將其分配給變量并稍后執行。
          2. 我們還必須調用response.json()將響應對象轉換為JSON

          錯誤處理

          我們來看看當HTTP GET請求拋出500錯誤時會發生什么:

          fetch('http://httpstat.us/500') // this API throw 500 error
            .then(response => () => {
              console.log("Inside first then block");
              return response.json();
            })
            .then(json => console.log("Inside second then block", json))
            .catch(err => console.error("Inside catch block:", err));
          
          Inside first then block
          ? ? Inside catch block: SyntaxError: Unexpected token I in JSON at position 4
          

          我們看到,即使API拋出500錯誤,它仍然會首先進入then()塊,在該塊中它無法解析錯誤JSON并拋出catch()塊捕獲的錯誤。

          這意味著如果我們使用fetch()API,則需要像這樣顯式地處理此類錯誤:-

          fetch('http://httpstat.us/500')
            .then(handleErrors)
            .then(response => response.json())
            .then(response => console.log(response))
            .catch(err => console.error("Inside catch block:", err));
          
          function handleErrors(response) {
            if (!response.ok) { // throw error based on custom conditions on response
                throw Error(response.statusText);
            }
            return response;
          }
          
           ? Inside catch block: Error: Internal Server Error at handleErrors (Script snippet %239:9)
          

          3.3 示例:POST

          fetch('https://jsonplaceholder.typicode.com/todos', {
              method: 'POST',
              body: JSON.stringify({
                completed: true,
                title: 'new todo item',
                userId: 1
              }),
              headers: {
                "Content-type": "application/json; charset=UTF-8"
              }
            })
            .then(response => response.json())
            .then(json => console.log(json))
            .catch(err => console.log(err))
          
          Response
          
          ? {completed: true, title: "new todo item", userId: 1, id: 201}
          

          在上面的代碼中需要注意兩件事:-

          1. POST請求類似于GET請求。我們還需要在fetch() API的第二個參數中發送method,body 和headers 屬性。
          2. 我們必須需要使用 JSON.stringify() 將對象轉成字符串請求body參數

          4.Axios API

          Axios API非常類似于fetch API,只是做了一些改進。我個人更喜歡使用Axios API而不是fetch() API,原因如下:

          • 為GET 請求提供 axios.get(),為 POST 請求提供 axios.post()等提供不同的方法,這樣使我們的代碼更簡潔。
          • 將響應代碼(例如404、500)視為可以在catch()塊中處理的錯誤,因此我們無需顯式處理這些錯誤。
          • 它提供了與IE11等舊瀏覽器的向后兼容性
          • 它將響應作為JSON對象返回,因此我們無需進行任何解析

          4.1 示例:GET

          // 在chrome控制臺中引入腳本的方法
          
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'https://unpkg.com/axios/dist/axios.min.js';
          document.head.appendChild(script);
          
          axios.get('https://jsonplaceholder.typicode.com/todos/1')
            .then(response => console.log(response.data))
            .catch(err => console.error(err));
          
          Response
          
          { userId: 1, id: 1, title: "delectus aut autem", completed: false }
          

          我們可以看到,我們直接使用response獲得響應數據。數據沒有任何解析對象,不像fetch() API。

          錯誤處理

          axios.get('http://httpstat.us/500')
            .then(response => console.log(response.data))
            .catch(err => console.error("Inside catch block:", err));
          
          Inside catch block: Error: Network Error
          

          我們看到,500錯誤也被catch()塊捕獲,不像fetch() API,我們必須顯式處理它們。

          4.2 示例:POST

          axios.post('https://jsonplaceholder.typicode.com/todos', {
                completed: true,
                title: 'new todo item',
                userId: 1
            })
            .then(response => console.log(response.data))
            .catch(err => console.log(err))
          
           {completed: true, title: "new todo item", userId: 1, id: 201}
          

          我們看到POST方法非常簡短,可以直接傳遞請求主體參數,這與fetch()API不同。


          作者:Danny Markov 譯者:前端小智 來源:tutorialzine

          原文:https://tutorialzine.com/2017/12-terminal-commands-every-web-developer-should-know

          法: $.ajax([settings]);


          1. $.ajax({
          2. type: "POST",
          3. url: "UserLogincheck",
          4. data: {username:$("#username").val(), password:$("#password").val(),verify:$("#verify").val()},
          5. dataType: "json",
          6. success: function(data){
          7. if(data==1){
          8. // 用戶名或密碼錯誤
          9. alert("用戶名或密碼錯誤");
          10. }
          11. else if(data==2){
          12. alert("驗證碼錯誤");
          13. // 驗證碼錯誤
          14. }
          15. else if(data==0){
          16. window.location.href="index";
          17. }
          18. //跳轉頁面
          19. },
          20. error:function(XMLHttpRequest, textStatus, errorThrown){//請求失敗時調用此函數
          21. console.log(XMLHttpRequest.status);
          22. console.log(XMLHttpRequest.readyState);
          23. console.log(textStatus);
          24. }
          25. });

          php作為后臺的處理過程


          1. public function UserLogincheck(){//用戶登陸驗證(用戶名和郵箱均可登陸)
          2. $very = new \Think\Verify();
          3. if($very->check($_POST['verify'])){//驗證碼正確
          4. $user_admin = I('post.username');
          5. $judge = " (user_name = '$user_admin' or user_email = '$user_admin' )";
          6. $user_del_status = $this->user->where($judge)->getField('user_del');
          7. if($user_del_status == 0){//用戶未被注銷
          8. $user_password = I('post.password');
          9. $judge .= "and user_password = '$user_password'";
          10. $res = $this->user->where($judge)->find();
          11. if($res){//記錄用戶登陸狀態
          12. $_SESSION['ADMIN_user_id'] = $this->user->where($judge)->getField('user_id');
          13. $_SESSION['ADMIN_user_name'] = $data['user_name'];
          14. $this->ajaxReturn(0);//登陸成功
          15. }
          16. $this->ajaxReturn(1);//用戶名或密碼錯誤
          17. }
          18. else
          19. $this->ajaxReturn(8);//用戶信息被注銷
          20. }
          21. else
          22. $this->ajaxReturn(2);//驗證碼錯誤
          23. }

          ajax參數詳解:

          data

          類型:String

          發送到服務器的數據。將自動轉換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組,jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。

          dataFilter

          類型:Function

          給 Ajax 返回的原始數據的進行預處理的函數。提供 data 和 type 兩個參數:data 是 Ajax 返回的原始數據,type 是調用 jQuery.ajax 時提供的 dataType 參數。函數返回的值將由 jQuery 進一步處理。

          dataType

          類型:String

          預期服務器返回的數據類型。如果不指定,jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷,比如 XML MIME 類型就被識別為 XML。在 1.4 中,JSON 就會生成一個 JavaScript 對象,而 script 則會執行這個腳本。隨后服務器端返回的數據會根據這個值解析后,傳遞給回調函數。可用值:

          "xml": 返回 XML 文檔,可用 jQuery 處理。

          "html": 返回純文本 HTML 信息;包含的 script 標簽會在插入 dom 時執行。

          "script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了 "cache" 參數。注意:在遠程請求時(不在同一個域下),所有 POST 請求都將轉為 GET 請求。(因為將使用 DOM 的 script標簽來加載)

          "json": 返回 JSON 數據 。

          "jsonp": JSONP 格式。使用 JSONP 形式調用函數時,如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名,以執行回調函數。

          "text": 返回純文本字符串

          error

          類型:Function

          默認值: 自動判斷 (xml 或 html)。請求失敗時調用此函數。

          有以下三個參數:XMLHttpRequest 對象、錯誤信息、(可選)捕獲的異常對象。

          如果發生了錯誤,錯誤信息(第二個參數)除了得到 null 之外,還可能是 "timeout", "error", "notmodified" 和 "parsererror"。

          這是一個 Ajax 事件。

          global

          類型:Boolean

          是否觸發全局 AJAX 事件。默認值: true。設置為 false 將不會觸發全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

          ifModified

          類型:Boolean

          僅在服務器數據改變時獲取新數據。默認值: false。使用 HTTP 包 Last-Modified 頭信息判斷。在 jQuery 1.4 中,它也會檢查服務器指定的 'etag' 來確定數據沒有被修改過。

          jsonp

          類型:String

          在一個 jsonp 請求中重寫回調函數的名字。這個值用來替代在 "callback=?" 這種 GET 或 POST 請求中 URL 參數里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 會導致將 "onJsonPLoad=?" 傳給服務器。

          jsonpCallback

          類型:String

          為 jsonp 請求指定一個回調函數名。這個值將用來取代 jQuery 自動生成的隨機函數名。這主要用來讓 jQuery 生成度獨特的函數名,這樣管理請求更容易,也能方便地提供回調函數和錯誤處理。你也可以在想讓瀏覽器緩存 GET 請求的時候,指定這個回調函數名。

          password

          類型:String

          用于響應 HTTP 訪問認證請求的密碼

          processData

          類型:Boolean

          默認值: true。默認情況下,通過data選項傳遞進來的數據,如果是一個對象(技術上講只要不是字符串),都會處理轉化成一個查詢字符串,以配合默認內容類型 "application/x-www-form-urlencoded"。如果要發送 DOM 樹信息或其它不希望轉換的信息,請設置為 false。

          scriptCharset

          類型:String

          只有當請求時 dataType 為 "jsonp" 或 "script",并且 type 是 "GET" 才會用于強制修改 charset。通常只在本地和遠程的內容編碼不同時使用。

          success

          類型:Function

          請求成功后的回調函數。

          參數:由服務器返回,并根據 dataType 參數進行處理后的數據;描述狀態的字符串。

          這是一個 Ajax 事件。

          traditional

          類型:Boolean

          如果你想要用傳統的方式來序列化數據,那么就設置為 true。請參考工具分類下面的 jQuery.param 方法。

          timeout

          類型:Number

          設置請求超時時間(毫秒)。此設置將覆蓋全局設置。

          type

          類型:String

          默認值: "GET")。請求方式 ("POST" 或 "GET"), 默認為 "GET"。注意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支持。

          url

          類型:String

          默認值: 當前頁地址。發送請求的地址。

          username

          類型:String

          用于響應 HTTP 訪問認證請求的用戶名。

          xhr

          類型:Function

          需要返回一個 XMLHttpRequest 對象。默認在 IE 下是 ActiveXObject 而其他情況下是 XMLHttpRequest 。用于重寫或者提供一個增強的 XMLHttpRequest 對象。這個參數在 jQuery 1.3 以前不可用。

          . ajax的介紹

          ajax 是 Asynchronous JavaScript and XML的簡寫,ajax一個前后臺配合的技術,它可以讓 javascript 發送異步的 http 請求,與后臺通信進行數據的獲取,ajax 最大的優點是實現局部刷新,ajax可以發送http請求,當獲取到后臺數據的時候更新頁面顯示數據實現局部刷新,在這里大家只需要記住,當前端頁面想和后臺服務器進行數據交互就可以使用ajax了。

          這里提示一下大家, 在html頁面使用ajax需要在web服務器環境下運行, 一般向自己的web服務器發送ajax請求。

          2. ajax的使用

          jquery將它封裝成了一個方法$.ajax(),我們可以直接用這個方法來執行ajax請求。

          示例代碼:

          <script>
              $.ajax({
              // 1.url 請求地址
              url:'http://t.weather.sojson.com/api/weather/city/101010100',
              // 2.type 請求方式,默認是'GET',常用的還有'POST'
              type:'GET',
              // 3.dataType 設置返回的數據格式,常用的是'json'格式
              dataType:'JSON',
              // 4.data 設置發送給服務器的數據, 沒有參數不需要設置
          
              // 5.success 設置請求成功后的回調函數
              success:function (response) {
                  console.log(response);    
              },
              // 6.error 設置請求失敗后的回調函數
              error:function () {
                  alert("請求失敗,請稍后再試!");
              },
              // 7.async 設置是否異步,默認值是'true',表示異步,一般不用寫
              async:true
          });
          </script>

          ajax方法的參數說明:

          1. url 請求地址
          2. type 請求方式,默認是'GET',常用的還有'POST'
          3. dataType 設置返回的數據格式,常用的是'json'格式
          4. data 設置發送給服務器的數據,沒有參數不需要設置
          5. success 設置請求成功后的回調函數
          6. error 設置請求失敗后的回調函數
          7. async 設置是否異步,默認值是'true',表示異步,一般不用寫
          8. 同步和異步說明
          • 同步是一個ajax請求完成另外一個才可以請求,需要等待上一個ajax請求完成,好比線程同步。
          • 異步是多個ajax同時請求,不需要等待其它ajax請求完成, 好比線程異步。

          ajax的簡寫方式:

          $.ajax按照請求方式可以簡寫成$.get或者$.post方式

          ajax簡寫方式的示例代碼:

           <script>
              $(function(){
                  /*
                   1. url 請求地址
                   2. data 設置發送給服務器的數據, 沒有參數不需要設置
                   3. success 設置請求成功后的回調函數
                   4. dataType 設置返回的數據格式,常用的是'json'格式, 默認智能判斷數據格式
                  */ 
                  $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
                      console.log(dat);
                      console.log(status);
                      alert(dat);
                  }).error(function(){
                      alert("網絡異常");
                  });
          
                  /*
                   1. url 請求地址
                   2. data 設置發送給服務器的數據, 沒有參數不需要設置
                   3. success 設置請求成功后的回調函數
                   4. dataType 設置返回的數據格式,常用的是'json'格式, 默認智能判斷數據格式
                  */ 
                  $.post("test.php", {"func": "getNameAndTime"}, function(data){
                      alert(data.name);
                      console.log(data.time);
                  }, "json").error(function(){
                      alert("網絡異常");
                  });
              });
          
          
          </script>

          $.get和$.post方法的參數說明:

          $.get(url,data,success(data, status, xhr),dataType).error(func)$.post(url,data,success(data, status, xhr),dataType).error(func)

          1. url 請求地址
          2. data 設置發送給服務器的數據,沒有參數不需要設置
          3. success 設置請求成功后的回調函數
          • data 請求的結果數據
          • status 請求的狀態信息, 比如: "success"
          • xhr 底層發送http請求XMLHttpRequest對象
        1. dataType 設置返回的數據格式
          • "xml"
          • "html"
          • "text"
          • "json"
        2. error 表示錯誤異常處理
          • func 錯誤異常回調函數

          主站蜘蛛池模板: 日韩精品无码一区二区三区四区 | 亚洲午夜一区二区电影院| 精品无码一区二区三区亚洲桃色| 久久久久人妻一区二区三区vr| 国产成人综合一区精品| 久久久久久一区国产精品| 精品无码一区二区三区爱欲九九| 国产精品香蕉一区二区三区| 亚洲A∨精品一区二区三区下载| 一区二区三区免费在线视频 | 99久久无码一区人妻a黑| 精品一区二区三区3d动漫| 91精品一区二区| 一区二区三区高清在线 | 亚洲Av无码一区二区二三区| 变态拳头交视频一区二区| 激情爆乳一区二区三区| 国产成人精品一区二三区 | 高清一区二区三区视频| 精品人妻一区二区三区四区| 国产一区二区三区福利| 痴汉中文字幕视频一区| 亚洲美女高清一区二区三区 | 麻豆一区二区免费播放网站| 色噜噜狠狠一区二区三区| 亚洲熟妇无码一区二区三区| 中文字幕AV一区二区三区| 中文字幕乱码亚洲精品一区 | 中文人妻无码一区二区三区| 精品一区二区三区在线视频| 午夜福利一区二区三区高清视频 | 精品国产鲁一鲁一区二区| 日本一区二区三区高清| 成人精品视频一区二区三区| 国产精品无码一区二区三级| 少妇精品久久久一区二区三区 | 波多野结衣的AV一区二区三区 | 无码一区二区三区在线观看| 亚洲国产福利精品一区二区| 蜜臀AV无码一区二区三区| 无遮挡免费一区二区三区|