ajax快速入门
发布时间:2020-12-15 22:02:33 所属栏目:百科 来源:网络整理
导读:AJAX,Asynchronous JavaScript And XML的简称。AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),可使网页从服务器请求少量的信息,而不是整个页面。ajax算不上新技术,只不过是几项老技术的整合,包括客户端脚本技术javascript、xml以及json
AJAX,Asynchronous JavaScript And XML的简称。AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),可使网页从服务器请求少量的信息,而不是整个页面。ajax算不上新技术,只不过是几项老技术的整合,包括客户端脚本技术javascript、xml以及json等数据交换形式、DOM等。 ajax的使用可以分为三个步骤:XMLHttpRequest对象的创建、onreadystatechange响应函数的绑定、发送请求。范例: <html> <head> <script type="text/javascript"> function load() { 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","/ajax",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="load()">通过 AJAX 改变内容</button> </body> </html> 一、XMLHttpRequest对象的创建 所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。 XMLHttpRequest 用于在后台与服务器交换数据,在不重新加载整个网页的情况下,对网页的某部分进行更新。 创建方法: var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+,Safari xmlhttp=new XMLHttpRequest(); } else if(window.ActiveXObject) {// code for IE6,IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } 二、onreadystatechange响应函数的绑定 当请求被发送到服务器时,我们需要执行一些基于响应的任务。 每当 readyState 改变时,就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 下面是 XMLHttpRequest 对象的三个重要的属性:
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。 当 readyState 等于 4 且状态为 200 时,表示响应已就绪: xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } 关于服务器响应 有responseText(字符串)和responseXML(XML结构树对象)两种形式。 三、发送请求 将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法: xmlhttp.open("GET",url,true); xmlhttp.send();
GET请求 xmlhttp.open("GET",true); xmlhttp.send(); POST请求 如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据: xmlhttp.open("POST",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates"); 最后的最后: 网站上一般存在多个 AJAX 任务,那么可以为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。 该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同): <!DOCTYPE script PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> var xmlhttp; function load(url,func){ if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); } else if(window.ActiveXObject){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } if(xmlhttp!=null){ xmlhttp.onreadystatechange=func; xmlhttp.open("GET",true); xmlhttp.send(); } else{ alert("Your browser does not support XMLHTTP."); } } function loadx(){ //alert(); load("b.html",function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("content").innerHTML=xmlhttp.responseText; } }); } </script> </head> <div id="content"></div> <input type="button" onclick="loadx()" value="load"> </html>可以将本文的两段代码作比较,可以发现后者更优,代码可以重复使用。也可以将callback函数写在单独的js文件中,在以后的项目中引用js文件就好。 相关文章: jquery中的ajax 参考资料:http://www.w3school.com.cn/ajax/index.asp (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |