Ajax交互demo1

時間 2019-11-12

標籤 ajax 交互 demo1 demo 欄目 Ajax 简体版

原文原文鏈接

1、概念javascript

Ajax異步請求刷新。php

瀏覽器在用戶不知道的狀況下，偷偷地跟服務器交互，而後返回數據給瀏覽器顯示。css

異步過程：當HTTP請求發送後，經過Ajax技術使用的XMLHttpRequest對象來發送，此時不需等待服務器響應處理，返回數據等操做，用戶可直接在瀏覽器界面進行下一步操做。異步過程是Ajax的HTTP請求和用戶輸入數據等操做是異步的。html

2、例子java

實現的例子效果mysql

選擇任意一個明星的名字，瀏覽器就會偷偷發送HTTP請求服務器請求該明星的資料，而且返回回來。實現了一個頁面局部刷新。ajax

代碼：sql

一、首先要先初始化一個XMLHttpRequest對象chrome

兼容不一樣的瀏覽器瀏覽器

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;
    }

二、初始化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。

4、完整代碼

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來寫的

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。