AJAX 的简单用法:

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

 

1. XMLHttpRequest 对象;

    所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象:variable=new XMLHttpRequest();

   老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:variable=new ActiveXObject("Microsoft.XMLHTTP");

    为了应对所有的现代浏览器的写法:

    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      }
    else
       {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }




2.向服务器发送请求:

         一个简单的 GET 请求:

     xmlhttp.open("GET","demo_get.asp",true);
     xmlhttp.send();

        一个简单 POST 请求:

    xmlhttp.open("POST","demo_post.asp",true);
    xmlhttp.send();


3.服务器响应
responseText
属性返回字符串形式的响应:
  document.getElementById("ID").innerHTML=xmlhttp.responseText;

4.onreadystatechange 事件:
属性:
onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数
       readyState:0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成,且响应已就绪 
       status: 200: "OK"  404: 未找到页面
       当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
          xmlhttp.onreadystatechange=function()
             {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
             }
一个简单的AJAX的例子的完整写法:
 function cha(){
//创建xmlHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

//向服务器发送请求,服务器根据状态响应,返回数据
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
div1.innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","页面一.html",true);
xmlhttp.send();

}

























posted @ 2016-05-21 13:46  三石!  阅读(250)  评论(0编辑  收藏  举报