当前位置:首页 > 开发 > Web前端 > Ajax > 正文

Ajax交互demo1

发表于: 2015-11-13   作者:互联网   来源:转载   浏览次数:
摘要: 一、概念 Ajax异步请求刷新。 浏览器在用户不知道的情况下,偷偷地跟服务器交互,然后返回数据给浏览器显示。   异步过程:当HTTP请求发送后,通过Ajax技术使用的XMLHttpRequest对象来发送,此时不需等待服务器响应处理,返回数据等操作,用户可直接在浏览器界面进行下一步操作。异步过程是Ajax的HTTP请求和用户输入数据等操作是异步的。 二、例子 实现的例子效果

一、概念

Ajax异步请求刷新。

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

 

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

二、例子

实现的例子效果

Ajax交互demo1

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

Ajax交互demo1

代码:

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;

        }

    }

 

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

我的数据表如图:

Ajax交互demo1

思路总结:

在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来写的

 

Ajax交互demo1

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
数据库:mongoDB 框架:springMVC, Spring Data Web前端:JQuery, JQuery EasyUI, jqPlot jqPlot代
Ajax引擎对象中的方法: abort()  停止当前请求 getAllResponseHeaders()   作为字符串返回完整
本次主要学习ajax的概念以及怎么与PHP之间进行交互操作 1.什么是Ajax? 国内翻译常为“阿贾克斯”和
上面一篇博文<<Ajax访问Xml Web Service的安全问题以及解决方案>>中谈及xml web servic
1.客户端网页代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww
工程结构图: [img] [/img] 效果图: [img] [/img] main.xml <?xml version="1.0" encoding="utf-
一.什么是 AJAX ? AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。通过
一.什么是 AJAX ? AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。通过
1.代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!
概念: 首先AJAX不只是一个特定的客户端技术,更应算是一种技巧。Ajax技术的核心操作是用XmlHttpReq
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号