AJAX初探

什么是AJAX？

依赖浏览器提供的XMLHttpRequest对象，XMLHttpRequest对象使浏览器可以『发出HTTP请求与接收HTTP响应』。实现在『页面不刷新的情况下和服务端进行数据交互』

AJAX步骤

• 创建 XMLHttpRequest 实例

• 发出 HTTP 请求

• 接收服务器传回的数据

• 更新网页数据

---

XMLHttpRequest知识图谱

XMLHttpRequest对象

AJAX实例

①

var xhr = new XMLHttpRequest()
//第二个参数表示一个资源而不是文件
xhr.open('GET', 'xx', true)
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if ((xhr.status >= 200 && xhr.status < 300 )|| xhr.status === 304) {
            console.log(xhr.responseText')
        }else{
            console.log('服务器异常')
        }
    }
}
var onerror = function () {
    console.log('服务器异常')
}
xhr.send()

② 可以使用load事件，代替readyStateChange事件，省去『(xhr.readyState === 4)』判断步骤

var xhr = new XMLHttpRequest()
xhr.open('GET', 'xx', true)
xhr.addEventListener('load', function () {
  console.log(xhr.status)
  if ((xhr.status>=200&& xhr.status < 300) || xhr.status === 304){
    var data = xhr.responseText
    console.log(data)
  }else{
    console.log('服务器异常')
  }
})
xhr.onerror = function () {
  console.log('服务器异常')
}
xhr.send()

③ POST方法的使用

var xhr = new XMLHttpRequest()
xhr.open('POST', '/register', true)
xhr.onload = function (e) { 
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
  console.log(this.responseText)
  }
}
xhr.ontimeout = function (e) { 
console.log('请求超时')
}
xhr.onerror = function(e) {
console.log('连接失败')
}
var data = 'xxx&password=xxx123'
xhr.send(data)

---

XMLHttpReques部分属性简析

readyState XMLHttpReques对象的状态

值	状态	描述
0	UNSENT	XMLHttpRequest实例已经生成，但是实例的open()方法还没有被调用。
1	OPENED	open()方法已经调用，但是实例的send()方法还没有调用，可使用setRequestHeader()方法，设定请求的头信息。
2	HEADERS_RECEIVED	表示实例的『send()』方法已经调用，并且服务器返回的头信息和状态码已经收到。
3	LOADING	正在接收服务器传来的部分数据体。这时， responseText 属性已经包含部分数据
4	DONE	服务器返回的数据已经完全接收，或者本次接收已经失败。

---

XMLHttpRequest.onreadystatechange

readyState属性变化发生变回时，就会触发readystatechange(全小写)事件

var xhr = new XMLHttpRequest()
xhr.open('GET', '/ajax.json', true)
xhr.onreadystatechange = fucntion () {
if (xhr.readyState === 4) {
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
    console.log(xhr.responseText)
    } else {
    console.log('服务器异常')
    }
  }
}
xhr.send()

⚠️不能用下面的代码代替 上例中 xhr.readyState xhr.status的判断,比如当 status的值为202 304也是可行的

if (xhr.readyState === 4 && xhr.status === 200) {
  console.log(responseText)
}

(『abort()』方法，终止XMLHttpRequest请求，也会造成readyState属性变化，导致调用XMLHttpRequest.onreadystatechange属性）

---

XMLHttpRequest.status 与 XMLHttpRequest.statusText

返回一个整数，表示服务器回应的Http状态码,请求发出之前，该属性为0

XMLHttpRequest.statusText返回一个字符串，表示服务器发送的状态提示。如果请求的状态readyState的值为『"0"』或者『"1"』，则这个属性的值将会是一个空字符串。

XMLHttpRequest.status 与 XMLHttpRequest.statusText表

status	statusText
200	OK，访问正常
301	Moved Permanently，永久移动
302	Moved temporarily，暂时移动
304	Not Modified，未修改
307	Temporary Redirect，暂时重定向
401	Unauthorized，未授权
403	Forbidden，禁止访问
404	Not Found，未发现指定网址
500	Internal Server Error，服务器发生错误

if (xhr.readyState === 4) {
  if ((xhr.status >== 200 && xhr.status < 300) ||(xhr.status === 304)) {
    // 2xx和304的状态码，表示服务器返回是正常状态
    //处理服务器的返回数据
  }else{
    //出错
  }
}

---

XMLHttpRequest.response

表示服务器返回的数据体(即HTTP回应的body部分),在readyState === 3的阶段，请求没有结束之前，response属性包含服务器已经返回的部分数据(只读)

XMLHttpRequest.responseType(默认值为空字符等同于 text)

属性是一个字符串，表示服务器返回数据XMLHttpRequest.response的类型(可写),可以在『调用open()方法之后』、『调用send()方法之前』，设置这个属性的值，告诉服务器返回指定类型的数据

XMLHttpRequest.responseText

返回从服务器接收到的字符串(只读)，只有HTTP「请求完成接收」以后，该属性才会包含完整的数据

var xhr = new XMLHttpRequest()
xhr.open('GET', '/login', true)

xhr.responseType = 'text'
xhr.onload = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText)
   }
}
xhr.send(null)

---

XMLHttpRequest.timeout(只能在异步的情况下使用，及open()的第三个属性async: true)

返回一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。如默认值为 0，无时间限制

『XMLHttpRequestEventTarget.ontimeout』属性用于设置一个监听函数，如果发生timeout事件，就会执行这个监听函数。

实例

var xhr = new XMLHttpRequest()
xhr.open('GET', '/hello.json', true)

xhr.timeout = 3*1000
// 设定的超时时间为3000毫秒

xhr.onload = function (e) { 
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
  // 请求成功
  console.log(this.responseText)
}
}
xhe.ontimeout = function (e) {
  // XMLHttpRequest请求已经超时
}

xhr.send(null)

---

XMLHttpReques部分方法简析

使用open()方法发出HTTP请求

xhr.open(method, url, async, user, password)，使用open()方法的ajax请求，再次使用这个方法，等同于调用abort(),会终止请求

参数	值
method	使用的HTTP方法，GET、POST、PUT、DELETE
url	发送请求的URL
async	布尔参数，默认为true异步
user	用于认证的用户名，默认为null
password	用于认证的密码，默认为null

---

XMLHttpRequest.setRequestHeader()

设置浏览器发送设置的HTTP请求头信息，必须在『open()之后 send()之前』。如果多次对同一个请求头赋值，只会生成一个『合并了多个值的请求头』。

该方法接受两个参数。第一个参数是字符串，表示头信息的字段名，第二个参数是字段值。

var xhr = new XMLHttpRequest()

xhr.setRequestHeader('Content-Type', 'application/json')

xhr.onload = function () {
  // 请求成功
}

xhr.send()

---

XMLHttpRequest.send()

发送Http请求，默认为异步

XMLHttpRequest.send()方法接受一个可选的参数,GET方法下为『null』，POST为设定的具体信息体，如下例的data

var xhr = new XMLHttpRequest()
xhr.open('POST', '/login', true)
xhr.onload = function (e) { 
     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        console.log(this.responseText)
      }
}
xhr.onerror = function (e) {
  console.log('连接失败')
}
// send(),接受一个参数data
var data = 'username=YYP&password=123321'
xhr.send(data)

---

XMLHttpRequest.absort()

来终止已经发出的 HTTP 请求。调用这个方法以后，readyState属性变为0，status属性变为0。

---

XMLHttpRequest 实例的事件

• load事件 表示服务器传来的数据请求完毕

• error事件 表示事件请求出错

• abort事件 表示事件请求被终断

---

参考：

XMLHttpRequest 对象-阮一峰JavaScript教程

XMLHttpRequest-MDN

XMLHttpRequest使用详解

---

版权声明：本文为博主原创文章，未经博主许可不得转载