2019-05-20

Ajax的作用:

我们在客户端应用的时候,并不能随意请求服务端的数据,只有几种仅有的方式去请求数据,但是在用户使用的过程中,我们必须经常请求数据,而有了Ajax之后,我们可以通过js控制,随时请求服务器数据,进行网络编程。

Ajax快速上手:

直接在HTML文件中的script标签中写代码:

1. 新建一个代理请求对象:

var xhr = new XMLHttpRequest();

2.给这个代理人指定请求方式和请求地址:

xhr.open('GET' , 'http://服务器上面请求页面的地址');

3.开始请求

xhr.send(); 

4.因为可能请求内容很多,js代码是单线执行,不可能等待请求,所以Ajax是一个通知形式来告诉是否拿到内容

xhr.onreadystatechange = function(){

console(this.readyState);

}

输出结果是:1,2,3,4

代表的是几种状态的改变


5.如何拿到数据?

我们只有在响应对应的状态拿到对应的值,或者等响应完成之后拿到值

获取响应头:

xhr.getAllResponseHeaders();//获取所有的响应头信息,是一个字符串

xhr.getResponseHeaders('响应头中对应的键');

获取响应体:

xhr.responseText();//获取响应体中的信息,也就是服务器返还给页面的信息

事例:不考虑兼容性最简单获取响应体信息的代码:

设置请求报文的方式:

1.设置请求行

xhr.open('post','请求路径');

2.设置请求头

xhr.setRequestHeader('Foo','bar');

3.设置请求体

xhr.setRequestHeader('Content-Type','application/对应的数据格式');

xhr.send('数据的格式');

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Ajax和XMLHttpRequest 我们通常将Ajax等同于XMLHttpRequest,但细究起来它们两个是...
    changxiaonan阅读 2,328评论 0 2
  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,371评论 0 7
  • ajax作为前端开发必需的基础能力之一,你可能会使用它,但并不一定懂得其原理,以及更深入的服务器通信相关的知识。在...
    萧玄辞阅读 854评论 0 0
  •   2005 年,Jesse James Garrett 发表了一篇在线文章,题为“Ajax: A new App...
    霜天晓阅读 911评论 0 1
  • # Ajax标签(空格分隔): 笔记整理---[TOC]### 从输入网址开始:- 在学习ajax之前,你应该先了...
    V8阅读 305评论 1 0