AJAX

什么是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的状态码,表示服务器返回是正常状态。

原文地址:https://www.cnblogs.com/ianyanyzx/p/9724951.html