Ajax学习二

前端之家收集整理的这篇文章主要介绍了Ajax学习二前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Ajax返回的数据格式有3种,text/xml/json

无刷新数据交换技术:

flash,javaapplet,框架,iframe,ajax)


json数据 ——一种原生态的数据、

ajax原理:使用XMLHTTPREQUEST异步传输获得数据,赋给占位符、

uajax在什么地方用的多

1动态加载数据,按需取得数据。【树形菜单、联动菜单.../省市联动】

2改善用户体验。【输入内容提示、带进度条文件上传...

3电子商务应用。 【购物车、邮件订阅...

4访问第三方服务。 【访问搜索服务、RSS阅读器】

5.数据的布局刷新

<?PHP ?> 其中?>的有无表示被包含于包含的关系。


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

解决方法

1.url后带一个总是变化的参数,比如当前时间

varurl="/ajax/registerProcess.PHP?mytime="+newDate()+"&username="+$("username").value;

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

//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式

header("Content-Type:text/xml;charset=utf-8");

//告诉浏览器不要缓存数据

header("Cache-Control:no-cache");

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

register.PHP

<html>

<head>

<title>用户注册</title>

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

<scripttype="text/javascript">

//创建ajax引擎

functiongetXmlHttpObject(){

varxmlHttpRequest;

//不同的浏览器获取对象xmlhttprequest对象方法不一样

if(window.ActiveXObject){

xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");

}else{

xmlHttpRequest=newXMLHttpRequest();

}

returnxmlHttpRequest;

}

varmyXmlHttpRequest="";

//验证用户名是否存在

functioncheckName(){

myXmlHttpRequest=getXmlHttpObject();

//怎么判断创建ok

if(myXmlHttpRequest){

//通过myXmlHttpRequest对象发送请求到服务器的某个页面

//第一个参数表示请求的方式,"get"/"post"

//第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)

//第三个参数表示true表示使用异步机制,如果false表示不使用异步

varurl="/ajax/registerProcess.PHP?mytime="+newDate()+"&username="+$("username").value;

//打开请求.

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

//指定回调函数.chuli函数

myXmlHttpRequest.onreadystatechange=chuli;

//真的发送请求,如果是get请求则填入null即可

//如果是post请求,则填入实际的数据

myXmlHttpRequest.send(null);

}

}

//回调函数

functionchuli(){

//window.alert("处理函数被调回"+myXmlHttpRequest.readyState);

//我要取出从registerPro.PHP页面返回的数据

if(myXmlHttpRequest.readyState==4){

//取出值,根据返回信息的格式定.text

//window.alert("服务器返回"+myXmlHttpRequest.responseText);

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

}

}

//这里我们写一个函数

function$(id){

returndocument.getElementById(id);

}

</script>

</head>

<body>

<formaction="???"method="post">

用户名:<inputtype="text"onkeyup="checkName();"name="username1"id="username"><inputtype="button"onclick="checkName();"value="验证用户名">

<inputstyle="border-width:0;color:red"type="text"id="myres">

<br/>

用户密码:<inputtype="password"name="password"><br>

电子邮件:<inputtype="text"name="email"><br/>

<inputtype="submit"value="用户注册">

</form>

<formaction="???"method="post">

用户名:<inputtype="text"name="username2">

<br/>

用户密码:<inputtype="password"name="password"><br>

电子邮件:<inputtype="text"name="email"><br/>

<inputtype="submit"value="用户注册">

</form>

</body>

</html>

registerpro.PHP

<?PHP

//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式

header("Content-Type:text/xml;charset=utf-8");

//告诉浏览器不要缓存数据

header("Cache-Control:no-cache");

//接收数据

$username=$_GET['username'];

if($username=="shunping"){

echo"用户名不可以用";//注意,这里数据是返回给请求的页面.

}else{

echo"用户名可以用";

}

?>

uajaxpost方式请求

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

关键代码

register.PHP

varurl="/ajax/registerProcess.PHP";

//这个是要发送的数据

vardata="username="+$('username').value;

//打开请求.

myXmlHttpRequest.open("post",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'];

原文链接:https://www.f2er.com/ajax/163362.html

猜你在找的Ajax相关文章