关于ajax发送请求以及get与post的区别

ajax发送请求

首先先来点文字简述下五大步：
（1）创建异步对象。即 XMLHttpRequest 对象。
（2）使用open方法设置请求的参数。包括：请求的方法、请求的url。
（3）设置请求头
（4）注册事件。 onreadystatechange事件，状态改变时就会调用。如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
（5）用send方法发送请求。
接下来就是把这五句代码分别用代码给你们实现出来

   // 1. 创建请求对象
        var xhr = new XMLHttpRequest();

        // 2. 调用open方法  设置请求方式和请求路径  
        // 这里注意get请求 直接在路径后面拼接参数就行了 不需要在最后的send方法里面传参
        xhr.open("get", "data.php?name=jack&age=18");

        // 而post请求是在后面的send方法后进行传递参数 但是必须设置请求头
        // xhr.open("post", "data.php");

        // 3. 设置请求头
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        // 4. 监听响应完成事件
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
            }
        }
        // 5. 发送请求
        xhe.send("name=rose&age=99"); // post请求在send的参数传参  get请求 直接拼接路径

注意、：
我的的第二段注释：注意一下 get与post传递参数的区别。两种写法是不同。

用完原生js写的，再用用jQuery的方法来发送请求：

$.ajax({
    url: "/greet",
    data: {name: 'jenny'},
    type: "POST",
    dataType: "json",
    success: function(data) {
        ...
    }
});

其实看成一个ajax发送了各种参数，来看看各种参数：
形式：$.ajax({name:val, name:val,…});
可选字段：
1）url：链接地址，字符串表示
2）data：需发送到服务器的数据，GET与POST都可以，格式为{A: ‘…’, B: ‘…’}
3）type：“POST” 或 “GET”，请求类型
4）timeout：请求超时时间，单位为毫秒，数值表示
5）cache：是否缓存请求结果，bool表示
6）contentType：内容类型，默认为"application/x-www-form-urlencoded"
7）dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json
8）success：请求成功后，服务器回调的函数
9）error：请求失败后，服务器回调的函数
10）complete：请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用
11）async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行
12）username：访问认证请求中携带的用户名，字符串表示
13）password：返回认证请求中携带的密码，字符串表示

$.post()

该方法使用POST方式执行Ajax请求，从服务器加载数据。

形式：$.post(url, data, func, dataType);
可选参数：
1）url：链接地址，字符串表示
2）data：需要发送到服务器的数据，格式为{A: ‘…’, B: ‘…’}
3）func：请求成功后，服务器回调的函数；function(data, status, xhr)，其中data为服务器回传的数据，status为响应状态，xhr为XMLHttpRequest对象，个人感觉关注data参数即可
4）dataType：服务器返回数据的格式

$.post(
    "/greet",
    {name: 'Brad'},
    function(data) {
        ...
    },
    "json"
);

$.get()

该方法使用GET方式执行Ajax请求，从服务器加载数据。

形式：$.get(url,data,func,dataType);其各个参数所示意义与$.post()一致，在此不再列出，唯一区别就是请求类型是GET。

$.get(
    "/greet",
    {name: 'Brad'},
    function(data) {
        ...
    },
    "json"
);

get以及post的用法以及区别

首先：首先我们要解决的第一个问题是：GET 和 POST 是什么？
GET 和 POST 其实都是 HTTP 的请求方法。
post： 请求指定的页面信息，并返回实体主体。
get：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
其次：请求方法如何使用？
HTTP 的请求报文由三部分构成：
请求行：由请求方法（Method）、URL 字段和 HTTP 的协议版本组成，所以我们的请求方法实际上就是位于请求行中的了。
请求头部：位于请求行之后，个数可以为 0~若干个，每个请求头部都包含一个头部字段名和一个值，它们之间用冒号 “:” 分隔，在最后用回车符和换行符表示结束。
请求数据：如果请求方法为 GET，那么请求数据为空。它主要是在 POST 中进行使用，适用于需要填表单（FORM）的场景。
想详细了解的可以看这篇博客：

转载： https://www.cnblogs.com/lmh001/p/9928517.html

该例子属于其他博客：

***GET /search/users?q=JakeWharton HTTP/1.1***

可以看到请求方法用的是 GET 请求，URL为 /search/users?q=JakeWharton，协议为 HTTP1.1。

我们在再看一下 POST 请求的报文：

***POST / HTTP/1.1
Host: www.wrox.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)
Gecko/20050225 Firefox/1.0.1
Content-Type: application/x-www-form-urlencoded
Content-Length: 40
Connection: Keep-Alive
name=Professional%20Ajax&publisher=Wiley***

GET 方法的特点

1.就上面的get请求的例子，即请求的数据会附在 URL 之后（放在请求行中），以 ? 分割 URL 和传输数据，多个参数用 & 连接。
2.根据 HTTP 规范，GET 用于信息获取，而且应该是安全和幂等的。
3.GET 是会被浏览器主动缓存的，如果下一次传输的数据相同，那么就会返回缓存中的内容，以求更快地展示数据。
4.GET 方法的 URL 一般都具有长度限制，但是需要注意的是 HTTP 协议中并未规定 GET 请求的长度。这个长度限制主要是由浏览器和 Web 服务器所决定的，并且各个浏览器对长度的限制也各不相同。
5.GET 方法只产生一个 TCP 数据包，浏览器会把请求头和请求数据一并发送出去，服务器响应 200 ok(返回数据)。

POST 方法的特点

1.根据 HTTP 规范，POST 表示可能修改变服务器上的资源的请求。例如我们在刷博客的时候对某篇文章进行点赞，就是提交的 POST 请求，因为它改变了服务器中的数据。
2.POST 方法因为有可能修改服务器上的资源，所以它是不符合安全和幂等性的。
3.从前面关于 POST 的请求报文也可以看出，POST 是将请求信息放置在请求数据中的。所以它的请求信息是没有长度限制的。
4.POST 方法会产生两个 TCP 数据包，浏览器会先将请求头发送给服务器，待服务器响应100 continue，浏览器再发送请求数据，服务器响应200 ok(返回数据)。这么看起来 GET 请求的传输会比 POST 快上一些（因为GET 方法只发送一个 TCP 数据包），但是实际上在网络良好的情况下它们的传输速度基本相同。

GET与POST请求的区别

Get和Post在面试中一般都会问到，一般的区别：
（1）post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）
（2）post发送的数据更大（get有url长度限制）
（3）post能发送更多的数据类型（get只能发送ASCII字符）
（4）post比get慢
（5）post用于修改和写入数据，get一般用于搜索排序和筛选之类的操作（淘宝，支付宝的搜索查询都是get提交），目的是资源的获取，读取数据

一、为什么get比post更快
1.post请求包含更多的请求头
因为post需要在请求的body部分包含数据，所以会多了几个数据描述部分的首部字段（如：content-type）,这其实是微乎其微的。

2.最重要的一条，post在真正接收数据之前会先将请求头发送给服务器进行确认，然后才真正发送数据
post请求的过程：
（1）浏览器请求tcp连接（第一次握手）
（2）服务器答应进行tcp连接（第二次握手）
（3）浏览器确认，并发送post请求头（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
（4）服务器返回100 Continue响应
（5）浏览器发送数据
（6）服务器返回200 OK响应

get请求的过程：
（1）浏览器请求tcp连接（第一次握手）
（2）服务器答应进行tcp连接（第二次握手）
（3）浏览器确认，并发送get请求头和数据（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
（4）服务器返回200 OK响应
也就是说，目测get的总耗是post的2/3左右，这个口说无凭，网上已经有网友进行过测试。

3.get会将数据缓存起来，而post不会
可以做个简短的测试，使用ajax采用get方式请求静态数据（比如html页面，图片）的时候，如果两次传输的数据相同，第二次以后消耗的时间将会在10ms以内（chrome测试），而post每次消耗的时间都差不多。经测试，chrome和firefox下如果检测到get请求的是静态资源，则会缓存，如果是数据，则不会缓存，但是IE什么都会缓存起来，当然，应该没有人用post去获取静态数据吧，反正我是没见过。

4.post不能进行管道化传输
http权威指南中是这样说的：http的一次会话需要先建立tcp连接然后才能通信，如果 每次连接都只进行一次http会话，那这个连接过程占的比例太大了！于是出现了持久连接：在http/1.0+中是connection首部中添加keep-alive值，在http/1.1中是在connection首部中添加persistent值，当然两者不仅仅是命名上的差别，http/1.1中，持久连接是默认的，除非显示在connection中添加close，否则持久连接不会关闭，而http/1.0+中则恰好相反，除非显示在connection首部中添加keep-alive，否则在接收数据包后连接就断开了。
出现了持久连接还不够，在http/1.1中，还有一种称为管道通信的方式进行速度优化：把需要发送到服务器上的所有请求放到输出队列中，在第一个请求发送出去后，不等到收到服务器的应答，第二个请求紧接着就发送出去，但是这样的方式有一个问题：不安全，如果一个管道中有10个连接，在发送出9个后，突然服务器告诉你，连接关闭了，此时客户端即使收到了前9个请求的答复，也会将这9个请求的内容清空，也就是说，白忙活了……此时，客户端的这9个请求需要重新发送。这对于幂等请求还好（比如get，多发送几次都没关系，每次都是相同的结果），如果是post这样的非幂等请求（比如支付的时候，多发送几次就惨了），肯定是行不通的。
所以，post请求不能通过管道的方式进行通信！很有可能，post请求需要重新建立连接，这个过程不跟完全没优化的时候一样了么？所以，在可以使用get请求通信的时候，不要使用post请求，这样用户体验会更好，当然，如果有安全性要求的话，post会更好。管道化传输在浏览器端的实现还需考证，貌似默认情况下大部分浏览器是不进行管道化传输的，除非手动开启！

二、get传参最大长度的理解误区
1.总结
（1）http协议并未规定get和post的长度限制
（2）get的最大长度限制是因为浏览器和web服务器限制了URL的长度
（3）不同的浏览器和web服务器，限制的最大长度不一样

2.误解
（1）首先即使get有长度限制，也是限制的整个URL的长度，而不仅仅是参数值数据长度，http协议从未规定get/post的请求长度限制是多少
（2）所谓的请求长度限制是由浏览器和web服务器决定和设置的，各种浏览器和web服务器的设定均不一样，这依赖于各个浏览器厂家的规定或者可以根据web服务器的处理能力来设定。如果超出了最大长度，大部分的服务器直接截断，也有一些服务器会报414错误。