Article Directory
Constructed using the form form tag
1 Construct a GET request
To construct an HTTP request using a form form, two attributes are required.
The first attribute is action , indicating which server to submit to; the second attribute is method , indicating the method, Get or Post.
<body>
<form action="https://www.sogou.com" method="get">
<input type="text" name="studentName">
<!-- 这是一个特殊的按钮，value的值就是按钮里的文本 -->
<!-- 点击提交就是构造了一个 http 请求提交给了服务器 -->
<input type="submit" value="提交">
</form>
</body>
After clicking submit, use fiddler to capture the package and observe the result. Get in the above figure is the value in the method
attribute in the code , and the circled part is the content entered by the user in the input box.
https://www.sogou.com is the value of the action attribute.
At this time, only the first line of the request can be changed according to the code, and the rest is added by the browser itself.
2 Construct POST request
The post request code is the same as the get request code, but the value in the method attribute needs to be changed to post .
The body part is the value entered by the user, and the url in the first line is the value in the action attribute.
For the post request constructed by form, the data format in the body is very similar to the query string, that is, the key-value pair structure.
Use & to separate keys and pairs, and = to separate keys and values.
The form tag can only construct GET and POST, but cannot construct requests for methods such as PUT, DELETE, and OPTIONS.
Use ajax construction
This is a more powerful way to construct http requests, ajax (Ajax), which is the way to construct http requests through js .
The full name is Asynchronous JavaScript and XML , and a means asynchronous .
1 What is asynchronous
Since there is asynchrony, there must be synchronization. Let's give an example to explain.
If Zhang San wants to meet his online dating partner who has been in love for many years, he goes to the train station to wait for his girlfriend.
Synchronous waiting : During the waiting process, Zhang San stared at the exit until he saw his girlfriend, and then immediately went to meet her.
Asynchronous waiting : Zhang San can also wait while playing with his mobile phone, and take the initiative to say hello to Zhang San when his girlfriend comes.
Synchronization means that when A waits for B, it will keep staring at B, and A is responsible for paying attention to when B is ready.
Asynchronous means that when A is waiting for B, he will not keep staring at B, and will actively notify A when B is ready.
After the request operation is initiated through ajax in html, it is an asynchronous method.
After the code executes the sending request operation, it can proceed immediately without waiting for the server to respond.
When the server's response comes back, the browser will notify the code.
2 How to use ajax in the code
Ajax api is provided in jquery , which is a package for native api, and it is relatively simple to use.
Search for jquery cdn and select the current domain name.
After clicking, select the current version to download on the page that appears.
Right-click to copy the link address and open
it, and then copy the link to the src attribute in the script tag .
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
The $ in $.ajax() is a special global object in jQuery, and the APIs in jQuery are all introduced in the form of $ method.
It has only one parameter, which is a js object, which is the key-value pair in curly braces.
<body>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$.ajax({
type:'get',
url:'https://www.sogou.com?studentName=zhangsan',
// 此处的 success 就声明了一个回调函数，就会在服务器响应返回到浏览器的时候触发该回调
// 正是此处的 回调 体现了异步
success: function(data) {
console.log("当服务器返回的响应到达浏览器之后，浏览器触发该回调，通知到代码当中");
}
});
console.log("浏览器立即往下执行代码");
</script>
</body>
Open the checker basis and check the console to find that an error has been reported at this time.
This is because Sogou's server did not process our request, so the code here can only see that the constructed request cannot get the correct response.
It's like eating at Kenji, but you order McDonald's, and of course they don't pay attention to you.
When you implement a server yourself, you can send requests to your own server, and it can be processed naturally at this time.
Three additional points.
The first point is
that when there are multiple requests in the code, they will be executed in a top-down order, but the execution order of receiving the response and callback function is uncertain,
because the network will happen first come first.
The second point is
that when one of the requests hangs up, if an exception occurs before the request is sent, and the exception is still in the main thread, it is
impossible to continue executing the following code at this time.
If the exception occurs in the callback of the response after sending the request, it is another callback thread exception and will not affect the main thread.
The third point
is that ajax is more powerful than form.
- Support put, delete and other methods.
- The request sent by ajax can be a flexible header .
- The body of the request sent by ajax can also be flexibly set.
Construct using third-party tools
Postman is used here , and it will be often used in future companies.
And this is a soft armor with objects— postwoman , which is more similar to postman.
1 Installation of postman tool
1. Open the search engine, search for postman , pay attention to the domain name, and select the official website.
2. On the page that appears, download as needed.
I choose to download the windows version
3. After downloading and installing, open and create a workspace,
select the created workspace to open.
4. After creating a workspace, click the + sign below to create a tab page. A tab page
is created here .
2 Use of postman tool
The requested method can be set in the following locations.
There are a total of the following several methods can be set.
This location writes the url,
and you can also set its headers and body
. After the construction is complete, click Send.
The following is the response you get.
You can choose to observe its body, cookies, and headers.
postman also has a more powerful function:
That is, the code for constructing the request can be generated, which is convenient for us to integrate in our own program.
