什么是AJAX?
ajax全称为Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求。是一种技术方案,但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript,而其中最核心的依赖是浏览器提供XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。 实现在页面不刷新的情况下和服务端进行数据交互。 要想用AJAX,最主要的是要用内置的 XMLHttpRequest 的对象实现。
具体来说,AJAX 包括以下几个步骤。
1.创建XMLHttpRequest实例
2.发出HTTP请求
3.接收服务器传回的数据
4.更新网页数据
创建XMLHttpRequest实例:
XMLHttpRequest本身是一个构造函数,可以使用new命令生成实例。它没有任何参数。
var xhr = new XMLHttpRequest()
初始化XMLHttpRequest对象:
用open方法可以对XMLHTTPRequest进行初始化设置
xhr.open(method,url,
async,
user,
password
)
这个方法可以接受5个参数。后两个基本用不到,说下前三个
method:请求的方法,可以是GET、POST
url:请求发送目标的URL
async:布尔值,true为异步,false为同步,默认为true也不会改,不然我们要异步操作干嘛。
发出HTTP请求:
用send方法可以发出HTTP请求
xhr.send()
参数是可选的,一般带了参数的话,使用POST的方式发送请求的。
readyState属性:
XMLHttpRequest.readyState
返回一个整数,表示实例对象的当前状态。该属性只读。它可能返回以下值。
- 0,表示 XMLHttpRequest 实例已经生成,但是实例的
open()
方法还没有被调用。 - 1,表示
open()
方法已经调用,但是实例的send()
方法还没有调用,仍然可以使用实例的setRequestHeader()
方法,设定 HTTP 请求的头信息。 - 2,表示实例的
send()
方法已经调用,并且服务器返回的头信息和状态码已经收到。 - 3,表示正在接收服务器传来的数据体(body 部分)。这时,如果实例的
responseType
属性等于text
或者空字符串,responseText
属性就会包含已经收到的部分信息。 - 4,表示服务器返回的数据已经完全接收,或者本次接收已经失败。
status属性:
XMLHttpRequest.status
属性返回一个整数,表示服务器回应的 HTTP 状态码。一般来说,如果通信成功的话,这个状态码是200;如果服务器没有返回状态码,那么这个属性默认是200。请求发出之前,该属性为0
。该属性只读。
- 200, OK,访问正常
- 301, Moved Permanently,永久移动
- 302, Move temporarily,暂时移动
- 304, Not Modified,未修改
- 307, Temporary Redirect,暂时重定向
- 401, Unauthorized,未授权
- 403, Forbidden,禁止访问
- 404, Not Found,未发现指定网址
- 500, Internal Server Error,服务器发生错误
基本上,只有2xx和304的状态码,表示服务器返回是正常状态。