版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_38684419/article/details/82227017
Ajax英文:Asynchronous Javascript And XML(异步JavaScript和XML)。
传统的网页刷新数据需要将整个页面给刷新,但是使用Ajax可以实现无需加载整个页面的情况下刷新局部页面。
Ajax工作原理和XMLHttpRequest对象
Ajax的工作原理就是通过创建XMLHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后通过JavaScript操作DOM来更新页面。其工作原理图为:
因为Ajax是通过创建的XMLHttpRequest对象来进行请求的,所以XMLHttpRequest是Ajax的基础。
XMLRequest对象的属性有:
onreadystatechange:每次状态改变所触发的事件
responseText:从服务器返回的字符串格式的响应数据
responseXML:从服务器返回的XML格式的数据
status:服务器返回的状态码(200、404、304等)
readyStats:对象的状态值。
Ajax请求
Ajax是基于XMLHttpRequest对象来请求的,所以我们要先创建XMLRequest对象。
var xhr = new XMLHttpRequest
如果是IE5或者IE6使用以下代码
var xhr = new ActiveXObject("Microsoft.XMLHTTP")
向服务器发送请求需要用到XMLHttpRequest对象的open()和send()方法。
方法 | 描述 |
---|---|
open(method, url, async) | 规定请求的类型,URL以及是否是以异步方式请求
|
send(string) | 将数据发送到服务器
|
然后发送数据
xhr.open('get', '/test', true)
xhr.send()
如果需要发送表单类型的数据需要使用setRequestHeather()添加HTTP头
方法 | 描述 |
---|---|
setResquestHeader(header, value) | 向请求中添加HTTP头
|
例如
var xhr = new XMLHttpRequest
var form = new FormData()
// 向form添加数据
form.append('name', 'hhh')
form.append('age', '18')
form.append('description', 'very cool')
xhr.open('post', '/test', true)
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
xhr.send(form)
Ajax响应
如果我们从服务器收到数据,需要我们将数据显示到页面上。使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('result').innerText = xhr.responseText
}
}
这里说明一下readyState的状态码
- 0:请求初始化
- 1:服务器连接成功
- 2:请求以接收
- 3:请求处理中
- 4:请求处理完成,返回响应数据