一简单学习Ajax的GET & POST请求

Posted 2021-05-11 程序员阿良

一、Ajax简介

我想如果使用过购物网站的话，想象一个场景，你在淘宝上看中一件物品，想加入购物车。

但是呢，你点击添加购物车后，整个页面刷新了，你之前看的物品记录也没有了，这样是不是很烦（这是因为没有使用ajax更新数据时会请求整个页面的数据，重新渲染）。

碰到这种情况，ajax就出场了，有了它，我们可以在点击添加商品后，只更新购物车中的物品数量就可以了，根本就不需要更新整个页面。

用官方一点的话来说，就是可以控制网页的局部刷新。

二、GET & POST请求实现过程

Ⅰ、GET请求实现过程

1、创建一个异步对象

 const xmlhttp = new XMLHttpRequest();

 xmlhttp.open(type,url,true);

3、发送请求

xmlhttp.send();

4、监听状态的变化

xmlhttp.onreadystatechange = function (){
    if (xmlhttp.readyState === 4) {
        //处理返回的结果
    }
}

5、处理返回的结果

if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
    console.log(xmlhttp.responseText);
} else {
    console.log("没有接收到服务器返回的数据");
}

Ⅱ、Ajax的POST请求实现过程

1、创建一个异步对象

//1、创建一个异步对象
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

//2、设置请求方式和请求地址
// 注意：在post方式中url后面不能加参数
xmlhttp.open("POST", "ajax-post.php", true);

3、添加参数*和发送请求

//3、添加参数
//如果需要像 html 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。
//然后在 send() 方法中规定您希望发送的数据：
//此方法必须在open() 方法和 send() 之间调用
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("userName=ljm&userPwd=123456");

4、监听状态的变化

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4) {
        //code...
    }
}

5、处理返回的结果

if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
    console.log(xmlhttp.responseText);
} 
else {
    console.log("没有接收到服务器返回的数据");
}

三、完整代码

Ⅰ、GET请求方式过程的代码实现

//1、创建一个异步对象
//检查浏览器是否支持 XMLHttpRequest 对象
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、设置请求方式和请求地址
//解决IE缓存：在IE浏览器中如果通过Ajax发送起GET请求，那么IE浏览器认为同一个URL只有一个结果
xmlhttp.open("GET","ajax-get.txt?t=" + Math.random(),true);
//3、发送请求
xmlhttp.send();
//4、监听状态的变化
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4) {
        if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
            console.log(xmlhttp.responseText);
        } else {
            console.log("没有接收到服务器返回的数据");
        }
    }
}

Ⅱ、POST请求方式过程的代码实现

if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// 在post方式中url后面不能加参数
xmlhttp.open("POST", "ajax-post.php", true);

//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。
//然后在 send() 方法中规定您希望发送的数据：
//setRequestHeader方法必须在 open() 方法和 send() 之间调用
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("userName=ljm&userPwd=123456");

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4) {
        if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304){
            console.log(xmlhttp.responseText);
        } else {
            console.log("没有接收到服务器返回的数据");
        }
    }
}

四、XmlHttpRequest对象的方法和属性

1、方法：

• abort(): 取消现在的连接，可以将XmlHttpRequest对象的状态值重置为0
• open(): 初始化http的请求参数，但是不发送请求
• send(): 发送http请求
• setRequestHeader()：给一个打开但是未发送的请求设置参数

2、属性：

• onreadystateChange: 状态改变触发的回调函数
• reposeText: 从服务器返回数据的字符串格式
• reposeXML: 从服务器返回兼容DOM的文档数据对象
• status: 从服务器返回的状态码
• statusText: 伴随状态码返回的信息，如status=200时，statusText=’OK’
• readyState: 对象状态值
• 0表示XmlHttpRequest对象已创建或者已经被abort()方法重置
• 1表示对象已经初始化，但是请求还未发送（调用了open()方法，send()方法还没有调用）
• 2表示请求已经发送，没有接收到响应信息（sed()方法已经被调用）
• 3表示已经接收到了所有的响应头，响应体开始接收但未完成
• 4表示响应信息已经全部接收

五、问题

Ⅰ、http状态码（status）和对象的状态值(readyState)有什么区别？

http状态码是指服务器接收到请求后返回的一个状态码，而对象的状态值，是针对XmlHttpRequest对象的

Ⅱ、GRT请求和POST请求的不同

1. 发送的数据数量 在 GET 中，只能发送有限数量的数据，因为数据是在 URL 中发送的。在 POST 中，可以发送大量的数据，因为数据是在正文主体中发送的。

2. 安全性 GET 请求发送的数据不受保护，因为数据在 URL 栏中公开，这增加了漏洞和黑客攻击的风险。POST 请求发送的数据是安全的，因为数据未在URL栏中公开，还可以在其中使用多种编码技术，这使其有弹性。

3. 加入书签中 GET 查询的结果可以加入书签中，因为它以 URL 的形式存在；而 POST 查询的结果无法加入书签中。

4. 编码 在表单中使用 GET 请求时，数据类型中只接受 ASCII 字符。在表单提交时，POST 请求不绑定表单数据类型，并允许二进制和 ASCII 字符。

5. 可变大小 GET 请求中的可变大小约为 2000 个字符。POST 请求最多允许 8 Mb 的可变大小。

6. 缓存 GET 请求的数据是可缓存的，而 POST 请求的数据是无法缓存的。

7. 主要作用 GET 请求主要用于获取信息。而 POST 方法主要用于更新数据。

Ⅲ、什么是同步方式与异步方式？

1、同步方式发送请求

发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会处于一直等待过程中。 

同步请求：客户端提交请求 -> 等待服务器处理 -> 处理完毕返回 这个期间客户端浏览器不能干任何事

举个例子: 例如中午食堂吃饭: 同步就是男生请女生去吃饭，女生一开始是拒绝和你吃饭；你就不停的邀请她…一直等待…连菜都不敢点，直到对方同意..，才一起去吃饭,期间不能离开.

上述场景: 适用于准情侣或者情侣!

2、异步方式发送请求

发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。 

异步请求: 客户端请求通过事件触发 -> 服务器处理（此时浏览器仍然可以做其他事情）->  服务器处理完毕,异步的给予浏览器响应。

直白的说吧: 异步就是老公叫老婆吃饭，此时老婆可能在忙,那么老公此时可能没等老婆回复,就开始下单,点菜…等老婆回复时,此时菜饭已经点好了，开吃吧。

上述场景:适用于老夫老妻.

七、总结

1、可以看出，所谓的Ajax就是发起一个http请求。2、使用javascript在指定的位置，显示响应数据，从而局部修改页面的数据，达到局部刷新目的 3、服务器响应数据给ajax引擎AJAX引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据更新到浏览器页面具体位置。