ajax:
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。(来自百度百科)。
Ajax快速入门:
1.创建XMLHttpRequest对象
2.将状态触发器绑定到一个函数
3.使用open方法建立与服务器的连接
4.向服务器端发送数据
5.在回调函数中对返回数据进行处理
1.创建XMLHttpRequest对象:
不同浏览器提供不同的支持,IE浏览器 new ActiveXObject("Msxml2.XMLHTTP"),new new ActiveXObject("Microsoft.XMLHTTP"),其它浏览器(火狐) new XMLHttpRequest();
XMLHttpRequest的方法:
open(method,url, asynch) :建立对服务器的调用
send(content) :向服务器发送请求
XMLHttpRequest的属性:
onreadystatechange :状态回调函数
responseText/responseXML :服务器的响应字符串
status:服务器返回的HTTP状态码(200 =请求成功;404=请求失败......)
statusText: 服务器返回的HTTP状态信息
readyState :对象状态(0 = 未初始化;1 = 正在加载;2 = 已加载;3 = 交互中;4 = 完成)
一般都只用找到文档上代码复制代码就OK:
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"); }
2.将状态触发器绑定到一个函数:
xmlHttp.onreadystatechange = processor; 这里的processor是回调函数的方法名,当对象状态发生改变时,就会触发回调函数,触发回调函数这里当做最后一步。
xmlHttp.onreadystatechange = processor; function processor (){ … … }
3.使用open方法建立与服务器的连接:
open(method,url, asynch) 其中method表示HTTP调用方法,一般使用"GET","POST"; url表示调用的服务器的地址 ; asynch表示是否采用异步方式,true表示异步,一般这个参数不写。
xmlHttp.open("POST", "url"); xmlHttp.open("GET", "url?name=xxx&pwd=xxx");//get提交方式,url后面可以带参数,post提交方式参数放在接下来要讲的send方法里面
4.向服务器端发送数据:
用get提交方式:
//3.使用open方法建立与服务器的连接 xmlhttp.open("GET","url?name=xxx&pwd=xxx"); //4.发送请求 send xmlhttp.send(null);
用post提交方式:
//3.使用open方法建立与服务器的连接 xmlhttp.open("POST",URL); xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");//设置请求头,这个在post提交方法中要多写的代码 //4.发送请求 xmlhttp.send("name=xxx&pwd=xxx");
5.在回调函数中对返回数据进行处理:
//2.将状态触发器绑定到一个函数xmlhttp.onreadystatechange= processor; function processor(){ //5.处理响应数据 当信息全部返回,并且是成功 if(xmlhttp.readyState==4&&xmlhttp.status==200){ } };
一个完整的例子:
//第一步:得到XMLHttpRequest对象. var xmlhttp = null; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); //针对于现在的浏览器包括IE7以上版本 } else if (window.ActiveXObject) { //针对于IE5,IE6版本 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //2.设置回调函数 xmlhttp.onreadystatechange=function(){ //5.处理响应数据 当信息全部返回,并且是成功 if(xmlhttp.readyState==4&&xmlhttp.status==200){ alert(xmlhttp.responseText); } }; //3.open xmlhttp.open("GET",URL); //4.发送请求 send xmlhttp.send(null);