Ajax交互demo1

懵懂的女人 提交于 2020-03-10 19:57:54

一、概念

Ajax异步请求刷新。

浏览器在用户不知道的情况下,偷偷地跟服务器交互,然后返回数据给浏览器显示。

 

异步过程:当HTTP请求发送后,通过Ajax技术使用的XMLHttpRequest对象来发送,此时不需等待服务器响应处理,返回数据等操作,用户可直接在浏览器界面进行下一步操作。异步过程是Ajax的HTTP请求和用户输入数据等操作是异步

二、例子

实现的例子效果

选择任意一个明星的名字,浏览器就会偷偷发送HTTP请求服务器请求该明星的资料,并且返回回来。实现了一个页面局部刷新。

代码:

1、首先要先初始化一个XMLHttpRequest对象

兼容不同的浏览器

function GetXmlHttpObject()                 //获取XmlHttpRequest对象
    {
        var xmlHttp = null;
        try
        {
            //FF opera 8.0+
            xmlHttp = new XMLHttpRequest();
        }
        catch(e)
        {
            try
            {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e)
            {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");                         //IE浏览器支持ActiveXObject
            }
        }
        return xmlHttp;
    }

 

2、初始化XMLHttpRequest对象后,进行处理

function showCustomers(str)
    {
        xmlHttp = GetXmlHttpObject();
        if (xmlHttp == null)
        {
            alert("浏览器不支持Http 请求");
            return;
        }

        var url = "showCustomers.php";
        url = url+"?q="+str;
        url = url+"&sid="+Math.random();          //参数sid:避免回送的是缓存数据
        xmlHttp.onreadystatechange = stateChanged;//每当 readyState 属性改变时,就会调用该函数。
        xmlHttp.open("GET",url,true);             //(请求方式,请求地址,以及是否异步处理请求)
        xmlHttp.send(null);                       //将请求发送到服务器 string:仅用于 POST 请求
    }

 

设置要请求的url,然后onreadystatechange(状态改变,调用函数),open,send。这样就完成了一个ajax局部刷新请求。

当状态改变时,我们将从服务器返回数据回来。

function stateChanged()
    {
        if (xmlHttp.readyState ==4 || xmlHttp.readyState=="complete")//存有 XMLHttpRequest 的状态01234
        {
            document.getElementById('txtHint').innerHTML = xmlHttp.responseText;
        }
    }

 

这个例子里,返回的数据就是从服务器返回选择的明星的信息过来,并打印在表格上。

我的数据表如图:

思路总结:

在html文件中,发出一个Http请求,Ajax实现这个请求,但是语言还是用Javascript去实现的。

Ajax实现这个请求的过程需要先生成XMLHttpRequest对象,然后提交给某个url地址(xxx.php),最后,XMLHttpRequest对象状态改变如何处理,XMLHttpRequest对象open、send。局部刷新ok。

四、完整代码

showCustomer.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Ajax实现交互</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript">
    var xmlHttp;

    function showCustomers(str)
    {
        xmlHttp = GetXmlHttpObject();
        if (xmlHttp == null)
        {
            alert("浏览器不支持Http 请求");
            return;
        }

        var url = "showCustomers.php";
        url = url+"?q="+str;
        url = url+"&sid="+Math.random();        //参数sid:避免回送的是缓存数据
        xmlHttp.onreadystatechange = stateChanged;//每当 readyState 属性改变时,就会调用该函数。
        xmlHttp.open("GET",url,true);           //(请求方式,请求地址,以及是否异步处理请求)
        xmlHttp.send(null);                       //将请求发送到服务器 string:仅用于 POST 请求
    }

    function showError(str2)
    {
        xmlHttp = GetXmlHttpObject();
        if (xmlHttp == null)
        {
            alert("浏览器不支持Http 请求");
            return;
        }
        var url = "showError.php";
        url = url+"?q2="+str2;
        url = url+"&sid2="+Math.random();        //参数sid:避免回送的是缓存数据
        xmlHttp.onreadystatechange = stateChanged;//每当 readyState 属性改变时,就会调用该函数。
        xmlHttp.open("GET",url,true);           //(请求方式,请求地址,以及是否异步处理请求)
        xmlHttp.send(null);                       //将请求发送到服务器 string:仅用于 POST 请求
    }

    function stateChanged()
    {
        if (xmlHttp.readyState ==4 || xmlHttp.readyState=="complete")//存有 XMLHttpRequest 的状态01234
        {
            document.getElementById('txtHint').innerHTML = xmlHttp.responseText;
        }
    }

    function GetXmlHttpObject()                 //获取XmlHttpRequest对象
    {
        var xmlHttp = null;
        try
        {
            //FF opera 8.0+
            xmlHttp = new XMLHttpRequest();
        }
        catch(e)
        {
            try
            {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e)
            {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        return xmlHttp;
    }
</script>
<style type="text/css">
    table
    {
        border-collapse: collapse;
    }
    table td
    {
        padding: 5px 15px;
        text-align: center;
    }
</style>
</head>
<body>
    <form>
        <!-- <p>用户名:<input type="text" id="name" name="name" onchange="showError(this.value)"></p> -->
        <label>请选择一位帅锅陪你过七夕:</label>
        <select name="customers" onchange="showCustomers(this.value)">
            <option value="1">都敏俊xi~</option>
            <option value="2">权相宇</option>
            <option value="3">千颂伊</option>
        </select>
        
    </form><br>
    <div id="txtHint">客户信息将在此处列出...</div>
</body>
</html>

showCustomers.php
<?php
$q=$_GET["q"];                //获取前台页面传输过来的参数  哪位帅锅的

$con = mysql_connect('localhost', 'root', 'abc-123');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }

mysql_select_db("fsd", $con);


$sql="SELECT * FROM test WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>";

while($row = mysql_fetch_array($result))
 {
 echo "<tr>";
 echo "<td>" . $row['name'] . "</td>";
 echo "<td>" . $row['sex'] . "</td>";
 echo "</tr>";
 }
echo "</table>";
mysql_close($con);
?>
View Code

 

 

终于对ajax异步刷新有了一丝新的理解了,万岁!要写ajax,一定要先学好JavaScript,因为是用JavaScript来写的

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!