之前对于Ajax能实现简单基本的应用,但并不了解它的原理,就是俗话说的“代码的搬运工”,不踏实,这几天重新看了下Ajax的内容,今天分享下这次的学习吧。
Ajax, asynchronous javascript and xml(个人比较喜欢知道它的全拼),即为异步的 javascript 和XML;
简单讲下,javascript是一种网络的脚本语言;XML(extensible markup language)指可扩展的标记语言;异步又是另一个概念,一般拿来跟同步比较,异步带点一心二用的味道,高效能,同步么,是比较的执着,特别的专注,比如说,我要烧壶开水,异步就是说烧开水的时候,我可以去做别的事,打打电话,聊聊天,浇浇花,做做瑜伽呀;同步就是烧开水的时候,我紧紧盯着开水,寸步不离,直到水开,至shi方休呀,通俗来讲的话。
OK,回归正题,ajax指局部刷新,异步更新,不是“呀,又是一门新的编程语言”,而是几种技术的组合,比如javascript,XML,CSS,DOM模型等。那什么事都有核心是吧,ajax的核心是XMLHttpRequest(简称XHR,X号的HR经理,开个玩笑,就是比较强大),中文意思就是可扩展超文本传输请求,XHR对象用于在后台与服务器交换数据,还是结合图来看吧,这是通过网上的一张图帮助了解
那么我们现在来了解下XMLHttpRequest对象,它有几个属性,
1.onreadystatechange:状态改变所触发的时间处理程序,有5个状态值,
readystate状态值0 已创建XHR对象,但未初始化
1 准备好发送
2 已发送,还没有响应
3 正在接受响应,还不完整
4 接受响应完毕
还是补充下,0创建XHR对象,未调用open方法;1初始化,未调用send方法;2.send方法调用,但当前的状态及HTTP头未知;3.数据传送中,但不完全;4.数据接收完毕,可通过responseXml和responseText获取完整的回应数据。2.responseText:服务器返回的响应文本,只有readystate>=3时,才会有值,但3并不完整;
3.responseXML:响应信息是XML,可以解析为DOM对象;
4.status:服务器的Http状态码,200??OK,404??未找到页面;
5.statusText:服务器Http 状态码文本,比如说OK,not found
XHR还有几个方法,
1.open(method, url, boolean) //打开XMLHttpRequest对象,method用的较多的为get(查数据,从服务器获取一定的数据), post(更新数据库,直接提交到服务器中或者发送大量数据),url指请求资源网址,boolean为是否使用异步,默认为true,代表异步;
2.send(), 发送请求到Ajax引擎,让Ajax引擎操作,发送内容可以为需要的参数,也可以是null;
它的流程一般为,创建XHR对象,发送请求,响应数据,一段简单的代码如下:
function loadContent() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","test.php",true); xmlhttp.send(); }readyState与status的意思是说,先检查XMLHttpRequest的状态保证已经完成(readyState =4),然后根据服务器的设定询问请求状态,如果一切准备就绪(status=200),那么就执行之后的操作。
ajax初级简单的知识,这一点点知识还是很强大的,确切的说,Ajax很强大,还是希望能多多指教,谢谢!
版权声明:本文为博主原创文章,未经博主允许不得转载。