ajax总结

最新推荐文章于 2022-05-14 21:50:42 发布

剽悍六杯茶

最新推荐文章于 2022-05-14 21:50:42 发布

阅读量709

点赞数 2

分类专栏：前端文章标签： ajax

本文链接：https://blog.csdn.net/nikita1995/article/details/61924898

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1：用ajax请求三部曲

<!DOCTYPE html>
<html>
<head>
    <title>修改文本内容</title>
    <script type="text/javascript">

    function loadXMLDoc(){
        //创建XMLHttpRequest对象
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }
        else{
            xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
        }

        //向服务器发送请求get
        xmlhttp.open("get","/try/ajax/demo_get.php?fname=herry&lname=ford",true);
            //true异步 false同步
        xmlhttp.send();

        //向服务器发送请求post
        xmlhttp.open("post","/try/ajax/demo_post2.php",true);
        xmlhttp.setRequestHeader("Content-Type","application/x-www-font-urlencoded");
        xmlhttp.send("fname=herry&lname=ford");

        //响应处于onreadystatechange事件中的就绪状态时执行的函数
        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();


        //resopndXML属性
        xmlDoc=xmlhttp.responseXML;
        txt="";
        x=xmlDoc.getElementByTagName("ARTIST");
        for(i=0;i<x.length;i++){
            txt=txt+x[i].childNodes[0].nodeValue+"</br>";
        }
        document.getElementById("myDiv").innerHTMl=txt;
    }



    //完整 回调函数
    var xmlhttp;
    function loadXMLDoc(url,cfunc){
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }
        else{
            xmlhttp=new ActiveXOBject("microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=cfunc;
        xmlhttp.open("get",url,true);
        xmlhttp.send();
    }

    function myFunction(){
        loadXMLDoc("/try/ajax/ajax_info.txt",function(){
            if(xmlhttp.readyState==4 &&xmlhttp.status==200){
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        });
    }


    </script>
</head>
<body>
    <div id="myDiv"><h2>使用ajax修改文本内容</h2>
    </div>
    <button type="button" onclick="loadXMLDoc()">修改内容</button>
    <button type="button" onclick="myFunction()"></button>

</body>
</html>

2：输入字母匹配实例（php）

<!DOCTYPE html>
<html>
<head>
    <title>输入字母匹配 php</title>
    <script type="text/javascript">

    //当用户在输入框中键入字符时，会执行showHint（），该函数由onkeyup事件触发
    function showHint(str){
        var xmlhttp;
        if(str.length=0){
            document.getElementById("txtHint").innerHTML="";
            return;
        }

        //创建对象
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }
        else{
            xmlhttp=new ActiveOBject("Microsoft.XMLHTTP");
        }

        //服务器响应就绪时执行函数
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4 &&xmlhttp.status==200){
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }

        //把请求发送到服务器上的文件
        xmlhttp.open("get","/try/ajax/gethint.php?q="+str,true);
            //gethint.php文件
        xmlhttp.send();
    }

    </script>
</head>
<body>
    <h3>在输入框中尝试输入字母a:</h3>
    <form action="">
        输入姓名：<input type="text" id="txt1" onkeyup="showHint(this.value)"/>
    </form>
    <p>提示信息：<span id="txtHint"></span></p>
</body>
</html>

php文件

<?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<cont($a);$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;
    }

    //otput the response
    echo $response;
?>

3：从数据库中读取信息显示

<!DOCTYPE html>
<html>
<head>
    <title>从数据库读取信息显示</title>
    <script type="text/javascript">
    //用户在选择某个客户时，执行shouCustomer（）；该函数由onchange事件触发
    function(){
        var xmlhttp;
        if(str=""){
            document.getElementById("txtHint").innerHTML="";
            return;
        }
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }
        else{
            xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4 &&xmlhttp.status==200){
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }

        xmlhttp.open("get","/try/ajax/getcustomer.php?q="+str,true);
            //getcustomer.php
        xmlhttp.send();
    }
    </script>
</head>
<body>
    <form action=""> 
    <select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
    <option value="APPLE">Apple Computer, Inc.</option>
    <option value="BAIDU ">BAIDU, Inc</option>
    <option value="Canon">Canon USA, Inc.</option>
    <option value="Google">Google, Inc.</option>
    <option value="Nokia">Nokia Corporation</option>
    <option value="SONY">Sony Corporation of America</option>
    </select>
    </form>
    <br>
    <div id="txtHint">客户信息将显示在这...</div>
</body>
</html>

php文件

<?php
$q=isset($_get["q"]) ? intval($_get["q"]) : '';

if(empty($q)){
    echo '请选择一个网站';
    exit;
}

$con =mysql_connect('localhost','root','123456');
if(!$con){
    die("could not connect:".mysql_error($con));
}

//choose database
mysql_select_db($con,"test");
//set encode
mysql_set_charset($con,"utf8");

$sql="select * from Websites where id ='".$q."'";
$result=mysql_query($con,$sql);

echo "<table border='1'>
<tr>
<th>id</th>
<th>网站名</th>
<th>网站 url</th>
<th>alexa排名</th>
<th>国家</th>
</tr>";

while($row=mysql_fetch_array($result)){
    echo "<tr>";
    echo "<td>".$row["id"]."</td>";
    echo "<td>".$row["name"]."</td>";
    echo "<td>".$row["url"]."</td>";
    echo "<td>".$row["alexa"]."</td>";
    echo "<td>".$row["country"]."</td>";
    echo "</tr>";
}

echo "</table>";
mysql_close($con);

?>

4：ajx与xml通信

<!DOCTYPE html>
<html>
<head>
    <title>ajax与xml交互通信</title>
    <script type="text/javascript">
    //loadXMLDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并将请求发送到服务器。
    //当服务器响应就绪时，会构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用 XML 数据的 填充 id="demo" 的表格元素：
      function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          myFunction(this);
        }
      };
      xhttp.open("GET", "cd_catalog.xml", true);
      xhttp.send();
    }

    function myFunction(xml){
        var i;
        var xmlDoc=xml.responseXML;
        var table="<tr><th>Artist</th><th>Title</th></tr>";
       var x = xmlDoc.getElementsByTagName("CD");
       for (i = 0; i <x.length; i++) {
        table += "<tr><td>" +
        x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
        "</td><td>" +
        x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
        "</td></tr>";
      }
       document.getElementById("demo").innerHTML = table;
    }

    </script>
</head>
<body>

</body>
</html>

剽悍六杯茶

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
ajax总结

1：用ajax请求三部曲<!DOCTYPE html><html><head> <title>修改文本内容</title> <script type="text/javascript"> function loadXMLDoc(){ //创建XMLHttpRequest对象 var xmlhttp; if(window.XML
复制链接

扫一扫