Ajax

什么是Ajax?

ajax是一种技术方案,但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。 实现在页面不刷新的情况下和服务端进行数据交互


如何实现Ajax?

  • XMLHttpRequest对象
  • fetch

XMLHttpRequest的用法、属性

1.创建XHR对象

var xhr = new XMLHttpRequest();

2.xhr.open()

接受三个参数

  • 1.要发送的请求的类型("get"、"post"),
    1. 请求的URL
    1. 是否异步发送请求的布尔值

3.xhr.send()

接受一个参数

  • 1.请求主体发送的数据,不需要则传入(null)

4.xhr.responseText:作为响应主体被返回的文本

5.xhr.responseXML:如果响应的内容类型是"text/html"或"application/xml",这个属性中将保存包含着响应数据的XML DOM文档

6.xhr.status:响应的HTTP状态

7.xhr.statusText:HTTP状态的说明

8.xhr.readyState:请求/响应过程的当前活动阶段

  • 0:未初始化。尚未调用open()方法。
  • 1:启动。已经调用open()方法,但尚未调用send()方法。
  • 2:发送。已经调用send()方法,但尚未接收到响应。
  • 3:接收。已经接收到部分响应数据。
  • 4:完成。已经接收到全部数据,而且已经可以在客户端使用。
    说明:可以把xhr.readyState属性和TCP/IP的三次握手类比一下,1,2表示第一次,3表示第二次,4表示第三次。只要readyState属性变一次,就会触发一次readyState事件。还要强调一点的是必须在调用open()之前指定onreadystatechage事件处理程序才能确保跨浏览器兼容性。

9.xhr.abort():取消异步请求,在接收响应之前使用

10.xhr.setRequestHeader():设置自定义的请求头部信息。

在调用open()方法之后,send()方法之前使用。

11.xhr.timeout:表示请求在等待响应多少毫秒之后就终止。

12.xhr.overrideMimeType():用于重写响应的MIME类型。

比如服务器返回的MIME类型时text/plain,但数据实际包含的是XML,根据MIME类型,即使数据是XML,responseXML属性仍然是null,通过调用该方法,可以保证把响应当作XML而非纯文本使用。调用方法必须在send()之前使用

var xhr = new XMLHttpReququest()
xhr.open("get","text.php",true)
xhr.overrideMimeType("text/html")
xhr.send(null)

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

推荐阅读更多精彩内容