简单学习Ajax的GET & POST请求

1、Ajax简介

我想若是使用过购物网站的话，想象一个场景，你在淘宝上看中一件物品，想加入购物车，可是呢，你点击添加购物车后，整个页面刷新了，你以前看的物品记录也没有了，这样是否是很烦（这是由于没有使用ajax更新数据时会请求整个页面的数据，从新渲染）。碰到这种状况，ajax就出场了，有了它，咱们能够在点击添加商品后，只更新购物车中的物品数量就能够了，根本就不须要更新整个页面，用官方一点的话来讲，就是能够控制网页的局部刷新。

2、Ajax的GET & POST请求实现过程

Ⅰ、GET请求实现过程

一、建立一个异步对象

const xmlhttp = new XMLHttpRequest();
复制代码

二、设置请求方式和请求地址

xmlhttp.open(type,url,true);
复制代码

三、发送请求

xmlhttp.send();
复制代码

四、监听状态的变化

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

五、处理返回的结果

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

Ⅱ、Ajax的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() 方法中规定您但愿发送的数据：
//此方法必须在open() 方法和 send() 之间调用
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("userName=ljm&userPwd=123456");
复制代码

四、监听状态的变化

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4) {
        //code...
    }
}
复制代码

五、处理返回的结果

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

3、实例

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

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

Ⅱ、Ajax的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("没有接收到服务器返回的数据");
        }
    }
}
复制代码

4、XmlHttpRequest对象的方法和属性

一、方法：

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

二、属性：

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

5、问题

Ⅰ、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 方法主要用于更新数据。 ##Ⅲ、什么是同步方式与异步方式？

一、同步方式发送请求

发送一个请求，须要等待响应返回，而后才可以发送下一个请求，若是该请求没有响应，不能发送下一个请求，客户端会处于一直等待过程当中。 同步请求：客户端提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

举个例子: 例如中午食堂吃饭: 同步就是男生请女生去吃饭，女生一开始是拒绝和你吃饭；你就不停的邀请她…一直等待…连菜都不敢点，直到对方赞成..，才一块儿去吃饭,期间不能离开. 上述场景: 适用于准情侣或者情侣!

二、异步方式发送请求

发送一个请求，不须要等待响应返回，随时能够再发送下一个请求，即不须要等待。 异步: 客户端请求经过事件触发->服务器处理（此时浏览器仍然能够做其余事情）->服务器处理完毕,异步的给予浏览器响应。

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

6、总结

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