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 ...
随机推荐
- 2016031601 - 刻录ubuntu的U盘启动盘
使用UltraISO来刻录ubuntu15.1的系统安装盘. 需要U盘1个,ubuntu15.1系统镜像文件. 具体步骤如下: a.安装UltraISO软件,具体软件安装. b.安装完成后进行系统刻录 ...
- .NET笔试题（关于迭代的：遍历XML中的FileName）
一.使用迭代算法,遍历XML文件中所有的文件名 写一个函数返回文件名集合 在主函数中调用该方法: 以后有关迭代的都写到这儿
- NWERC 2012 Problem J Joint Venture
刚刚开始想的是用二分的方法做,没想到这个题目这么水,直接暴力就行: 代码: #include<cstdio> #include<algorithm> #define maxn ...
- 系统调用与API的区别
整理自系统调用与API的区别 1.为什么用户程序不能直接访问系统内核模式提供的服务? 答:在linux中,将程序的运行空间分为内核与用户空间(内核态和用户态),在逻辑上它们之间是相互隔离的,因此用户程 ...
- OA学习笔记-008-岗位管理Action层实现
一.分析 1,设计实体/表 设计实体 --> JavaBean --> hbm.xml --> 建表 2,分析有几个功能,对应几个请求. 3,实现功能: 1,写Action类,写Ac ...
- Azure 媒体服务的 RTMP 支持和实时编码器
Cenk Dingiloglu Azure 媒体服务高级项目经理 直播流媒体目前已在公共预览版中提供,其中一项受支持的输入协议便是 RTMP.RTMP 是用于输入和分发包括直播流媒体在内的丰富媒体的一 ...
- java基于xml配置的通用excel单表数据导入组件(四、DAO主处理类)
package XXXXX.manage.importexcel; import java.beans.IntrospectionException; import java.io.BufferedR ...
- Flume FileChannel优化（扩展）实践指南
本文系微博运维数据平台(DIP)在Flume方面的优化扩展经验总结,在使用Flume FileChannel的场景下将吞吐率由10M/s~20M/s提升至80M/s~90M/s,分为四个部分进行介绍: ...
- 数学之美 zt
数学是美丽的,哪里有数哪里就有美. 数学的定义是研究数量关系和空间形式的一门科学.但有句名言说:数学比科学大得多,因为它是科学的语言.数学不仅用来写科学,而且可用来写人生.所以说数学是一切学科的基础, ...
- C#的CLR组成和运转介绍
原文 clr基本 CLR(Common Language Runtime)是一个可由多种编程语言使用的“运行时”.(例如:c#,c++/cli,vb,f#,ironpython,ironruby,il ...