JQ的Ajax 没有什么 如果你看过我上一篇JS的ajax 基本实现代码都在哪里有分解解释
这篇文章 主要是 完善 自己实现的JS ajax 实现JQ一样用对象做参数
http://hemin.cn/jq/jQuery.ajax.html JQ的官网
1） JQ使用方法
$.ajax({
type: "POST",
url: "Ajax.php",
data: "name=John&password=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
},
error: function(msg){
alert( msg );
}
});上面的代码应该都会用吧
2） JS 实现对象参数
HTML和JS代码 这样就和JQ的一样了
ajax({
type: "POST",
url: "Ajax.php",
data: {"name":"陈总","Password":"BB","t": new Date().getDate()},
success: function(msg){
alert( "Data Saved: " + msg );
},
error: function(msg){
alert( msg );
}
});function objTo(data)
{
var res =[];
for (var key in data) {
res.push( encodeURIComponent(key)+"="+encodeURIComponent(data[key]));
}
return res.join("&");
}
// type,url,timeout,obj,success,error
function ajax(obj)
{
//get 传输对象的格式是 ?n1 = value1&n2 = value2
var str = objTo(obj.data)
/* 1创建XHR对象
这里需要注意 对IE兼容的支持 */
var xmlHttp, timer;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
/* 2 设置请求方式和请求地址 get 是请求方式 Ajax.php是请求地址
true 是代表Ajax是不是异步 Ajax就是为了使用异步 这里永远是true
*/
if(obj.type.toLowerCase()=="get"){
xmlHttp.open(obj.type,obj.url+"? "+str,true);
/* 3 发送请求 */
xmlHttp.send();
}else if(obj.type.toLowerCase()=="post")
{
//Post 提交
xmlHttp.open(obj.type,obj.url,true);
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send(str);
}
/* 4监听状态变化 */
xmlHttp.onreadystatechange=function()
{/*
readyState有5中变化 一般使用第4种
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
if(xmlHttp.readyState==4)
{
/* status 还有一个返回的状态 保证是正确的路径返回正确的值*/
if(xmlHttp.status>=200 &&xmlHttp.status<300 ||xmlHttp.status==304)
{
//链接成功也要中断请求
clearInterval(timer);
/* 5处理返回值
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
*/
// alert('成功') ;
obj.success(xmlHttp.responseText)
// alert(xmlHttp.responseText) ;
}else
{
obj.error(xmlHttp.responseText) ;
//请求失败
}
}
}
//超时关闭 不然会让你一直在等待
if(obj.timeout)
{
timer = setInterval(function(){
alert("中断请求");
xmlHttp.abort();
clearInterval(timer);
},obj.timeout)
}
}
