Ajax基础与运用
Ajax是很多种技术的结合体,工作的原理是开通一条可以传递信息的隧道,是新型的传递信息技术,
传统模式的web传递信息是需要加载整个页面,这样的效果是反应的速度慢,过渡依赖服务器的响应,占用较多的宽带,
现在流行的ajax技术,仅向服务器发发送所需要的数据,并不用加载整一个页面,这样服务器和游览器的交互就少了很多,大大的提高了响应的速度,
Ajax应用程序的优势在于:
1通过异步模式,提升了用户体验
2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
3. Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。
Ajax与服务器端链接的主要有四步曲,
1, 建立ajax对象;
2, function ajax(){
3, //1号线:创建ajax对象
4, var oAjax;
5, if(window.XMLHttpRequest){
6, 兼容 //IE7+, Firefox, Chrome, Opera,Safari
7, oAjax=newXMLHttpRequest();
8, }
9, else{//兼容ie6以下
10, oAjax=newActiveXObject("Microsoft.XMLHTTP")
11, }
12, return oAjax;
13, }
2向服务器发送数据请求;
1. 对象.onkeyup=function(){
2. //2号线:发送请求(准备资料,真正的发送)
3. //open(get,url,true)
4. //第一个参数:数据传输方式 get post
5. //第二个参数:处理文件 xx.php xx.txt ,要数据:直接写路径就好;提交数据:在地址那里写数据(get方式)
6. //第三个参数:同步或者异步方式,默认是异步true
7. var url='/checkName4.php?time='+newDate()+'&name='+$('username').value;
8. ajax.open('GET',url,true);
9. //send() 如果是get方式,写null或者为空
10. //如果是post,参数那就直接写要传输的内容
11. ajax.send(null);
4服务器发回请求格式有(xml,json,text,html);
1. //4号线:接收3号线传来的数据,进行处理
2. 服务器改变事事件
3. ajax.onreadystatechange=function(){ if(ajax.readyState==4){ 请求完成并且响应 if(ajax.status==200){ ok
4. 这是text格式 对象.innerHTML=ajax.responseText;
5. 这是xml格式
6. //alert(ajax.responseXML);
7. 这是json格式
8. var bb=JSON.parse(ajax.responseText);
9. //alert(bb);
10. 对象.innerHTML=bb.inf;
第三步服务器 php;
json处理代码:
1. <?php
2.
3. //3号线:获取ajax传来的信息,做处理,再返回给ajax:后台做,或者后台协作
4. //这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
5. header("Content-Type:text/text;charset=utf-8");
6. //告诉浏览器不要缓存数据
7. header("Cache-Control: no-cache");
8.
9. $userName=$_GET['name'];
10.
11. //0 不合法
12. //1 已被注册
13. //2 可以注册
14.
15. if($userName=='admin'){//把内容拿到,进行判断,输出信息返回给ajax
16. echo'{"inf":"这个用户名不能用"}';
17. }
18.
19. else{
20. echo'{"inf":"这个用户名能用"}';
21. }
22.
23. ?>