一、概念

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的更多相关文章

  1. ThinkPHP中使用ajaxReturn进行ajax交互

    以管理员登录为例来介绍下$this->ajaxReturn与模板页进行ajax交互使用方法 首先看PHP控制器的处理,在application/Admin/Controller/LoginCon ...

  2. struts2 的验证框架validation如何返回json数据 以方便ajax交互

    struts2 的验证框架validation简单,好用,但是input只能输出到jsp页面通过struts2的标签<s:fielderror  />才能取出,(EL应该也可以). 如果使 ...

  3. struts2中使用json插件实现ajax交互

    json插件可以简单的实现ajax交互,避免了使用struts2-dojo-plugin.jar包时带来的struts2.x版本冲突问题.并且减少了使用ajax标签时需要的繁琐的配置包括web.xml ...

  4. Python搭建Web服务器，与Ajax交互，接收处理Get和Post请求的简易结构

    用python搭建web服务器,与ajax交互,接收处理Get和Post请求:简单实用,没有用框架,适用于简单需求,更多功能可进行扩展. python有自带模块BaseHTTPServer.CGIHT ...

  5. 关于文件上传的ajax交互

    首先我们来了解一下上传文件 <input type="file"> input的file常用上传类型 后缀名 MIME名称 *.3gpp audio/3gpp, vid ...

  6. jq的ajax交互封装

    jq封装的ajax,然后 在此前和此后都是很多要考虑的  ,何不 想想构思封装下. 下面: 基本上网页都存在各种ajax,使得网页变得更加易于操作. 举个长长的例子吧: <input type= ...

  7. springmvc与ajax交互常见问题

    这是我个人再编写博客系统的时候,因个人疏忽犯下的低级错误. 不过犯错是一件好事,有助于总结. 1.关于参数前加@RequestBody 如果是使用ajax交互时,必须要加上这个contentType: ...

  8. 前端弹出对话框 js实现 ajax交互

    原本计划实现这样一个需求: 前台点击触发某业务动作,需要用户补充信息,不做跳转页面,弹窗的形式进行补充信息. 折腾出来了,但是最终没有用到. 代码还有些毛躁,提供大概实现逻辑. 实现思路: 在窗口铺上 ...

  9. SpringMVC与Ajax交互

    1 springmvc和ajax的交互 1.1  请求字符串响应json 客户端发送的数据:key=value&key1=value1 响应回来:json 1.1.1json的支持jar包 1 ...

随机推荐

  1. python基础教程笔记—画幅好画（详解）

    今天写一下基础教程里面的第二个项目,主要使用python来做一个pdf的图,比较简单. 首先我们需要安装用到的模块pip install reportlab即可. 书上是用urlopen从往上下了一个 ...

  2. STM32库函数实现方法

    一.概述 1.调用STM32库函数配置与直接配置寄存器 ① 直接配置寄存器 使用过51单片机的朋友都知道为了将IO口配置成某种特殊功能或者配置中断控制,我们先将需要如下步骤: 根据需要配置功能计算值- ...

  3. ASP.NET MVC轻教程 Step By Step 1 ——入门

    使用ASP.NET MVC有一段时间了,本人还是非常喜欢ASP.NET MVC这个框架模式的.在经历了WebForm复杂粗暴的做法后,自然感觉简洁优雅的MVC清新可人,只不过WebForm和MVC的设 ...

  4. ssh登录docker容器

    ssh登录docker容器1.启动一个docker容器# docker run -t -i ubuntu/ruby:v1 /bin/bash2.然后在容器里,安装openssh-server open ...

  5. iOS开发之自定义画板

    今天整好有时间, 写了一个自定义的画板!  [我的github] GLPaint主要采用QuartzCore框架, 对画布上的元素进行渲染, 然后通过UIImageWriteToSavedPhotos ...

  6. iOS - 打电话, 发短信

    电话.短信是手机的基础功能,iOS中提供了接口,让我们调用.这篇文章简单的介绍一下iOS的打电话.发短信在程序中怎么调用. 1.打电话 [[UIApplication sharedApplicatio ...

  7. centos系统使用技巧

    ===============================网络配置===============================1 eth0 接口配置:/etc/sysconfig/network ...

  8. delphi xe5 android 开发数据访问server端(一)

    第一篇我们破解并安装了xe5 第二篇我们搭建了开发环境 接下来我们开发一个三层的android程序 建立一个webservices  stand-alone vcl application 作为手机访 ...

  9. capitalize()在Python中含义

    Python为string对象提供了转换大小写的方法:upper() 和 lower(). 还不止这些,Python还为我们提供了首字母大写,其余小写的capitalize()方法, 以及所有单词首字 ...

  10. NCPC 2012 Cookie Selection

    题目要求每次输出中间的那个数,如果数据很大肯定扛不住: 所以用两个优先队列来维护: 这样的话中间的那个数反正会在两个队列的任何一个的头部: 时间复杂度肯定比较小: 代码: #include <c ...