AJAX初探

什么是AJAX？

AJAX步骤

• 创建 XMLHttpRequest 实例

• 发出 HTTP 请求

• 接收服务器传回的数据

• 更新网页数据

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 xhr.onerror = function () {
    console.log('服务器异常')
}
xhr.send()

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()

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对象的状态

XMLHttpRequest.onreadystatechange

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()

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

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

XMLHttpRequest.status 与 XMLHttpRequest.statusText

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

XMLHttpRequest.status 与 XMLHttpRequest.statusText表

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

XMLHttpRequest.response

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

XMLHttpRequest.responseText

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)

『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请求

XMLHttpRequest.setRequestHeader()

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

var xhr = new XMLHttpRequest()

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

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

xhr.send()

XMLHttpRequest.send()

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()

XMLHttpRequest 实例的事件

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

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

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

参考：

XMLHttpRequest 对象-阮一峰JavaScript教程

XMLHttpRequest-MDN

XMLHttpRequest使用详解

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