JavaScript创建ajax异步请求

发表于 | 分类于 ，

  利用ajax，可以创建异步请求，从而实现在不影响整个页面的情况下，局部更新网页某处的数据。

  异步请求可以应用在多个地方，最常见的就是我们在注册某个网站账号的时候，输入要注册的用户名，当鼠标焦点离开用户名输入表单的时候，如果输入的用户名已经存在于网站内，右侧会给出有相同用户名的提示。试想如果没有该功能，用户就必须在所有信息都填写完毕的情况下，点击”提交”按钮，才能知道用户名是否可以使用，大大降低效率。

创建XMLHttpReques对象

  先用js来写，第一步用构造函数初始化一个XMLHttpReques对象。

1
var request = new XMLHttpRequest()

  目前新版本的浏览器基本都支持XMLHttpReques对象，只有像IE5/IE6这种老旧的浏览器不支持，需要改用ActiveX对象。当然你也可以在使用XMLHttpReques前来做一个判断，以保证更强的兼容性。

1
2
3
4
5
6
7
var request
if (window.XMLHttpRequest) {
  request = new XMLHttpRequest()
} else {
  // IE5/IE6下使用
  request = new ActiveObject('Microsoft.XMLHTTP')
}

使用onreadystatechange监听是否加载完成

  创建完成后，使用onreadystatechange来监听readyState和status属性的改变。

1
2
3
4
5
request.onreadystatechange = function() {
  if (request.readyState === 4 && request.status === 200) {
    // 需要执行的代码
  }
}

  首先来说一下onreadystatechange。这个方法会在readyState属性发生改变时触发readystatechange事件的时候被调用。

  接着是readyState和status属性。

readyState:

XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个：

值 状态 描述
0 UNSENT 代理被创建，但尚未调用 open() 方法。
1 OPENED open() 方法已经被调用。
2 HEADERS_RECEIVED send() 方法已经被调用，并且头部和状态已经可获得。
3 LOADING 下载中； responseText 属性已经包含部分数据。
4 DONE 下载操作已完成。

引用自MDN XMLHttp​Request​.ready​State

status:

  status属性则返回一个响应中的数字状态码，比如”200”代表一个成功的请求。

向服务器发送请求

  首先用open()方法来初始化一个请求。

open()

1
request.open('GET', './text.json')

  open()有三个参数，第一个指定要使用的http方法，如GET方法或者POST方法，第二个参数指定要向其发送请求的url，第三个参数是一个布尔值，表示是否用异步执行操作，默认为ture，表示使用异步执行。

send()

1
request.send()

  send()表示发送请求。

实际使用示例

比如同目录下有一个名为”text.json”的json文件：

1
2
3
4
5
6
{
  "student": [
    {"name": "小明", "age": 12},
    {"name": "小红", "age": 13}
  ]
}

要实现点击按钮，获取小明的年龄，html代码如下：

1
2
3
4
5
6
<body>
  <button type="button" id="btn">click me</button>
  <div>
    小明的年龄为：<span id="age" style="color: red;"></span>
  </div>
</body>

js代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var btn = document.getElementById('btn')
var age = document.getElementById('age')
var request = new XMLHttpRequest()
var student
request.open('GET', './text.json')
request.onreadystatechange = function() {
  if (request.readyState === 4 && request.status === 200) {
    // 获取json文件的值，并转换为js对象
    student = JSON.parse(request.responseText).student
  }
}
request.send()

btn.onclick = function() {
  age.innerHTML = student[0].age
}

  上面的代码还用到了responseText()和JSON.parse()两个方法。

responseText()

  该方法返回从服务器接收到的字符串。

JSON.parse()

  该方法将一个json字符串转换为js对象。还可以添加一个转换结果函数，为该方法的第二个参数，将为对象的每个成员调用该方法。

跨域

  异步请求json文件，该文件直接使用的话必须与调用文件为同协议、同地址、同端口才能正常实现功能。如跨域使用需要使用其他方法来实现，本文没有提到跨域相关的内容，以后有机会再来谈一谈跨域。

0%