ajax快速入门
来源:互联网 发布:密立根油滴实验数据 编辑:程序博客网 时间:2024/06/01 20:28
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+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else if(window.ActiveXObject) {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
二、onreadystatechange响应函数的绑定
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
200: "OK"
404: 未找到页面
在 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();
规定请求的类型、URL 以及是否异步处理请求。
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
将请求发送到服务器。
- string:仅用于 POST 请求
GET请求
xmlhttp.open("GET",url,true);
xmlhttp.send();
POST请求
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xmlhttp.open("POST",url,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", url, 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
- Ajax.Net快速入门
- Ajax.Net快速入门
- Ajax.Net快速入门
- Ajax.Net快速入门
- Ajax 快速入门
- Ajax.Net快速入门
- Ajax快速入门
- Ajax.Net快速入门
- ajax快速入门
- Ajax快速入门
- Ajax快速入门
- [Mozilla]AJAX快速入门
- Ajax快速入门
- Ajax快速入门
- Ajax.Net快速入门(转载)
- AJAX 快速入门—什么是ajax?
- Ajax快速入门之http协议基础
- 关于Ajax.Net的快速入门
- Quartz 2D 函数小结
- java 正则表达式去除标点符号
- 【极客之作】快到极致的Android模拟器——Genymotion
- Python编码问题
- 【openfire插件开发】packet分类路由(职责链模式yes or no)
- ajax快速入门
- Java多线程-线程池
- 弱符号和extern “c”
- 在 360浏览器下 position:relative; 不随着滚动条的滚动而滚动而是飘在页面上 解决方法 给父级也就是出现滚动条的元素添加 position:relative;就ok l了
- linux命令大全
- 关于gdb的几个基本命令
- C++ Excel操作
- js如何实现打印指定区域的内容
- 赶紧的,先发一篇,最基本的string C++