Ajax
作用:
-
向服务器请求额外的数据而无需卸载页面(也就是页面刷新),会带来更好的用户体验;
-
异步 (当前端页面向后端执行程序的过程中,如果请求执行成功,那么我就会再回来处理这个请求响应,在请求还未执行成功,那么我的代码将继续执行下去);
简介:Ajax技术的核心是XMLHttpRequest对象(XHR);XHR提供了向服务器发送请求和解析服务器响应提供了流畅的接口,可以以异步的方式去从服务器去获取更多的信息;当用户触发了某一个事件,在不断刷新网页的情况下,更新服务器的最新数据;
一、实例化XMLHttpRequest对象
-
在当今的各大浏览器中都支持原生的XHR对象,在这些浏览器中创建XHR对象可以实现实例化XMLHttpRequest,在编译器中new一个xhr即可, 我们创建并且将对象输出在控制台上
我们打开控制台查看输出对象中的一些参数,在众多参数之间,我建议我们去查看以下四个就ok,如图:
2. ok,在我们使用XHR对象时,先必须去调用open()方法,去打开请求。这个方法他接受三个参数: 第一个参数为要发送的请求类型(get或者post) 第二个参数为请求的地址URL 第三个参数表示是否异步(true表示异步,false表示 同步);
3.我们这里进行测试,在项目文件夹下新建一个txt文件,写入内容
随后我们需要在代码中去增加open()方法,并重新启动代码进行控制台输出
ok,看到这两个信息,准备请求已经成功了;
4. 接下来我们去调用send();方法去发送请求,他的参数为 如果是GET的请求方式,参数直接设置在请求的路径之后(?双引号内),我这里没有参数所以将参数设置为null; 如果是POST请求,有参数则设置参数,无参数设置为null;
运行后我们打开控制台进行查看
可以看到我们刚刚创建的test.txt中的内容被获取到了
当我们访问路径写错的情况下打开控制台他就会提示,如图
5. 解析响应
在刚刚的操作中我们不是已经请求成功然后拿到了他的xhr.responseText,接下来我们要将拿到的数据进行解析,然后进行使用吗?ok,我们在控制在进行解析并输出结果;
ok,下来我们可以尝试去新建一个json的文件并写进去内容然后进行解析操作,并且将获取到的json转化为数组形式;