一、通过 form表单构造HTTP请求

form（表单）是HTML中的一个常用标签，可以用于给服务器发送 Get 或者 Post 请求。

1、form 发送 Get 请求

（这里的URL是胡写的一个URL）

<form action="https://www.sogou.com/index.html" method="get">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>

（1）form 的重要参数

action：构造的 HTTP 请求的 URL 是什么。（要访问哪个资源网址、要把请求交给那个服务器）
method：构造的 HTTP 请求的方法是什么。（只能是 Get / Post）
- Get：参数放在 query string 中
- Post：参数放在 body 中

（2）input 的重要参数

type：表示输入框的类型
- text：文本；
- password：密码；
- submit：提交按钮；
name：表示构造出的 HTTP 请求的 query string 的 key。
value：input 标签的值。（对于此处 type 为 submit 类型来说，value 就是按钮上显示的文本）

假设用户在此处输入的用户名是 zhangsan ，密码是 123 。

此时的 form 表单生成的要提交的数据就形如：

username=zhangsan&password=123

2、通过 form 构造 Post 请求

<form action="https://www.sogou.com/index.html" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>

其中的参数和 Get 的参数一样，区别：

method 从 get 变成了 post；
数据从 query string 移动到了 body 中。

二、通过 ajax 构造 HTTP 请求

ajax 全程 Asynchronous Javascript And XML，是 2005 年提出的一种 JavaScript 给服务器发送 HTTP 请求的方式，其特点是不需要刷新页面/页面跳转就能进行数据传输。（有时候页面跳转要加载出一个全新的页面，尤其是会有非常复杂的页面）而 ajax 能够让页面不去整个全部加载，而是只加载其中需要变化的某个小部分。

ajax 通过 js 代码，来构造出 HTTP 请求，在通过 js 代码来处理这些响应，并且把得到的一些数据给更新到页面上。

Asynchronous：异步

异步的概念在计算机中非常常见。类似等待的过程。

假设在饭店吃饭，我说：“老板，我要一个蛋炒饭”

① 同步阻塞等待：（Scanner、输入流对象、输出流对象）

我就站在前台这里看着他做好，我自己端走。

② 同步非阻塞等待：（ajax）

我在前台这里看一下，发现饭还没好，我就出去逛一圈，过一会再来前台这里看一眼，发现饭还没好，我再出去玩一会。经过若干次之后，发现饭好了，我就自己端走了。

③ 异步等待：

我直接啥都不管了，就找个位置坐下（玩手机....），该干啥干啥。等到饭好了之后，人家直接给我端上来。

同步和异步之间的区别：

看结果是调用者主动关注（同步），还是被调用者来给调用者通知（异步）。

ajax就是基于异步等待的方式来进行的。

首先构造出一个 HTTP 请求，发给服务器。但是浏览器不确定服务器啥时候才有响应，于是就先不管了，浏览器里就继续执行其他代码（该干啥干啥），等到服务器的相应回来了之后，再由浏览器通知咱们对应的 js 低吗，以回调函数的方式来处理响应。

1、基于 jQuery 中的 ajax 构造

（1）引入 jQuery

搜索 jQuery cdn关键词
在结果中找一个合适的 cdn 的url（http://libs.baidu.com/jquery/2.0.0/jquery.min.js）
打开对应的 url，加载出 jquery 本体
复制粘贴内容到本体文件

（2）使用 jQuery 的 ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <script src="jquery.js"></script>
    <script>
        $.ajax({
            type:'get',
            url:'http://www.sogou.com/index.html',
            success:function(body) {
                //success 对应一个回调函数
                //这个函数就会在正确获取到 HTTP 响应之后来调用
                // “异步”
                //回调函数的参数，就是 HTTP 响应的 body 部分
                console.log("获取到响应数据！" + body);
            },
            error:function() {
                //error 也是一个回调函数
                //这个函数会在请求失败后触发
                // “异步”
                console.log("获取响应数据失败！");
            }
        });
    </script>


</body>
</html>

① $
② $.ajax 中传入的参数是一个对象
③ type
④ url
⑤ 回调函数

注意：

如果直接这样发送，浏览器会认为这是一个 “出错” 的请求，因为浏览器禁止 ajax 跨域访问。（即跨越多个域名/服务器）

跨域操作：

当前页面处在的服务器是本地文件，页面中的 ajax 的请求的URL的域名是 www.sogou.com，这样就触发了跨域操作。

不算跨域操作：

当前页面处在的服务器，就是在 www.sogou.com中，页面再通过 ajax 请求URL的域名为 www.sogou.com就不算跨域。

因此，要使用 ajax ，我们就需要自己实现一个服务器，让页面和 ajax 的地址都是这一个服务器即可。