Series Article Directory

Article directory

(1) How to construct an HTTP request through the front end of the web page?

1. Enter the URL directly in the browser (construct GET)
Second, use the form form (you can construct GET and POST)
3. Use ajax (you can construct various requests)
1. Native ajax construction request
2. Browser and server interaction process (after introducing ajax)
3. How to install and introduce the third library in JS? Encapsulated ajax construction request

(2) How to construct HTTP request through Java code?

(1) The front end of the web page constructs an HTTP request

1. Enter the URL directly in the browser (construct GET)

Second, use the form form (you can construct GET and POST)

There is a form tag in HTML, which can be constructed through this tag. Able to submit user input to the server.

As you can see from the Fiddler capture, the form form constructs a GET request :

The name attribute of the input tag becomes the key of the query string . The content entered in the input tag becomes the value of the query string .

So how does the form form a POST request?

Add a method method inside the tag: method="post"

By capturing packets, you can see:

3. Use ajax (which can construct various requests) (currently the more mainstream way to submit data to the server)

The full name of ajax is Asynchronous Javascript And XML . It is a way that JavaScript sends HTTP requests to the server proposed in 2005. The feature is that data transfer can be performed without refreshing the page/page jumping.

Asynchronous is an asynchronous mechanism that is very common in network programming. In network programming, data is transmitted through the network, which is mainly divided into two stages: one is waiting; the other is copying data

Ajax can make network requests while the browser is rendering the page. If there is no such asynchronous mechanism, the browser will block the thread that renders the page if it initiates a network request, which will cause the interface to be stuck in the network request.

1. Native ajax construction request

Note: If you change the address in send to the address of another server (such as http://www.sogou.com/index.html), there is a high probability that an error will occur.
This error is because Ajax cannot be "cross-domain" by default, that is, "Ajax in html below Baidu cannot access Sogou's
content". If you want to force cross-domain, you need the cooperation of the server, and you can "allow cross-domain" in the server's response.
The server at this time is set to allow cross-domain, so the page can access the data in it.

In order to ensure security, ajax requires that the page that initiates the ajax request and the server that receives the ajax request should be under the same domain name/address. If the page that initiates the request is different from the server that receives the Ajax request, it is considered a cross-domain request, and Ajax does not allow cross-domain access by default.

2. Browser and server interaction process ( after introducing ajax )

Notice:

The above native usage of ajax is actually quite troublesome. It is more recommended to use a third-party library and use the packaged ajax method. For example: jQuery

jQuery is currently one of the most widely used third libraries in JavaScript. Because of the emergence of front-end frameworks, it is currently in decline, but it is still widely used.

3. Then a question is introduced, how to install and introduce the third library in JS ?

We all know that in java, we can use Maven to download from the central repository

Then in JS, there is a relatively simple method. Because the JS code is all on the server side, it will be executed locally when it is downloaded by the browser. Then, as long as you import the network address where jQuery is located in the web page code, you can use it directly.

CDN- jquery

Generally, we end with .min.js. min represents the compressed js code, which is smaller and faster to download.

Then copy the address and open it in the browser: at this point we will see this interface.

Copy the address and then introduce it in the code:

Next, it's ready to use.

This code, compared with the previous native code, is much simpler.

Note: During the loading process of the browser page, multiple Ajax requests can be initiated at the same time. At this time, these multiple Ajax requests are equivalent to a concurrent execution relationship. But compared with java, js's support for concurrent programming is very limited.

(2) How to construct an HTTP request through Java code

The so-called " send HTTP request " is essentially to write a string into the TCP Socket according to the HTTP format .

The so-called " receive HTTP response " is essentially to read a string from the TCP Socket , and then parse it according to the HTTP format.

Based on the knowledge of Socket , a simple HTTP client program can be constructed to send various types of HTTP requests.

beg.

public class HttpClient913 {
    private Socket socket;
    private String ip;
    private int port;

    public HttpClient913(String ip, int port) throws IOException {
        this.ip = ip;
        this.port = port;
        socket = new Socket(ip,port);
    }

    public String get(String url) throws IOException {
        StringBuilder request = new StringBuilder();
        //构造首行
        request.append("GET" + url + "HTTP/1.1\n");
        //构造header
        request.append("Host: " + ip + ":" + port + "\n");
        //构造空行
        request.append("\n");
        //GET请求不需要body，这样请求基本就构造完毕了

        //发送请求
        OutputStream outputStream = socket.getOutputStream();
        //outputStream 是一个字节流，以字节为单位进行写入，因此需要把request 转换成byte[]
        outputStream.write(request.toString().getBytes());

        //读取响应
        InputStream inputStream = socket.getInputStream();
        //设置一个缓存区，用来存放响应数据
        byte[] buffer = new byte[1024*1024];
        //n 表示实际读到的字节数
        int n = inputStream.read(buffer);
        return new String(buffer,0,n,"utf-8");
    }

    //post 的实现和刚才的 get 基本一致，只是多了一步构造body
    public String post(String url, String body) throws IOException {
        StringBuilder request = new StringBuilder();
        //构造首行
        request.append("POST" + url + "HTTP/1.1\n");
        //构造header
        request.append("Host: " + ip + ":" + port + "\n");
        request.append("Content-Type: text/plain\n");
        request.append("Content-Length: " + body.getBytes().length + "\n");
        //构造空行
        request.append("\n");
        //构造body
        request.append(body);

        //发送请求
        OutputStream outputStream = socket.getOutputStream();
        outputStream.write(request.toString().getBytes());

        //读取响应
        InputStream inputStream = socket.getInputStream();
        byte[] buffer = new byte[1024*1024];
        int n = inputStream.read(buffer);
        return new String(buffer,0,n,"utf-8");
        
    }
}

How to use code to construct HTTP request?

Series Article Directory

3. Use ajax (which can construct various requests) (currently the more mainstream way to submit data to the server)

Notice:

Guess you like