Ajax的笔记
Ajax指异步JavaScript及XML(Asynchronous JavaScipt And XML),是一种异步交互式网页开发技术,用于创建快速动态网页。与服务器进行少量数据交换中,Ajax可以使网页实现异步更新,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
97年微软便发明了ajax的关键技术,并且在99年用于IE5中,但可惜因为其它原因没有被推广搁置了起来,ajax技术的流行得益于google的大力推广。Ajax的核心是JavaScript对象XmlHttpRequest,是一种支持异步请求的技术,它的意义有:1.在不重新加载页面的情况下更新网页。2.在页面已加载后从服务器请求数据。3.在页面已加载后从服务器接收数据。4.在后台向服务器发送数据。需要注意的是AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
1.AJAX的工作原理:
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
2.Ajax的优点:
1.最大的一点是页面无刷新,用户的体验非常好。
2.使用异步方式与服务器通信,具有更加迅速的响应能力。
3.可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
4.基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
5.Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离),有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
3.Ajax的缺点:
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
4.XmlHttpRequest对象的属性和方法:
属性 |
说明 |
readyState |
存有 XMLHttpRequest 的状态。从0到4发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪 |
Onreadystatechange |
存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
responseText |
服务器响应的文本内容 |
responseXML |
服务器响应的XML内容对应的DOM对象 |
Status |
服务器返回的http状态码。200表示“成功”,404表示“未找到”,500表示“服务器内部错误”等。 |
statusText |
服务器返回状态的文本信息。 |
方法 |
说明 |
Open(string method,string url,boolean asynch, String username,string password) |
指定和服务器端交互的HTTP方法,URL地址,即其他请求信息; Method:表示http请求方法,一般使用"GET","POST". url:表示请求的服务器的地址; asynch:表示是否采用异步方法,true为异步,false为同步; 后边两个可以不指定,username和password分别表示用户名和密码,提供http认证机制需要的用户名和密码。 |
Send(content) |
向服务器发出请求,如果采用异步方式,该方法会立即返回。 content可以指定为null表示不发送数据,其内容可以是DOM对象,输入流或字符串。 |
SetRequestHeader(String header,String Value) |
设置HTTP请求中的指定头部header的值为value. 此方法需在open方法以后调用,一般在post方式中使用。 |
getAllResponseHeaders() |
返回包含Http的所有响应头信息,其中相应头包括Content-length,date,uri等内容。 返回值是一个字符串,包含所有头信息,其中每个键名和键值用冒号分开,每一组键之间用CR和LF(回车加换行符)来分隔! |
getResponseHeader(String header) |
返回HTTP响应头中指定的键名header对应的值 |
Abort() |
停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。 |
上面了解了Ajax以及工作原理和XmlHttpRequest对象的属性和方法,那我们该怎么样来使用它呢?这里我分来五步来实现。
第一步:创建XmlHttpRequest对象:
1
2
3
4
5
6
7
|
var xmlhttp = null ; //XMLHttpRequest IE6是有兼容问题的,可以判断ie6的 ActiveXObject('Microsoft.XMLHTTP') if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); //除了IE6以外的浏览器 } else { xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" ); //IE6浏览器 } |
第二步:指定链接地址:
1
|
var url= 'demo.php' 。 |
第三步:发送资源请求给服务器。
使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器。
xmlhttp.open(method,url,async) method包括get和post,url主要是文件或资源的路径,async参数为true(代表异步)或者false(代表同步)
xmlhttp.send();使用get方法发送请求到服务器。
xmlhttp.send(string);使用post方法发送请求到服务器。
post 发送请求什么时候能够使用呢?
(1)更新一个文件或者数据库的时候。
(2)发送大量数据到服务器,因为post请求没有字符限制。
(3)发送用户输入的加密数据。
get例子:
1
2
3
4
|
xmlhttp.open( "GET" , "ajax_info.txt" , true ); xmlhttp.open( "GET" , "index.html" , true ); xmlhttp.open( "GET" , "demo_get.asp?t=" + Math.random(), true );xhttp.send(); xmlhttp.send( null ); //传递参数用的,但是只有在使用post方式提交请求的时候才有用 |
post例子:
1
2
|
xmlhttp.open( "POST" , "demo_post.asp" , true ); xmlhttp.send(); |
post表单例子:
1
2
3
|
xmlhttp.open( "POST" , "ajax_test.aspx" , true ); xmlhttp.setRequestHeader( "Content-type" , "application/x-www-form-urlencoded" ); xmlhttp.send( "fname=Henry&lname=Ford" ); |
第四步:服务器响应
使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
responseText:获得字符串形式的响应数据。
responseXML:获得 XML 形式的响应数据。
如果来自服务器的响应并非 XML,请使用responseText属性。
responseText 属性返回字符串形式的响应,因此可以这样使用:
responseText例子:
1
|
document.getElementById( "demo" ).innerHTML=xmlhttp.responseText; |
如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:
responseXML例子:
1
2
3
4
5
6
7
|
xmlDoc = xhttp.responseXML; txt = "" ; x = xmlDoc.getElementsByTagName( "ARTIST" ); for (i = 0; i < x.length; i++) { txt += x[i].childNodes[0].nodeValue + "<br>" ; } document.getElementById( "demo" ).innerHTML = txt; |
第五步:onreadystatechange函数的使用
onreadystatechange函数,当发送请求到服务器,我们想要服务器响应执行一些功能就需要使用onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。
onreadystatechange属性存储一个当readyState发生改变时自动被调用的函数。
readyState属性,XMLHttpRequest对象的状态,改变从0到4,0代表请求未被初始化,1代表服务器连接成功,2请求被服务器接收,3处理请求,4请求完成并且响应准备。
status属性,200表示成功响应,404表示页面不存在。
在onreadystatechange事件中,服务器响应准备的时候发生,当readyState==4和status==200的时候服务器响应准备。
1
2
3
4
5
6
7
|
xmlhttp.onreadystatechange= function () { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById( "demo" ).innerHTML=xmlhttp.responseText; } } |
使用回调函数
回调函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
1
2
3
4
5
6
7
|
function myFunction(){ loadXMLDoc( "/try/ajax/ajax_info.txt" , function () { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById( "demo" ).innerHTML=xmlhttp.responseText; } });} |
在实际的运用中,尝试利用事件+ajax 给button绑定点击事件,然后执行ajax。
server.php
<?php
if (isset($_POST['action']))
{
switch($_POST['action'])
{
case "btn1":btn1();break;
case "btn2":btn2();break;
default:break;
}
} function btn1()
{
echo "hello 按钮1";
}
function btn2()
{
echo "hello 按钮2";
} ?>
方式:index.php
<html>
<head>
<style>
div {width:600px;margin:200px auto;} .btn {
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.btn:hover {
background-color:#5cbf2a;
}
.btn:active {
position:relative;
top:1px;
} #btn2 {float:right;}
</style>
<script type="text/javascript" language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
//检查浏览器是否支持 XMLHttpRequest 对象
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function fun(n){
createXMLHttpRequest();
var url="server.php";
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = callback;
xmlHttp.send("action=" + n.value);
}
function callback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
alert(xmlHttp.responseText);
}
}
}
</script>
</head> <body>
<div>
<button type="button" class="btn" id="btn1" onclick="fun(this)" value="btn1">按钮1</button>
<button type="button" class="btn" id="btn2" onclick="fun(this)" value="btn2">按钮2</button>
</div>
</body> </html>
最新文章
- jshint创建配置文件
- c# webbrowser 错误捕获
- 微信小程序正式上线 可置于聊天窗口顶部
- 【 随笔 】 D3 难吗?
- oracle10 权限角色
- perl Exporter一些神奇写法
- 红帽linux忘记root密码的配置
- eclipse设置git忽略文件
- java.lang.UnsupportedClassVersionError: Bad version number in .class file (unable to load class org.
- [Android] Android 最全 Intent 传递数据姿势
- sql审核工具
- python之requests 乱七八糟
- ultraEdit MAC 破解方法
- P1339 热浪 最短路径模板题
- Docker一些常用命令
- ASP.NET批量下载文件
- vim学习日志(7):替换、删除文件中的字符
- Idea的Maven使用
- psutil-3.4.2才是我的老系统(Windows XP)的菜
- BurpSuite工具应用
热门文章
- VMware Workstation 10.0 正式版官方简体中文下载(附序列号)
- C++异常处理: try,catch,throw,finally的用法
- C#正则表达式通过HTML提取网页中的图片src
- 高效的SQLSERVER分页查询的几种示例分析
- 【配置属性】—Entity Framework 对应表字段的类型的设定配置方法
- IOS 动画播放案例
- JavaScript一词被《牛津大词典》收录了
- [moka同学笔记]使用composer 安装yii2以及遇到的问题
- php实现设计模式之 适配器模式
- Java子类属性继承父类属性