AJAX===
一、ajax实现步骤:1、创建XMLHttpRequest对象
2、设置回调函数
xmlHttp.onreadystatechange = function() {
if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {
// 根据不同的返回类型处理响应
}
3、初始化XMLHttpRequest组件
xmlHttp.open( type, url, async );
get:xmlHttpRequest.open("GET",url,true);
post:xmlHttpRequest.open("POST",url,true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
4、发送请求
xmlHttp.send( null / string );
get:xmlHttpRequest.send(null);
post:xmlHttpRequest.send(数据信息);
二、XMLHttpRequest对象和ActiveX对象
// 兼容写法
// 如果是 IE7+,FF 等高级浏览器
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
// 如果是IE 5,IE6 低版本浏览器
if( window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
三、XMLHttpRequest对象的属性
onreadystatechange 处理服务器响应的函数
readyState 服务器响应的状态信息:
0请求未初始化
1服务器连接已建成
2请求已发送
3请求处理中
4请求已完成
status 200:相应正确返回
404:未找到页面
responseTest 获取字符串形式的响应数据
responseXML 获取XML形式的相应数据
四、XMLHttpRequest对象的方法
open(method,url,async) 创建http请求;
method:请求的类型:GET或POST
url:服务器请求地址
async:是否异步请求,true(异步)或false(同步)
send(string) 将请求发送到服务器
注意:string仅用于post方法,get方法为空或null
setRequestHeader() 指定请求的某个HTTP头
getResposeHeader() 从响应中获取指定的HTTP头
五、文本和 XML方式响应的区别
文本: var username = xmlHttpRequest.responseText;
//省略其他代码……
XML: var dom = xmlHttpRequest.responseXML;
......
if(dom){
var userNodes = dom.getElementsByTagName("username");
if( userNodes.length > 0 ){
var username= userNodes[0].firstChild.nodeValue;
//省略其他代码……
}
}
六、jQuery 实现 AJAX (简化原生 JavaScript 实现 AJAX )
$.ajax()方法
$.ajax( {
url : " 发送的请求地址",
type : " 请求方式",
data : " 要发送的数据",
dataType : " 服务器返回的数据类型", // "xml html script json text"
beforeSend : function(data) { // 码 发送请求前执行的代码 },
success : function(data) { // 码 发送成功后执行的代码 },
error : function() { // 码 请求失败执行的代码 }
} );
$.get() 方法
是$.ajax()方法中类型为GET请求的简化版
$.get() 方法
$.get(
" 发送的请求地址" ,
要发送的数据 key/value ,
回调函数 ,
"返回内容格式,xml, html, script, json, text "
);
$.post() 方法
是$.ajax()方法中类型为POST请求的简化版
$.post() 方法
$.post(
" 发送的请求地址" ,
要发送的数据 key/value ,
回调函数 ,
" 返回内容格式,xml, html, script, json, text "
);
$.getJSON() 方法
是$.get()方法中返回数据类型为JSON的简化版
$.getJSON() 方法
$.getJSON(
" 发送的请求地址" ,
要发送的数据 key/value ,
回调函数
);
$.getScript() 方法
通过 HTTP GET请求载入并执行一个JavaScript 文件
$.getScript() 方法
$. getScript(
" 发送的请求地址" ,
回调函数
);
serialize() 用于序列化表单内容为字符串
好处:不用逐个去获取表单元素的值,拼凑参数序列
serialize()
$("form").serialize() ;
// 返回参数序列
single=Single&check=check2&radio=radio1