前端js如何發起http請求後端後端

阿新 • • 發佈：2019-02-15

作為一名後端開發人員，一致在學習後端技術，今天突然想起寫一個原生的js，探討向服務端發起http請求，獲得資料後再做顯示。
先貼程式碼：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>請求後端介面測試</title> 
</head>
<body>
<input type="text" id="aaa">輸入查詢銀行</input>
<button onclick="startQuery()" 
>開始請求 </button>
<div id="result" style="color:red"></div>
<script>
    function getJSON(url){
        return new Promise( function(resolve, reject){
            var xhr = new XMLHttpRequest();
            xhr.open('get',url,true);
            xhr.responseType ='json';
            xhr.onload =  function 
(){
                var status = xhr.status;
                if (status == 200) {
                    resolve(xhr.response);
                } else {
                    reject(status);
                }
            };
            xhr.send();
        });
    };
    function startHttpQuery(bankId){
        var 
 url= "http://localhost:8080/v1/bankinfo";
        if(null != bankId){
            //get方法的查詢引數設定
            url=url + "?bankId=" + bankId;
        }
        getJSON(url).then( function(data){
            var info="";
            for(var i=0; i<data.length; i++){
                info = info + data[i].bankId + "     " + data[i].bankName + "<br>";
            }
            document.getElementById("result").innerHTML = info;
        },
        function(status) {
            alert('Something went wrong.');
        });
    }
    function startQuery(){
        var bank=document.getElementById("aaa").value;
        startHttpQuery(bank);
    }
</script>
</body>
</html>

本次demo採用XMLHttpRequest物件發起http請求，並沒有採用任何前端框架。

AJAX即“Asynchronous Javascript And XML”，非同步JavaScript和XML。使用AJAX可以通過HTTP協議與伺服器互動資料，可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁如果需要更新內容，必須重新載入整個網頁頁面。此外，它也是實現前端與後端解耦的重要技術手段。AJAX框架的核心物件就是XMLHttpRequest。

前端使用js發起http請求的幾種方法

通用的一些流程要判斷http返回碼要判斷body裡面業務返回碼是否能夠跨域是否能夠攜帶Cookie 一種比較可行的方案是在utils裡面把請求處理到json層次，然後業務層次只要判讀json裡

控制檯實現js發起http請求 —— AJAX 例項解析

此處以一個簡單的測試使用者登入介面為例。。。如果一個網站的登入模組設計的很簡單的話，可以通過不斷髮起請求去測試一個賬號的密碼。。。 // 第一步：建立 XMLHttpRequest 物件 var xmlhttp; if (window.XMLHttpRequest) {// code

原生JS發起http請求，並且接收返回值

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js中的Ajax經典示例</title> <script type="text/javascript" src="Scr

前端js如何發起http請求後端後端

作為一名後端開發人員，一致在學習後端技術，今天突然想起寫一個原生的js，探討向服務端發起http請求，獲得資料後再做顯示。先貼程式碼： <!DOCTYPE html> <html> <head> <meta

一個http請求傳送到後端的詳細過程

首先HTTP協議（HyperText Transfer Protocol，超文字傳輸協議）是一個應用層的協議，是用於從WWW伺服器傳輸超文字到本地瀏覽器的傳輸協議。HTTP是客戶端瀏覽器或其他程式與Web服務器之間的應用層通訊協議。在Interne

Node.js模擬發起http請求從非同步轉同步的5種方法

使用Node.js模擬發起http請求很常用的,但是由於Node模組（原生和第三方庫）提供裡面的方法都是非同步，對於很多場景下應用很麻煩，不如同步來的方便。下面總結了幾個常見的庫API從非同步轉同步的幾種方法。模組有：request, request-promis

在Node.js中發起HTTP請求的5種方法

深入解析Node.js中5種發起HTTP請求的方法翻譯：瘋狂的技術宅英文標題：5 Ways to Make HTTP Requests in Node.js 原文連結：www.twilio.com/blog/2017/0… 建立HTTP請求使現代程式語言的核心功能之一，也是

客戶端瀏覽器向伺服器發起http請求的全過程

http協議的參考：http://blog.csdn.net/hefeng6500/article/details/75081047 （1）瀏覽器先搜尋自身的DNS快取（2）作業系統搜尋自身的DNS快取（瀏覽器沒有找到快取或者快取已經失效）（3）讀取本地的HOST檔案

原生JS的HTTP請求

font sch 原生 office 請求 ref html sof nbsp ar xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(

使用libcurl的包裝庫cpr發起http請求

cout main title pow dsa ext lan text post cpr GitHub地址https://github.com/whoshuu/cpr 簡單示例：cpr_http_request.cpp #include <iostream>

用Java發起HTTP請求與獲取狀態碼(含狀態碼列表)

滿足 null timeout etc default 語法訪問網頁 trace 轉自:https://blog.csdn.net/xyw591238/article/details/51072697 在使用Java請求Web程序比如訪問WebService接口時，通

Jmeter，使用【外部檔案資料】作為【請求資料】發起HTTP請求

目錄前言操作（一）新增執行緒組（二）新增HTTP請求（三）新增HTTP資訊頭管理器（四）準備資料檔案（五）新增CSV資料檔案設定（五）設定HTTP請求的入參為外部資料變數（按列）（六）新增察看結果樹（七）新增聚合報告（八）修改執行緒組

JS傳送http請求(get方式)

var url = "http://192.168.2.234:8080/GS1014J_MCF/forumServer?" + "queryMode=byId&forumId=297e254c60114cd301601186c0740009"; var time = 1000;

nodejs 使用axios模組發起http請求，並進行攔截各種請求資料

1、安裝axios npm install axios --save -g 2、先寫好攔截器、服務等新建一個名為http_server.js的檔案 // http_server.js var axios = require("axios") // 建立axios例項s c

(二)使用apache的commons-httpclient-3.1.jar之通過Java實現發起HTTP請求【使用代理】

本檔案介紹在需要通過代理才能訪問外網的情況下如何以純Java實現發起HTTP的請求。此部分內容與上一篇部落格內容大同小異，只有兩處稍有不同。 1.準備需要的Jar包需要的jar包與上一篇介紹的相同，包括：commons-httpclient-3.

如何在java中發起http請求

1、post(引數json格式)try { //請求地址 URL urlHttp = new URL(StaticData.URL+"/condition/query_camera"); // 將url 以 open方法返回的urlConnection 連線強轉為H

發起http請求raw格式

週末加班調別人給的介面，總是他的介面報錯500。但是用postman呼叫，設定引數格式為raw的json格式就可以通了，自己的java程式碼就是不通人家又不加班自己百度了看看。查到了好辦法 public static String result; public sta

Go發起Http請求及獲取相關引數

golang要請求遠端網頁，可以使用net/http包中的client提供的方法實現。查看了官方網站有一些示例，沒有太全面的例子，於是自己整理了一下。 get請求 get請求可以直接http.Get方法，非常簡單。 func httpGet() { resp, err :

java 發起http請求並獲取結果(json)

import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.io.O

java發起http請求獲取返回的Json物件

話不多說，先看程式碼！ /** * Created by david on 2017-7-5. */ import com.google.gson.JsonObject; import com.google.gson.JsonParser; import

前端js如何發起http請求後端後端

相關推薦