[JS] - AJAX教程

0x01 - 介绍:

作用:在不重新加载整个页面时,对网页的局部进行刷新。

这里的刷新,可以理解为:当前页面向服务端发起了一个请求,然后服务端将数据返回给当前页面,当页面接收到数据之后,通过DOM操作,将新的内容,把旧内容替换了。


0x02 操作:

使用 AJAX 一共需要 4 个步骤!

请务必记住这 4 个步骤!

  • 1:创建 XMLHttpRequest 对象。
  • 2:使用 open() 方法,建立联系。
  • 3:使用 send() 方法,将请求发出。
  • 4:接收服务端返回的数据。

1、创建对象:

  • 需要用一个变量来接收实例化返回的对象,然后后续所有的内容,都是由接收的该变量来进行调用!
    var xhr = new XMLHttpRequest();
    

2、建立联系:

  • 可以将这个步骤理解为:我要通过GET请求方式还是POST请求方式向这个url发起请求呢?

由以上那段话得知,我们需要为 open() 方法传入一个请求方式的参数,还有一个目标url的参数。

注意:在主域名前面,必须加上http://

//xhr.open("请求方式", "目标url");
xhr.open("GET", "http://localhost/api/get_comment");

3、将请求发送出去:

在 open() 写好了之后,我们则需要将请求发送出去,使用 send() 方法。

xhr.send();

4、获取服务端返回的数据[重要]:

在接收数据时,需要使用 onreadystatechange 这个监听事件。

我们可以试着将这个单词分开一下,然后理解一下它的意思。

  • on:事件的意思,想一想JQuery中的$.on()方法。

  • readystate: ready的意思是:准备,state的意思是:状态码,合并起来就是准备的状态码。

  • change: 变化、改变的意思。

  • 合并起来的意思就是:监听状态码的变化。

它的后面,有一个匿名函数,每当状态码发生变化时,就会调用一次这个匿名函数。

xhr.onreadystatechange = function(){

}

在 xhr 对象下,有一个 readyState 属性,这个属性就是准备的状态码,注意:onreadystatechange 事件,监听的就是它的值,请不要混淆。

readyState 一共有 5 个 状态码,分别为:0 1 2 3 4。

当准备的状态码为 4 时,才说明返回的数据已经是完整的了,那么我们则可以在匿名函数中,使用 if 语句来判断 xhr 对象下的 readyState 的值 是否为 4。

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){

    }
}

这个时候,如果 readyState == 4 了,则可以获取数据了,但是如果 返回的是一个 404 呢?那岂不是没有意义了,所以,我们可以在这里判断一下,HTTP的状态吗,如果是200,则说明是返回没有问题的,在这里,我们使用 xhr 对象下的 status 属性来判断。

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){

    }
}

我保证,这时候真的可以获取返回的数据了!我们使用 xhr 对象下的 response 属性,来获取返回的内容。

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.response);
    }
}

这时候,可以在控制台查看获取到的数据,然后您可以自定义进行DOM的操作了~


0x03 - 返回的是JSON数据:

现在返回的都是JSON格式的数据,返回到客户端之后,它成为了一个字符串形式的JSON,注意,他不是对象,无法通过 对象.键名的形式来调用。

那么,我们需要在前端进行处理一下,使用 JSON.parse()方法,将字符串形式的JSON,转换成对象形式的JSON,这时,才是真正的完毕!

var json1 = "{"name":"甄雨锋"}";
var json2 = JSON.parse(json1);

此时,json2就变成了对象形式的JSON,可以通过 对象.键名的方式调用了~

发表评论 / Comment

用心评论~