JavaScript

0x01-介绍:作用:在不重新加载整个页面时,对网页的局部进行刷新。这里的刷新,可以理解为:当前页面向服务端发起了一个请求,然后服务端将数据返回给当前页面,当页面接收到数据之后,通过DOM操作,将新的内容,把旧内容替换了。0x02操作:使用AJAX一共需要4个步骤!请务必记住这4个步骤!1:创建XMLHttpRequest对象。2:使用open()方法,建立联系。3:使用send()方法,将请求发出。4:接收服务端返回的数据。1、创建对象:需要用一个变量来接收实例化返回的对象,然后后续所有的内容,都是由接收的该变量来进行调用!varxhr=newXMLHttpRequest();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个状态码,分别为:01234。当准备的状态码为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,这时,才是真正的完毕!varjson1="{"name":"甄雨锋"}";varjson2=JSON.parse(json1);此时,json2就变成了对象形式的JSON,可以通过对象.键名的方式调用了~

2021-11-22 135 0