ajax

---

title: ajax
date: 2019-08-11 09:32:30
categories:

• 异步ajax
  tags:
• 异步ajax

---

• 简介：在无需重新加载整个网页的情况下，能够部分更新网页

• 主要对象:XMLHttpRequest对象，用于在后台和服务器交换数据，在不重新加载整个网页的情况下，对网页的某部分进行更新

  variable = new XMLHttpRequest();
  variable = new ActiveXobject("Microsoft.XMLHTTP")
  实例：
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
      //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
      xmlhttp=new XMLHttpRequest();
  }
  else
  {
      // IE6, IE5 浏览器执行代码
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  

请求

• 将请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法

  1. 实例：

     xmlhttp.open("get","...",true);
     xmlhttp.send()
     

  2. open(method,url,async) method:请求的类型，get或者post url：文件在服务器上的位置 async:true 异步或者false 同步

  3. send(string) 将请求发送到服务器

响应

• responseText:获取字符串类型的响应数据，document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

• responseXML:获取服务器返回的xml对象

  xmlDoc=xmlhttp.responseXML;
  txt="";
  x=xmlDoc.getElementsByTagName("ARTIST");
  for (i=0;i<x.length;i++)
  {
      txt=txt + x[i].childNodes[0].nodeValue + "<br>";
  }
  document.getElementById("myDiv").innerHTML=txt;
  

事件

• 每当readyState 改变时，就会触发onreadystatechange事件,readystate属性存在XMLHTTPRequest的状态信息

• 1. onreadystatechange 存储函数，每当readystate属性改变时候，就会调用该函数
  2. readyState 存储状态
     1. 0 请求未初始化
     2. 1 服务器连接已经建立
     3. 2 请求已经接受
     4. 3 请求处理中
     5. 4 请求已经完成，且响应已经就绪

• 实例

  xmlhttp.onreadystatechange=function()
  {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
          document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
  }