最新消息:文章中包含代码时,请遵守代码高亮规范!

浅谈ajax技术

原创文章 user 141浏览 0评论

ajax实现了在不刷新整个界面的情况下去更新界面部分内容;

下面我就用自己所学知识的看法介绍一下ajax

早期页面加载一一部分的界面需要重新加载一遍浏览器,从新构建一遍dom tree;

ajax原理:http异步通信协议;

ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。

判断浏览器创建ajax对象;

var ajax;
if (window.XMLHttpRequest)
    //window.XMLHttpRequest在 IE7+, Firefox, Chrome, Opera, Safari下非undefind code for IE6, IE5下undefind
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  ajax=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  ajax=new ActiveXObject("Microsoft.XMLHTTP");
  }

ajax获取接收服务器返回值两种格式;

reponseText(获得数据串的响应数据)

reponseXML(获得XML形式的相应数据)

     //js方式创建容器接收后台传输内容
    document.getElementById("id").innerHTML=ajax.responseText;
    document.getElementById("id").innerHTML=ajax.reponseXML;

状态值:(什么是状态值:状态值即ajax请求中的一个过程,每个过程都会对应每个过程的状态值,用ajax.readystate判断)

        0—ajax异步对象创建完毕,但是还未发送

        1—ajax已经调用了open()方法,但是还未调用send()方法

        2—已经调用send(),但是还未到达服务器端

        3—表示请求已经到达服务端,正在服务端的处理,但是还未响应返回

        4—ajax已经完全接收了服务器的响应信息,但是状态码未必是正确的

状态码有:(什么是状态码:无论ajax请求数据库是否成功,服务器返回http协议头信息代码 用ajax.starts判断)

        200:交易成功

        404/500:错误请求/服务器内部产生错误      

  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        //内容
    }

//onreadystatechange存储函数 每当readystart改变就会调用这个函数

    //ajax.onreadystatechange状态监听函数
    ajax.onreadystatechange=function()
      //内容
  }

ajax的两种请求:

post、get;

与post相比,get请求更快更简单;

但在以下情况建议用post;

1.无法使用缓存文件;

2.向服务器发送大量数据

3.发送包含未知字符的用户输入时post比get更稳更可靠;

//aiax.open(method,url,async);
//method:请求的类型;GET 或 POST
//url:想要查找文件的地址
//async:true(异步)或 false(同步)
//get请求
ajax.open("GET","/ajax/demo_get.asp?t=" + Math.random(),true);
ajax.send();
//post请求样式
ajax.open("POST","/ajax/demo_post.asp",true);
send(string)

总结;1判断打开的浏览器是什么版本–>2 读取浏览器状态,状态改变执行函数–>3创建ajax的方式函数–>4再选择请求方式;

<div class="main" id="main">
</div>
<button type="button" onclick="zz()">请求数据</button>
<script type="text/javascript">
	function zz() {
		var ajax;
		var i;
		var win = window.XMLHttpRequest;
		//1判断打开的浏览器是什么版本
		if(win) {
			alert(2)
			ajax = new XMLHttpRequest();
		} else {
			ajax = new ActiveXObject("Microsoft.XMLHTTP");
		};
		//2 读取浏览器状态,状态改变执行函数
		ajax.onreadystatechange = function() {
			if(ajax.readyState == 4 && ajax.status == 200) {
			        //3创建ajax接收后台的传值的方式函数
				document.getElementById("main").innerHTML = ajax.responseText;
			}
		}
		//4再选择请求方式;
		ajax.open("GET", "test.txt", true);
		ajax.send();
	}
</script>

对于刚刚了解ajax的我,上面即近期所见所得;

你有什么更好更有趣的ajax知识可以跟我一起探讨探讨;

以上总结,如有言误,请指正。

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/25261.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Miya的打赏,我们会更加努力!    如果您想成为作者,请点我

发表我的评论
取消评论

表情