AJAX 异步处理

AJAX异步处理基本操作,参考教程w3school

AJAX是什么

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX可以在页面不刷新的情况更新局部页面，也可以在页面加载过程中先加载重要部分在加载不那么重要的部分，提高页面加载速度

AJAX工作流程

AJAX基本对象

XMLHttpRequest是AJAX的基础，XMLHttpRequest 用于在后台与服务器交换数据

1. XMLHttpRequest的创建

现代浏览器内置XMLHttpRequest对象使用如下方式创建

1	xmlhttp = new XMLHttpRequest();

老版本的IE浏览器不支持XMLHttpRequest对象，使用ActiveXObject对象创建:

1	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

根据浏览器的不同使用不同的方式创建对象

var xmlhttp = null;
if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
}else{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
}

2. 使用AJAX发送请求

使用的方法如下:

open(method,url,async)          规定请求类型，URL，是否异步处理请求
    method:请求类型;GET/POST
    url:要请求的连接;如www.google.com
    async:是否同步;true(异步)/false(同步)
send(String)                    发送请求到服务器
    string:仅用于post请求
setRequestHeader(header,value)  向请求添加HTTP头
    header:规定头的名称
    value:规定头的值

3. 获取响应

涉及属性如下:

responseText                  获得字符串形式的相应数据
responseXML                   获得XML形式的响应数据

4. onreadystatechange事件

onreadystatechange是当AJAX请求发送到服务器时，根据服务器的处理进度进行反馈的标志

readyState 属性               存储XMLHttpRequest的状态，从0到4变化
      0：请求为初始化
      1：服务器连接已建立
      2：请求已接收
      3：请求处理中
      4：请求已完成，且响应已就绪
status
      200：“ok”
      404：paga not found
onreadystatechange          存储函数名，在每次readyState变化时调用存储的函数

一个基本的请求相映模板

function loadXMLDoc(){
  var xmlhttp = null;
  if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
  }else{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
  }
  xmlhttp.onreadystatechange = function(){
    if(xmlhttp.state == 200 && xmlhttp.readeyState == 4){
      //获取响应数据
      var responseT = xmlhttp.responseText;
    }
  };
  xmlhttp.open("GET","www.baidu.com",true);
  xmlhttp.send(null);
}

一个使用ajax发送到服务器，服务器使用spring-mvc返回JSON数据并在页面显示的实例源码

残星

ajax异步处理