阿贾克斯学习笔记

学习代码:

function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();
}

知识点:

1.XMLHttpRequest对象用于和服务器交换数据

2.如果需要把请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法

3.open(method,url,async)

   method:规定请求的类型

   url:文件在服务器上的位置

   async:true或者false

4.send(String)  将请求发送到服务器 （String仅用于post请求）

5.如果要像HTMl表单那样POST数据，使用setRequestHeader()来添加HTTP头，然后在send()方法中规定    您发送的数据。

   例子代码:

xmlhttp.open("POST","address",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Henry&lname=Ford");

6.通过 AJAX，JavaScript 无需等待服务器的响应，而是：

1)在等待服务器响应时执行其他脚本

2)当响应就绪后对响应进行处理

true与false的区别

代码对比:

Async==true时:

    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();

Async==false时:

    xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
    xmlhttp.send();
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

7.XHR对象的属性:

responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

 ps:解析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;

8.onreadystatechange事件

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

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

3)XMLHttpRequest 对象的三个重要的属性：

onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

 4)当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

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

9.回调函数

待定。。。

转载于:https://my.oschina.net/u/3347640/blog/866614