Ajax学习及例子.doc

ajax是什么 ？
① ajax(asynchronouse javascript and xml) 异步的javascript 和 xml
② 是7种技术的综合,它包含了七个技术( javascript xml xstl xhtml dom xmlhttprequest , css), ajax 是一个粘合剂,
③ ajax是一个与服务端语言无关的技术. 即可以使用在(php/java ee/.net网站/ asp)
④ ajax可以给客户端返回三种格式数据(文本格式 ，xml , json格式)
⑤ 无刷新数据交换技术有以下: flash, java applet, 框架, iframe, ajax)

u ajax 的运行原理分析

看一个需求:

u ajax在什么地方用的多

1 动态加载数据，按需取得数据。【树形菜单、联动菜单.../省市联动】
2 改善用户体验。【输入内容前提示、带进度条文件上传...】

3 电子商务应用。 【购物车、邮件订阅...】
4 访问第三方服务。 【访问搜索服务、rss阅读器】
5. 数据的布局刷新

u 经典的案例

使用ajax与服务器通信的的步骤
① 创建一个XMLHttpRequest对象
② 创建url,data,通过 xmlHttpRequest.send()
③ 服务器端接收 ajax的请求,做相应处理(操作数据库)，然后返回结果(echo 语句)
④ 客户端通过xmlHttpRequest的属性 reponseText , responseXML 取的数据，然后就完成局部刷新当前页面任务

1. 使用 ajax完成用户名的验证

register.php

用户注册

//创建ajax引擎
function getXmlHttpObject(){

var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest 对象方法不一样
if(window.ActiveXObject){

xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");

}else{

xmlHttpRequest=new XMLHttpRequest();
}

return xmlHttpRequest;</p><p style='padding:5px 0px;'>5、

}
var myXmlHttpRequest="";

//验证用户名是否存在
function checkName(){

myXmlHttpRequest=getXmlHttpObject();

//怎么判断创建ok
if(myXmlHttpRequest){

//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数表示请求的方式, "get" / "post"
//第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)
//第三个参数表示 tru</p><p style='padding:5px 0px;'>6、e表示使用异步机制,如果false表示不使用异步
var url="/ajax/registerProcess.php?mytime="+new Date()+"&username="+$("username").value;
//打开请求.
myXmlHttpRequest.open("get",url,true);
//指定回调函数.chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli;

//真的发送请求,如果是get请求则填入 null即可
//如果是post请求，则填入实际的</p><p style='padding:5px 0px;'>7、数据
myXmlHttpRequest.send(null);

}
}

//回调函数
function chuli(){

//window.alert("处理函数被调回"+myXmlHttpRequest.readyState);
//我要取出从registerPro.php页面返回的数据
if(myXmlHttpRequest.readyState==4){

//取出值,根据返回信息的格式定.text
//window.alert("服务器返回"+myXmlHttpRequest.responseTe</p><p style='padding:5px 0px;'>8、xt);

$('myres').value=myXmlHttpRequest.responseText;
}
}

//这里我们写一个函数
function $(id){
return document.getElementById(id);
}

type="button" onclick="checkName();" value="验证用户名">

用户密码:
电子邮件:

rm action="???" method="post">
用户名字:

用户密码:
电子邮件:

registerpro.php

//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header("Content-Type: text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");

//接收数据
$username=$_GET['username'];

if($username=="shunping"){
echo "用户名不可以用";//注意，这里数据是返回给请求的页面.
}else{
echo "用户名可以用";
}

?>

u ajax的post方式请求

在前面案例我们修改一下 ：

关键代码
register.php
var url="/ajax/registerProcess.php";
//这个是要发送的数据
var data="username="+$('username').value;
//打开请求.
myXmlHttpRequest.open("post",url,true);
//还有一句话，这句话必须.
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回调函数.chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli;

//真的发送请求,如果是get请求则填入 null即可
//如果是post请求，则填入实际的数据
myXmlHttpRequest.send(data);
registerPro.php关键码 ：
$username=$_POST['username'];

☞ 使用get方式发出请求，如果提交的用户名不变化，浏览器将不会真的发请求，而是缓存取数据., url

解决方法
1. url 后带一个总是变化的参数,比如当前时间
var url="/ajax/registerProcess.php?mytime="+new Date()+"&username="+$("username").value;

2. 在服务器回送结果时，禁用缓存.

//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header("Content-Type: text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");

u ajax如何处理返回的数据格式是xml的情况

register.php

用户注册

//创建ajax引擎
function getXmlHttpObject(){

var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest 对象方法不一样
if(</p><p style='padding:5px 0px;'>16、window.ActiveXObject){

xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");

}else{

xmlHttpRequest=new XMLHttpRequest();
}

return xmlHttpRequest;

}
var myXmlHttpRequest="";

//验证用户名是否存在
function checkName(){

myXmlHttpRequest=getXmlHttpObject();

</p><p style='padding:5px 0px;'>17、//怎么判断创建ok
if(myXmlHttpRequest){

//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数表示请求的方式, "get" / "post"
//第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)
//第三个参数表示 true表示使用异步机制,如果false表示不使用异步
var url="/ajax/registerProcess.php";
//这个是要发送的数据
var data="username="+$('username').va</p><p style='padding:5px 0px;'>18、lue;
//打开请求.
myXmlHttpRequest.open("post",url,true);
//还有一句话，这句话必须.
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回调函数.chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli;

//真的发送请求,如果是get请求则填入 null即可
//如果是post请求，则填入实际的数据
</p><p style='padding:5px 0px;'>19、
myXmlHttpRequest.send(data);

}
}

//回调函数
function chuli(){

//window.alert("处理函数被调回"+myXmlHttpRequest.readyState);
//我要取出从registerPro.php页面返回的数据
if(myXmlHttpRequest.readyState==4){

//取出值,根据返回信息的格式定.text
//window.alert("服务器返回"+myXmlHttpRequest.responseText)</p><p style='padding:5px 0px;'>20、

//$('myres').value=myXmlHttpRequest.responseText;

//看看如果取出 xml格式数据
//window.alert(myXmlHttpRequest.responseXML);

//获取mes节点
var mes=myXmlHttpRequest.responseXML.getElementsByTagName("mes");

//取出mes节点值
//window.alert(mes.length);
//mes[0]->表示取出第一个mes节点
/</p><p style='padding:5px 0px;'>21、/mes[0].childNodes[0]->表示第一个mes节点的第一个子节点
var mes_val=mes[0].childNodes[0].nodeValue;

$('myres').value=mes_val;
}
}

//这里我们写一个函数
function $(id){
return document.getElementById(id);
}

name="username1" id="username">

用户密码:
电子邮件:

regisgerProcess.php

me=="shunping"){
$info.="用户名不可以用,对不起";//注意，这里数据是返回给请求的页面.
}else{
$info.="用户名可以用,恭喜";
}

echo $info;

?>

u ajax如何处理json数据格式

① json的格式如下 ：

"{属性名:属性值,属性名:属性值,.... }"
因为json数据是原生态数据，因此这种数据格式很稳定，而且描述能力强,我们建议大家使用json格式

② json数据格式的扩展

如果服务器返回的json 是多组数据，则格式应当如下:

$info="[{"属性名":"属性值",...},{"属性名":"属性值",...},....]";

在xmlhttprequest对象接收到json数据后，应当这样处理

//转成对象数组

var reses=eval("("+xmlHttpRequest.responseText+")");

//通过reses可以取得你希望的任何一个值

reses[?].属性名

③ 更加复杂的json数据格式

</p><p style='height:0px;padding:0;overflow:hidden'>27、var people ={
"programmers":
[
{"firstName": "Brett", "email": "brett@newI" },
{"firstName": "Jason", "email": "jason@" }
],
"writer":
[
{"writer":"宋江","age":"50"},
{"writer":"吴用","age":"30"}
</p><p style='height:0px;padding:0;overflow:hidden'>28、],
"sex":"男"

};

window.alert(people.programmers[0].firstName);
window.alert(people.programmers[1].email);

window.alert(people.writer[1].writer);
window.alert(people.sex);

u 小结:
当一个ajax请求到服务器，服务器可以根据需求返回 三种格式的数据,那么我们应当选择哪一个?

1. 如果你的项目经理没有特殊的要求，建议使用json
2. 若应用程序不需要与其他应用程序共享数据的时候, 使用 HTML 片段来返回数据时最简单的
3. 如果数据需要重用, JSON 文件是个不错的选择, 其在性能和文件大小方面有优势
4. 当远程应用程序未知时, XML 文档是首选, 因为 XML 是 web 服务领域的 “世界语”

u ajax的省市联动案例(如何动态的从服务器取得数据)

showCities.php页面

//创建ajax引擎
function getXmlHttpObject(){

var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest 对象方法不一样
if(window.ActiveXObject){

xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");

}else{

xmlHttpRequest=new XMLHttpRequest();
}

return xmlHtt</p><p style='height:0px;padding:0;overflow:hidden'>31、pRequest;

}

var myXmlHttpRequest="";

function getCities(){

myXmlHttpRequest=getXmlHttpObject();

if(myXmlHttpRequest){

var url="/ajax/showCitiesPro.php";//post
var data="province="+$('sheng').value;

myXmlHttpRequest.open("post",url,true);//异步方式

myXmlHttpRequest.</p><p style='height:0px;padding:0;overflow:hidden'>32、setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//指定回调函数
myXmlHttpRequest.onreadystatechange=chuli;

//发送
myXmlHttpRequest.send(data);
}
}

function chuli(){
if(myXmlHttpRequest.readyState==4){

if(myXmlHttpRequest.status==200){

//取出服务</p><p style='height:0px;padding:0;overflow:hidden'>33、器回送的数据

var cities=myXmlHttpRequest.responseXML.getElementsByTagName("city");

$('city').length=0;
var myOption=document.createElement("option");

myOption.innerText="--城市--";
//添加到
$('city').appendChild(myOption);

//遍历并取出城市
for(var i=0;i<citi</p><p style='height:0px;padding:0;overflow:hidden'>34、es.length;i++){

var city_name=cities[i].childNodes[0].nodeValue;
//创建新的元素option
var myOption=document.createElement("option");
myOption.value=city_name;
myOption.innerText=city_name;
//添加到
$('city').appendChild(myOption);
}
}
}
}

/</p><p style='height:0px;padding:0;overflow:hidden'>35、/这里我们写一个函数
function $(id){
return document.getElementById(id);
}

---省---
浙江
江苏
36、四川

--城市--

--县城--

**showCitiesProcess.php**

四川
der("Content-Type: text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");

//接收用户的选择的省的名字

$province=$_POST['province'];

file_put_contents("d:/mylog.log",$province."\r\n",FILE_APPEND);
//如何在调试过程中，看到接收到的数据 。
//到数据库去查询省有那些城市(现在先不到数据库)
$info="";
if($province="zhejiang"){

$info="杭州温州宁波";
}else if($province=="jiangsu"){
$info="南京徐州苏州";
}

echo $info;

?>

u 黄金价格波动图

glodPrice.php界面

http-equiv="content-type" content="text/html;charset=utf-8"/>

var myXmlHttpRequest;

function updateGoldPrice(){

</p><p style='height:0px;padding:0;overflow:hidden'>40、 myXmlHttpRequest=getXmlHttpObject();

if(myXmlHttpRequest){

//创建ajax引擎成功
var url="glodPriceProcess.php";
var data="city[]=dj&city[]=tw&city[]=ld";

myXmlHttpRequest.open("post",url,true);

myXmlHttpRequest.setRequestHeader("Content-Type","applic</p><p style='height:0px;padding:0;overflow:hidden'>41、ation/x-www-form-urlencoded");

myXmlHttpRequest.onreadystatechange=function chuli(){

//接收数据json
if(myXmlHttpRequest.readyState==4){
if(myXmlHttpRequest.status==200){

//取出并转成对象数组
var res_objects=eval("("+myXmlHttpRequest.responseText+")"</p><p style='height:0px;padding:0;overflow:hidden'>42、);

$('dj').innerText=res_objects[0].price;
$('tw').innerText=res_objects[1].price;
$('ld').innerText=res_objects[2].price;

}
}

}
myXmlHttpRequest.send(data);

}

}

//使用定时器 每隔5 秒
window.setInterval("updateGol</p><p style='height:0px;padding:0;overflow:hidden'>43、dPrice()",5000);

ntent-Type: text/html;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");

//接收

$cities=$_POST['city'];

//随机的生成 三个 500-2000间数
//$res='[{"price":"400"},{"price":"1000"},{"price":"1200"}]';

$res='[';

for($i=0;$is)-1){
$res.='{"cityname":"'.$cities[$i].'" ,"price":"'.rand(500,1500).'"}]';
}else{

$res.='{"cityname":"'.$cities[$i].'" ,"price":"'.rand(500,1500).'"},';
}

}

file_put_contents("d:/mylog.log",$res."\r\n",FILE_APPEND);

echo $res;

?>

晚上的练习

1. 把省市联动 和数据库
2. 把黄金价格波动的 上下箭头指示做出来
3. 把用户管理系统(信息共享系统)，使用更加规范的mvc模式开发(引入smarty)

如果我们的代码比较复杂，可以通过
file_put_contents来输出信息到某个日志文件.(!!!!!!!)