AJAX基础学习

什么是 AJAX ？

AJAX=异步javascript和XML

AJAX是一种用于创建快速网页的技术

通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新，不需要加载整个网页，对网页的某部分进行更新

XMLHttpRequest是AJAX的基础

XMLHttpRequest用于在后台与服务器交换数据，
创建XMLHttpRequest对象的语法
新版本使用：var able=new XMLHttpRequest()（所有现代浏览器（IE7+、Friefox、Chrome、Safari））
老版本使用：variable=new ActiveXObject("Microsoft.XMLHTTP");(IE5和IE6)
var variable
if(windown.XMLHttpRequest）
{
variable=new XMLHttpRequest()
}
else{
variable=new ActiveXObject("Microsoft.XMLHTTP")
}

请求发送服务器使用XMLHttpRequest对象的open()和send()方法

 

variable.open（method,url,async）
method：请求类型:get或者post
url:文件服务器上地址
async:true（异步)，false(同步)
send(string)将请求发送到服务器
 
像Http表单哪样POST数据，使用setRequestHeader（）来添加Http头，然后send（）方法中规定你希望发送的数据
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
setRequestHeader（header，value）：header规定头名称，value规定头值
当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：
 
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
 

使用 XMLHttpRequest 对象的responseText和responseXML属性

 

responseText：获取字符串形式的响应数据
responseXML：获取xml形式的响应数据

onreadystatechange事件

当改变readyState时，触发onreadystatechange事件
onreadystatechange:储存函数（或者函数名），每当readyState属性改变时调用
readyState：0：请求初始化
        1：服务器连接已经建立
        2：请求已经接收
        3：请求处理中
        4：请求已经完成，且响应
 
status:        200:OK
                  404:未找到页面
 
callback函数
callback函数是一种参数形式传递给另一个函数的函数
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
 
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）
function loadX(url)
{
var xmlHttp
   if(windown.XMLHttpRequest)
   {
    xmlHttp=new XMLHttpRequest()
    }
   else
   {    
    xmlHttp=new ActiveXObject()
    }
    xmlHttp.onreadystatechange=stateChange
    xmlHttp.open("GET",url,true)；
    xmlHttp.send()
}
 
function stateChange(){
  if(xmlHttp.readystate==="4"&&xmlHttp.status==="200")
  {
    document.getElementById("T1").innerHTML=xmlhttp.responseText;
  }
  else
  {
    alert("Problem retrieving data:" + xmlhttp.statusText)
   }
}
 
<div id="T1" style="border:1px solid black;height:40;width:300;padding:5"></div><br />
<button onclick="loadXMLDoc('/example/ajax/test_xmlhttp2.txt')">Click</button>