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

Posted 程序员阿良

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一简单学习Ajax的GET & POST请求相关的知识,希望对你有一定的参考价值。

一、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的回调函数将数据更新到浏览器页面具体位置。


以上是关于一简单学习Ajax的GET & POST请求的主要内容,如果未能解决你的问题,请参考以下文章

POST &amp; GET &amp; Ajax 全解

搬运朋友的干货

JavaScript的jsonp

AJAX实现_JQuery实现方式get&post

再聊Ajax

ajax异步请求