ajax

Posted 2021-02-12 web大师·杨

ajax：前后台数据交互依赖的一项技术。

ajax是异步的javascript和XML，它最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

1.XMLHttpRequest    ActiveXObject

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象

variable=new XMLHttpRequest();

variable=new ActiveXObject("Microsoft.XMLHTTP");

2.ajax向服务器发送请求

这里用到XMLHttpRequest对象的两个方法：

open()     规定请求的类型、URL 以及是否异步处理请求。  

         open(method,url,async)

send()    将请求发送到服务器。

         send(string)   这里的 string只用于post请求

3.onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

onreadystatechange     存储函数，每当readyState属性改变时，就会调用该函数。

readyState     存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

　　　　　　0: 请求未初始化

　　　　　　1: 服务器连接已建立

　　　　　　2: 请求已接收

　　　　　　3: 请求处理中

　　　　　　4: 请求已完成，且响应已就绪

status           200："OK"

　　　　　   404：未找到页面

4.responseText    服务器响应

获得字符串形式的响应数据

原生ajax

function ajax（method,url,sync,fn）{
 var xmlhttp=new XMLHttpRequest（）
 xmlhttp.open（method,url,sync）
 xmlhttp.send（）
 xmlhttp.onreadystatechange=function（）{
  if（xmlhttp.readyState==4）{
   if（xmlhttp.status==200）{
    fn（xmlhttp.responseText）
   }
  }
 }
}
ajax（“get”，“data/aa.txt”,true，ff）
function ff（data）{
 var arr=JSON.parse（data）
 document.getElementById（“div”）.innerhtml=arr[0].name;
}