首页 > 代码库 > Ajax基础入门
Ajax基础入门
1.什么是ajax
全称:Asynchronous JavaScript and XML(用异步的形式的JavaScript去操作XML) 用来传输进行数据交互==其实就是拿数据发数据。
2.应用
Ajax就是做到当页面内容发生改变的时候能不刷新页面,就能把改变告知我们。比如,我们注册的时候信息填写错误,是不是没刷新页面就能直接看到信息提示,比如我们玩QQ的时候,有什么消息都会提醒你,丝毫没有刷新页面,丝毫没有影响你干别的事情,这就是Ajax做的事情。
3.具体步骤
(1)创建ajax对象
var xhr = new XMLHttpRequest();
(2)设置请求信息
xhr.open(method,url,async);
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
(3)提交请求
xhr.send();
(4)等待服务器返回内容
xhr.onreadystatechange = function() { //弹出内容 }
4.具体例子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>TestAjax</title> 6 <script type="text/javascript"> 7 function loadXMLDoc() 8 { 9 var xhr; 10 if (window.XMLHttpRequest) 11 {// code for IE7+, Firefox, Chrome, Opera, Safari 12 xhr=new XMLHttpRequest(); 13 } 14 else 15 {// code for IE6, IE5 16 xhr=new ActiveXObject("Microsoft.XMLHTTP"); 17 } 18 xhr.open("GET","hello.txt",true); 19 xhr.send(); 20 xhr.onreadystatechange=function() 21 { 22 if (xhr.readyState==4 && xhr.status==200) 23 { 24 document.getElementById("myDiv").innerHTML=xhr.responseText; 25 } 26 } 27 } 28 </script> 29 </head> 30 <body> 31 <h2>AJAX</h2> 32 <button type="button" onclick="loadXMLDoc()">请求数据</button> 33 <div id="myDiv"></div> 34 </body> 35 </html>
点击按钮"请求数据" 会在id="myDiv"的div下显示出hello.txt的内容(不会刷新整个页面)
说明:
1.html和txt文件在同一个目录下
2.
创建的ajax对象实际是存在兼容问题的,IE6以下没有这个对象的,所以是获取不到数据的,IE6以下用的实际是一个插件的方式:
ActiveXObject(‘Microsoft.XMLHTTP‘) //ActiveXObject: IE6下插件的总称,包含很多插件
//Microsoft.XMLHTTP:具体某个插件的名字
所以我们需要对上面做一个兼容性的处理:
var xhr = null; if(window.XMLHttpRequest){ //加window是因为如果直接判断IE下不存在的东西会报错,加了window,就是在判断一个属性是否存在,这样就不会报错了(当然我们都知道所有的东西都在window对象下,所以这样判断是有效的) xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); }
3.在上面的代码中xhr.send()提交请求是需要时间的,所以必须要等到一定时间提交成功后,我们后面的才能正确获取到内容,所以这就是后面的代码正确执行,依赖于前面,但是如果用同步的话,
我们后面那些不依赖这些前面代码的代码也没办法执行,体验就不好了,所以我们选择用异步,而对于这些依赖前面代码执行的代码,我们就进行判断
if (xhr.readyState==4 && xhr.status==200)
就是判断如果数据响应到了,收到了,再弹出内容。(如果我们不判断,按照异步的原理,就会立马弹出来,获取数据需要时间,因为实际还没获取到数据,所以会弹出空,怕误解,所以这里我 再强调下).
Ajax基础入门
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。