一、概念

Ajax异步请求刷新。

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

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

二、例子

实现的例子效果

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

代码：

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

兼容不同的浏览器

  1. function GetXmlHttpObject()                 //获取XmlHttpRequest对象
  2.     {
  3.         var xmlHttp = null;
  4.         try
  5.         {
  6.             //FF opera 8.0+
  7.             xmlHttp = new XMLHttpRequest();
  8.         }
  9.         catch(e)
  10.         {
  11.             try
  12.             {
  13.                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  14.             }
  15.             catch(e)
  16.             {
  17.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");                         //IE浏览器支持ActiveXObject
  18.             }
  19.         }
  20.         return xmlHttp;
  21.     }

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

  1. function showCustomers(str)
  2.     {
  3.         xmlHttp = GetXmlHttpObject();
  4.         if (xmlHttp == null)
  5.         {
  6.             alert("浏览器不支持Http 请求");
  7.             return;
  8.         }
  9.  
  10.         var url = "showCustomers.php";
  11.         url = url+"?q="+str;
  12.         url = url+"&sid="+Math.random();          //参数sid：避免回送的是缓存数据
  13.         xmlHttp.onreadystatechange = stateChanged;//每当 readyState 属性改变时，就会调用该函数。
  14.         xmlHttp.open("GET",url,true);             //(请求方式，请求地址，以及是否异步处理请求)
  15.         xmlHttp.send(null);                       //将请求发送到服务器 string：仅用于 POST 请求
  16.     }

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

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

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

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

我的数据表如图：

思路总结：

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

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

四、完整代码

  1. showCustomer.html
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <title>Ajax实现交互</title>
  8. <meta name="description" content="">
  9. <meta name="keywords" content="">
  10. <link href="" rel="stylesheet">
  11. <script type="text/javascript">
  12.     var xmlHttp;
  13.  
  14.     function showCustomers(str)
  15.     {
  16.         xmlHttp = GetXmlHttpObject();
  17.         if (xmlHttp == null)
  18.         {
  19.             alert("浏览器不支持Http 请求");
  20.             return;
  21.         }
  22.  
  23.         var url = "showCustomers.php";
  24.         url = url+"?q="+str;
  25.         url = url+"&sid="+Math.random();        //参数sid：避免回送的是缓存数据
  26.         xmlHttp.onreadystatechange = stateChanged;//每当 readyState 属性改变时，就会调用该函数。
  27.         xmlHttp.open("GET",url,true);           //(请求方式，请求地址，以及是否异步处理请求)
  28.         xmlHttp.send(null);                       //将请求发送到服务器 string：仅用于 POST 请求
  29.     }
  30.  
  31.     function showError(str2)
  32.     {
  33.         xmlHttp = GetXmlHttpObject();
  34.         if (xmlHttp == null)
  35.         {
  36.             alert("浏览器不支持Http 请求");
  37.             return;
  38.         }
  39.         var url = "showError.php";
  40.         url = url+"?q2="+str2;
  41.         url = url+"&sid2="+Math.random();        //参数sid：避免回送的是缓存数据
  42.         xmlHttp.onreadystatechange = stateChanged;//每当 readyState 属性改变时，就会调用该函数。
  43.         xmlHttp.open("GET",url,true);           //(请求方式，请求地址，以及是否异步处理请求)
  44.         xmlHttp.send(null);                       //将请求发送到服务器 string：仅用于 POST 请求
  45.     }
  46.  
  47.     function stateChanged()
  48.     {
  49.         if (xmlHttp.readyState ==4 || xmlHttp.readyState=="complete")//存有 XMLHttpRequest 的状态01234
  50.         {
  51.             document.getElementById('txtHint').innerHTML = xmlHttp.responseText;
  52.         }
  53.     }
  54.  
  55.     function GetXmlHttpObject()                 //获取XmlHttpRequest对象
  56.     {
  57.         var xmlHttp = null;
  58.         try
  59.         {
  60.             //FF opera 8.0+
  61.             xmlHttp = new XMLHttpRequest();
  62.         }
  63.         catch(e)
  64.         {
  65.             try
  66.             {
  67.                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  68.             }
  69.             catch(e)
  70.             {
  71.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  72.             }
  73.         }
  74.         return xmlHttp;
  75.     }
  76. </script>
  77. <style type="text/css">
  78.     table
  79.     {
  80.         border-collapse: collapse;
  81.     }
  82.     table td
  83.     {
  84.         padding: 5px 15px;
  85.         text-align: center;
  86.     }
  87. </style>
  88. </head>
  89. <body>
  90.     <form>
  91.         <!-- <p>用户名：<input type="text" id="name" name="name" onchange="showError(this.value)"></p> -->
  92.         <label>请选择一位帅锅陪你过七夕：</label>
  93.         <select name="customers" onchange="showCustomers(this.value)">
  94.             <option value="1">都敏俊xi~</option>
  95.             <option value="2">权相宇</option>
  96.             <option value="3">千颂伊</option>
  97.         </select>
  98.  
  99.     </form><br>
  100.     <div id="txtHint">客户信息将在此处列出...</div>
  101. </body>
  102. </html>
  103.  
  104. showCustomers.php
  105. <?php
  106. $q=$_GET["q"];                //获取前台页面传输过来的参数  哪位帅锅的
  107.  
  108. $con = mysql_connect('localhost', 'root', 'abc-123');
  109. if (!$con)
  110.  {
  111.  die('Could not connect: ' . mysql_error());
  112.  }
  113.  
  114. mysql_select_db("fsd", $con);
  115.  
  116. $sql="SELECT * FROM test WHERE id = '".$q."'";
  117.  
  118. $result = mysql_query($sql);
  119.  
  120. echo "<table border='1'>
  121. <tr>
  122. <th>姓名</th>
  123. <th>性别</th>
  124. </tr>";
  125.  
  126. while($row = mysql_fetch_array($result))
  127.  {
  128.  echo "<tr>";
  129.  echo "<td>" . $row['name'] . "</td>";
  130.  echo "<td>" . $row['sex'] . "</td>";
  131.  echo "</tr>";
  132.  }
  133. echo "</table>";
  134. mysql_close($con);
  135. ?>

终于对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. c语言数组的操作

    #include<stdio.h> #include<malloc.h> #include<stdlib.h>//exit() struct Arr//定义了一个数 ...

  2. Android WebView缓存分析

    http://blog.csdn.net/a345017062/article/details/8703221   WebView的缓存可以分为页面缓存和数据缓存. 页面缓存是指加载一个网页时的htm ...

  3. DM8168 解码显示模块代码阅读分析

    解码/显示概述:从共享文件夹获取H264流,对264流进行解析,生成hdr文件,hdr文件中包含每一帧的信息,将视频帧信息存放在A8核分配的共享内存空间,供其他核或其他的link调用,M3 Video ...

  4. Android之TextView组件学习

    一.基础学习 1.findViewById返回View类,该类是所有View组件的父类. 2.子类比父类拥有更多的属性和方法,不过子类找不到的话去父类找 3.marquee:华盖,跑马灯效果:orie ...

  5. 搭建mongodb分片

    搭建mongodb分片 http://gong1208.iteye.com/blog/1622078 Sharding分片概念 这是一种将海量的数据水平扩展的数据库集群系统,数据分表存储在shardi ...

  6. client denied by server configuration

    http://blog.csdn.net/fdipzone/article/details/40512229

  7. 【HDU 3652】 B-number （数位DP）

    B-number Problem Description A wqb-number, or B-number for short, is a non-negative integer whose de ...

  8. 基于Spring Boot构建的Spring MVC快速入门

    原文地址:http://tianmaying.com/tutorial/spring-mvc-quickstart 环境准备 一个称手的文本编辑器(例如Vim.Emacs.Sublime Text)或 ...

  9. http://www.ibm.com/developerworks/cn/opensource/os-cn-cas/

    http://www.ibm.com/developerworks/cn/opensource/os-cn-cas/

  10. 23个移动app界面上的旋钮和刻度盘设计示例

      摘要: 从最初进入电子设备领域,旋钮和刻度盘的由最初的功能性设计转变为时尚的外观设计元素,比如在移动app中.这种转变并意外,旋钮和刻度盘不需要占用移动设备的太多空间,并可以简单地为用户提供一些列 ...