Ajax 要点

Ajax 全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML）

Ajax的实现是基于 xmlHttp对象 异步发送请求

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

 

  XMLHttpRequest对象主要属性：

  onreadystatechange  每次状态改变所触发事件的事件处理程序。

  responseText     从服务器进程返回数据的字符串形式。

  responseXML    从服务器进程返回的DOM兼容的文档数据对象。

  status           从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

  status Text       伴随状态码的字符串信息

  readyState       对象状态值

 

  XMLHttpRequest对象主要方法：

  open("method","URL")    建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL

  setRequestHeader ( )   把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 (‘post‘方法一定要 )

  send ( content )     向服务器发送请求,Get请求不需要设置content

 

JS原生发送Ajax get请求

function testGet() {
    var fname = document.getElementById("testGetName").value;
　　//添加请求参数
    xmlhttp.open("GET","Test.ashx?fname=" + fname + "&random=" + Math.random(),true);
    xmlhttp.onreadystatechange = callback;
    xmlhttp.send(null);
}

JS原生发送Ajax Post请求

function testPost() {
    var fname = document.getElementById("testPostName").value;
    xmlhttp.open("POST","Test.ashx?"  + "&random=" + Math.random(),true);
    //设置请求头
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
    xmlhttp.onreadystatechange = callback;
    //设置请求体
    xmlhttp.send("fname="+fname);
}

回调函数

function callback() {
    //readyState 状态码 4 表示请求已完成
    //status 状态200 表示请求数据成功
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
　　　　//返回的数据在 xmlHttp.responseText中保存
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
}