119_AJAX 笔记2_AJAX 的对象，请求，响应

1，AJAX对象

创建 AJAX对象的方法

1. 所有的现代浏览器
   1. 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象
   2. 创建方法：variable=new XMLHttpRequest();
2. 老版本的 Internet Explorer （IE5 和 IE6）
   1. 使用 ActiveX 对象
   2. 创建方法：variable=new ActiveXObject("Microsoft.XMLHTTP");

3. var xmlhttp;
   if (window.XMLHttpRequest)
   {
       //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
       xmlhttp=new XMLHttpRequest();
   }
   else
   {
       // IE6, IE5 浏览器执行代码
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

2，AJAX请求

• 1，AJAX的请求方法
  • open(method,url,async)：规定请求的类型、URL 以及是否异步处理请求
  • setRequestHeader(header,value)：post请求中，header: 规定头的名称，value: 规定头的值
  • send(string)：将请求发送到服务器，string只用于post请求
• 2，method：请求方式
  • get请求：
    • 简单，更快

    • xmlhttp=new XMLHttpRequest();
      //get请求不带参数
      xmlhttp.open("GET","/try/ajax/demo_get.php",true);
      //get请求带参数
      xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
      
      xmlhttp.send();

  • post请求：使用post请求的场景
    • 无法使用缓存文件（更新服务器上的文件或数据库）
    • 向服务器发送大量数据（POST 没有数据量限制）
    • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

    • //简单post：没有数据发送
      xmlhttp.open("POST","/try/ajax/demo_post.php",true);
      xmlhttp.send();
      
      //复杂post：有数据发送
      xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
      xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      xmlhttp.send("fname=Henry&lname=Ford");

• 3，url：文件在服务器上的位置
  • 服务器上文件的地址
  • 该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）
• 4，async：是否是异步
  • true：异步
    • 在等待服务器响应时执行其他脚本
    • 当响应就绪后对响应进行处理
  • false：同步
    • JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止
    • 当使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可

3，AJAX响应

响应返回数据的格式有两种：

• responseText ：
  •   获得字符串形式的响应数据。

  • document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

• responseXML：   
  • 获得 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;