[第一弹]ajax简单应用
ajax(全称:Asynchronous JavaScript And XML )
ajax是一门利用JS和XML与服务器交换数据的一门语言.
传统的web程序工作原理图:Ajax工作原理图:创建XMLHttpRequest对象有两种情况:1.在IE浏览器下: varxmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); 2.在W3C模型浏览器下(google chrome/firefox/opera): var xmlHttp = new XMLHttpRequest(); 为了适应不同的浏览器,达到兼容性,可以创建一个公共JS文件,用来生成xmlHttpRequest对象 代码1-1,public.js:
function createXMLHttp(){ /* var xmlHttp; try{ xmlHttp = new XMLHttpRequest(); return xmlHttp; } catch(e){} try{ xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); return xmlHttp; } catch(e){} */ var xmlHttp; if(window.ActiveXObject){ xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); } else{ xmlHttp = new XMLHttpRequest(); } return xmlHttp; } Ajax相关方法:
1. open(method,url) 初始化ajax对象 method:请求方式post、get url:请求资源地址 2.setRequestHeader(header,value) 设置请求头信息 Header:头信息 Value:值 3.send(content) 发送请求 Content:所传递的参数只有在post请求时才需要将参数放在这里 相关属性:lreadyState Ajax对象的状态码,这个状态码会随时改变 0:表示对象已建立,但未初始化 1:表示对象已初始化,但未发送 2:已调用send方法进行请求 3:正在接收数据(接收到一部分) 4:接收完成 2. onreadystatechange 当ajax对象的状态码发生改变时,所触发的回调函数 3. status http响应状态码 4.statusText http响应的文本 5. responseText http响应内容的文本 6. responseXML http响应内容的xml数据
ajax代码1-2,demo01.html:
<html> <script lanuage="juavascript" src="public.js"></script> <script> var xmlHttp = createXMLHttp(); xmlHttp.open('get','demo01.php'); xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState == 4){ alert(xmlHttp.responseText); } }; xmlHttp.send(null); </script> </html> 代码1-3,demo01.php:
<?php echo 'Hello Ajax !'; ?>
结果如下: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |