Ajax交互demo1

一、概念

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

?>

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

Ajax交互demo1的更多相关文章

ThinkPHP中使用ajaxReturn进行ajax交互
以管理员登录为例来介绍下$this->ajaxReturn与模板页进行ajax交互使用方法首先看PHP控制器的处理,在application/Admin/Controller/LoginCon ...
struts2 的验证框架validation如何返回json数据以方便ajax交互
struts2 的验证框架validation简单,好用,但是input只能输出到jsp页面通过struts2的标签<s:fielderror />才能取出,(EL应该也可以). 如果使 ...
struts2中使用json插件实现ajax交互
json插件可以简单的实现ajax交互,避免了使用struts2-dojo-plugin.jar包时带来的struts2.x版本冲突问题.并且减少了使用ajax标签时需要的繁琐的配置包括web.xml ...
Python搭建Web服务器，与Ajax交互，接收处理Get和Post请求的简易结构
用python搭建web服务器,与ajax交互,接收处理Get和Post请求:简单实用,没有用框架,适用于简单需求,更多功能可进行扩展. python有自带模块BaseHTTPServer.CGIHT ...
关于文件上传的ajax交互
首先我们来了解一下上传文件 <input type="file"> input的file常用上传类型后缀名 MIME名称 *.3gpp audio/3gpp, vid ...
jq的ajax交互封装
jq封装的ajax,然后在此前和此后都是很多要考虑的 ,何不想想构思封装下. 下面: 基本上网页都存在各种ajax,使得网页变得更加易于操作. 举个长长的例子吧: <input type= ...
springmvc与ajax交互常见问题
这是我个人再编写博客系统的时候,因个人疏忽犯下的低级错误. 不过犯错是一件好事,有助于总结. 1.关于参数前加@RequestBody 如果是使用ajax交互时,必须要加上这个contentType: ...
前端弹出对话框 js实现 ajax交互
原本计划实现这样一个需求: 前台点击触发某业务动作,需要用户补充信息,不做跳转页面,弹窗的形式进行补充信息. 折腾出来了,但是最终没有用到. 代码还有些毛躁,提供大概实现逻辑. 实现思路: 在窗口铺上 ...
SpringMVC与Ajax交互
1 springmvc和ajax的交互 1.1 请求字符串响应json 客户端发送的数据:key=value&key1=value1 响应回来:json 1.1.1json的支持jar包 1 ...

随机推荐

android SurfaceView绘制重新学习--控制动画移动
直接上demo,图是自己切的,将就用吧.点击左右两边分别向左右移动. public class MySurfaceView extends SurfaceView implements Callbac ...
it warning: LF will be replaced by CRLF解决
LF是linux下的换行符,而CRLF是enter + 换行,这就知道为啥我当初拷贝第一份代码的时候没报这个错误了,因为第一份是在win下写的. 然后解决办法: git config --global ...
django HTTP请求(Request)和回应(Response)对象
Django使用request和response对象在系统间传递状态.—(阿伦)当一个页面被请示时,Django创建一个包含请求元数据的 HttpRequest 对象. 然后Django调入合适的视图 ...
DDD领域驱动设计和实践(转载)
-->目录导航一. DDD领域驱动设计介绍 1. 什么是领域驱动设计(DDD) 2. 领域驱动设计的特点 3. 如果不使用DDD? 4. 领域驱动设计的分层架构和构成要素 5. 事务脚本和领域 ...
【POJ3169 】Layout （认真的做差分约束）
Layout Description Like everyone else, cows like to stand close to their friends when queuing for ...
《鸟哥的Linux私房菜》读书笔记五
1. Ctrl+alt+FX(X=1~6)可以切换到6个不同的文字界面终端(Terminal) 再按Ctrl+alt+F7就可以回到X Window,按Ctrl+alt+Backspace这是结束所有 ...
启动redis出现Creating Server TCP listening socket *:6379: bind: No such file or directory
E:\redis>redis-server.exe redis.windows.conf [8564] 10 Oct 20:00:36.745 # Creating Server TCP lis ...
iOS设备下添加button的按下效果
在触屏上, button的按下效果用:active触发, 但是我发现iOS设备上:active效果并没有生效. :active pseudo-class doesn't work in mobile ...
C语言实现定积分求解方法
求定积分的方法有很多种,下面是我总结的几种比较常用的方法. #include <stdio.h> #include <stdlib.h> #include <math.h ...
【HDOJ】2157 How many ways??
矩阵乘法,用DP做各种wa,后来发现原因了. #include <stdio.h> #include <string.h> typedef struct { ][]; } ma ...

Ajax交互demo1

Ajax交互demo1的更多相关文章

随机推荐

热门专题