菜鸟教程AJAX教程学习记录

1、AJAX - 创建 XMLHttpRequest 对象
    XMLHttpRequest 是 AJAX 的基础。
    XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载         整个网页的情况下，对网页的某部分进行更新。

2、创建 XMLHttpRequest 对象
    创建 XMLHttpRequest 对象的语法：
    variable=new XMLHttpRequest();
    老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
    variable=new ActiveXObject("Microsoft.XMLHTTP");
    为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
    实例
    var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
3、Ajax-向服务器发送请求
    1）XMLHttpRequest对象用于和服务器交换数据
        向服务器发送请求我们使用XMLHttpRequest对象的open()和send()
        xmlhttp.open("GET","路径","true");
        xmlhttp.send();
    
    2）方法和描述
        open(method,url,async)---规定请求的类型、URL、以及是否异步处理请求
        method:请求的类型GET或POST
        url:文件在服务器上的位置
        async:true(异步)或false(同步)
        
        send(string)---将请求发送到服务器
        string:仅用于POST请求
        
    3）GET或POST的选择
        与POST相比，GET更简单也更快，并且在大部分情况下都能用
        然而，在以下情况中，请使用POST请求：
        1、无法使用缓存文件(更新服务器上的文件或数据库)
        2、向服务器发送大量数据(POST没有数据量限制)
        3、发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
        
    4）GET请求
        xmlhttp.open("GET","路径","true");
        xmlhttp.send();
        在上面例子中，可能会得到缓存的结果
        为了避免这种情况，请向URL添加一个唯一的ID
        xmlhttp.open("GET","路径?t="+Math.random(),"true");
        xmlhttp.send();
        如果希望通过GET发送信息，请向URL添加信息：
        xmlhttp.open("GET","路径？name=admin&pwd=admin","true");
        xmlhttp.send();
        
    5)POST请求
        xmlhttp.open("POST","路径",true);
        xmlhttp.send();
        如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头。
        然后在send()方法中规定希望发送的数据：
        
        xmlhttp.open("POST","路径",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("name=admin&pwd=admin");
        
        方法和描述
        setRequestHeader(header,value)
        向请求加HTTP头
        header:规定头的名称
        value:规定头的值
        
    6）url-服务器上的文件
        open()方法的url参数是服务器上文件的地址
        该文件可以是任何类型的文件，比如.txt,.xml或者是服务器脚本文件，比如
        .asp和.php(在传回响应之前，能够在服务器上执行任务)
    
    7）异步-True或者False
        AJAX指的是异步Javascript和XML
        XMlHttpRequest对象如果用于AJAX的话，其open()方法的async参数必须设置为true
        
        在等待服务器响应时执行其他脚本 当响应就绪后对响应进行处理
        
        Async=true
        当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：
        实例
        xmlhttp.Onreadystatechange=function(){
            if(xmlhttp.readystate==4&&xmlhttp.status==200)
            {
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","路径",true);
        xmlhttp.send();
        
        不推荐使用false，但对于一些小型的请求也是可以的，使用false时Javascript会等到服务器响应就绪
        才会继续执行。如果服务器繁忙或者缓慢，程序会挂起或停止
        当使用false时，onreadystatechange函数就不要编写了，代码放到send()后边就可以。
    
    
4、AJAX-服务器响应
    使用responseText或responseXML属性来获取来自服务器的响应
    responseText：获得字符串形式的响应数据
    responseXML:获得XML形式的响应数据
    
    1）responseText属性
        如果服务器的响应并非XML，则使用responseText属性
        responseText属性返回字符串形式的响应，因此可以这样使用
        
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    
    2）responseXML属性
        请求来自服务器的响应是XML,而且需要作为XML对象进行解析，则使用
        responseXML属性
        实例
        xmlDoc=xmlhttp.responseXML;
        txt="";
        x=xmlDoc.getElementsByTagName("xxxx");
        for(i=0;i            txt=txt+x[i].childNodes[0].nodeValue+"
";
        }
        document.getElementById("myDiv").innerHTML=txt;
        
5、XHR readyState
    1)onreadystatechange事件
        当请求被发送到服务器时，我们需要执行一些基于响应的任务。
        每当readyState改变时，就会触发onreadystatechange事件。
        readyState属性存有XMLHttpRequest的状态信息。
        下面是XMLHttpRequest对象的三个重要的属性
        onreadystatechange：
            存储函数（或函数名），每当readyState属性改变时，就会调用该函数
        readyState：
            存有XMLHttpRequest的状态，从0到4发生变化。
                0：请求未初始化
                1：服务器连接已建立
                2：请求已接收
                3：请求处理中
                4：请求已完成，且响应已就绪
        status:
            200：服务器响应正常。
            304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
            400：无法找到请求的资源。
            401：访问资源的权限不够。
            403：没有权限访问资源。
            404：需要访问的资源不存在。
            405：需要访问的资源被禁止。
            407：访问的资源需要代理身份验证。
            414：请求的URL太长。
            500：服务器内部错误。
        注意：onreadystatechange事件被触发5次（0-4）,对应着readyState的每个变化。
    2）使用回调函数
        回调函数是一种以参数形式传递给另一个函数的函数。
        如果网站上存在多个AJAX任务，那么应该为创建XMLHttpRequest对象编写一个标准的
        函数，并为每个AJAX任务调用该函数。
        该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务(每次调用可能不尽相同);

        

6、AJAX ASP实例和PHP实例
    AJAX用于创造动态性更强的应用程序
    
    实例解析-showHint()函数
    当用户在输入框中键入字符时，会执行函数"showHint"。该函数由"onkeyup"事件触发：
        ---------------------------
        
            ---------------------------
            前台代码
            
            输入姓名:
            
            

提示信息:

            ---------------------------
            asp代码：
            <%
            response.expires=-1
            dim a(30)
            'Fill up array with names
            a(1)="Anna"
            a(2)="Brittany"
            a(3)="Cinderella"
            a(4)="Diana"
            a(5)="Eva"
            a(6)="Fiona"
            a(7)="Gunda"
            a(8)="Hege"
            a(9)="Inga"
            a(10)="Johanna"
            a(11)="Kitty"
            a(12)="Linda"
            a(13)="Nina"
            a(14)="Ophelia"
            a(15)="Petunia"
            a(16)="Amanda"
            a(17)="Raquel"
            a(18)="Cindy"
            a(19)="Doris"
            a(20)="Eve"
            a(21)="Evita"
            a(22)="Sunniva"
            a(23)="Tove"
            a(24)="Unni"
            a(25)="Violet"
            a(26)="Liza"
            a(27)="Elizabeth"
            a(28)="Ellen"
            a(29)="Wenche"
            a(30)="Vicky"

            'get the q parameter from URL
            q=ucase(request.querystring("q"))

            'lookup all hints from array if length of q>0
            if len(q)>0 then
              hint=""
              for i=1 to 30
                if q=ucase(mid(a(i),1,len(q))) then
                  if hint="" then
                    hint=a(i)
                  else
                    hint=hint & " , " & a(i)
                  end if
                end if
              next
            end if

            'Output "no suggestion" if no hint were found
            'or output the correct values
            if hint="" then
              response.write("no suggestion")
            else
              response.write(hint)
            end if
            %>
            -----------------------------------------
            还有一个是PHP的，没做测试
            
                        // Fill up array with names
            $a[]="Anna";
            $a[]="Brittany";
            $a[]="Cinderella";
            $a[]="Diana";
            $a[]="Eva";
            $a[]="Fiona";
            $a[]="Gunda";
            $a[]="Hege";
            $a[]="Inga";
            $a[]="Johanna";
            $a[]="Kitty";
            $a[]="Linda";
            $a[]="Nina";
            $a[]="Ophelia";
            $a[]="Petunia";
            $a[]="Amanda";
            $a[]="Raquel";
            $a[]="Cindy";
            $a[]="Doris";
            $a[]="Eve";
            $a[]="Evita";
            $a[]="Sunniva";
            $a[]="Tove";
            $a[]="Unni";
            $a[]="Violet";
            $a[]="Liza";
            $a[]="Elizabeth";
            $a[]="Ellen";
            $a[]="Wenche";
            $a[]="Vicky";

            //get the q parameter from URL
            $q=$_GET["q"];

            //lookup all hints from array if length of q>0
            if (strlen($q) > 0)
            {
              $hint="";
              for($i=0; $i              {
                if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
                {
                  if ($hint=="")
                  {
                    $hint=$a[$i];
                  }
                  else
                  {
                    $hint=$hint." , ".$a[$i];
                  }
                }
              }
            }

            // Set output to "no suggestion" if no hint were found
            // or to the correct values
            if ($hint == "")
            {
              $respOnse="no suggestion";
            }
            else
            {
              $respOnse=$hint;
            }

            //output the response
            echo $response;
            ?>

            
7、AJAX数据库
    用到的数据库结构如下
            +----+--------------+---------------------------+-------+---------+
            | id | name           | url                       | alexa | country |
            +----+--------------+---------------------------+-------+---------+
            | 1  | Google        | https://www.google.cm/    | 1     | USA     |
            | 2  | 淘宝            | https://www.taobao.com/   | 13    | CN      |
            | 3  | 菜鸟教程      | http://www.runoob.com/    | 4689  | CN      |
            | 4  | 微博            | http://weibo.com/         | 20    | CN      |
            | 5  | Facebook     | https://www.facebook.com/ | 3     | USA     |
            +----+--------------+---------------------------+-------+---------+        
    HTML代码如下
    
    
    
    
    
    
    
    
    
    
    
    
    选择一个网站:
    Google
    淘宝
    菜鸟教程
    微博
    Facebook
    
    
    

    

网站信息显示在这里……

    
    
    
    当用户在上面的下拉列表中选择某选项时，会执行名为showSite的函数，该函数由onchange事件触发：
    
    PHP代码：
    
        $q = isset($_GET["q"]) ? intval($_GET["q"]) : '';
    
    if(empty($q)) {
        echo '请选择一个网站';
        exit;
    }
    
    $con = mysqli_connect('localhost','root','123456');
    if (!$con)
    {
        die('Could not connect: ' . mysqli_error($con));
    }
    // 选择数据库
    mysqli_select_db($con,"test");
    // 设置编码，防止中文乱码
    mysqli_set_charset($con, "utf8");
    
    $sql="SELECT * FROM Websites WHERE id = '".$q."'";
    
    $result = mysqli_query($con,$sql);
    
    echo "
    
    
    
    
    
    
    ";
    
    while($row = mysqli_fetch_array($result))
    {
        echo "";
        echo "";
        echo "";
        echo "";
        echo "";
        echo "";
        echo "";
    }
    echo "

ID	网站名	网站 URL	Alexa 排名	国家
" . $row['id'] . "	" . $row['name'] . "	" . $row['url'] . "	" . $row['alexa'] . "	" . $row['country'] . "

";
    
    mysqli_close($con);
    ?>