上一周在改bug的时候用到了关于ajax请求的,今天就来总结一下ajax请求方式吧。
1.js中ajax请求方式:
1).open(method,url,async):建立对服务器的调用。
method:请求方法GET或POST,
url:服务器的地址,
async :表示异步请求,可以不写,默认是True,
xmlhttp.open("GET“,"/ajax_get/",true);
①.get请求方式:
//步骤1:创建异步对象
var ajax = new XMLHttpRequest();
//步骤2:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open("get","getStar.php?starName=" + name);
//步骤3:发送请求
ajax.send();
//步骤4:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function(){
if(ajax.readyStatus == 4 && ajax.status == 200){
//步骤5:如果能够进入到这个判断,说明数据完美的返回回来了,并且请求的页面是存在的
console.log(ajax.responseText);
}
}
②.post请求方式:
//创建异步对象
var xhr = new XMLHttpRequest();
//这种请求的类型及url
//post请求一定要添加请求头才行,不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.open("post","02.post.php");
//发送请求
xhr.send();
xhr.onreadystatechange = function(){
//这步为判断服务器是否正确响应
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
};
2.jq中ajax的请求方式:
①.用jquery 的 load() 方法实现ajax请求:
$('#mydiv').load('/myrequest/url/param')
这里的 "mydiv" 是要加载内容的区域 /myrequest/url/param 是你要请求的服务端的 URL. 一旦得到结果,就会把服务端返回的内容显示在 mydiv 区域中.
②.get请求方式:
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
③.post请求:
$.post('/myrequest/url/param',
{
text:"mytext",
other:"other_param"
},
// 调用服务端成功后的回调函数
function(){
alert('succeccd');
}
)
④.ajax请求方式:
$.ajax({
async:false,//同步,异步
url:"/addjoke", //请求的服务端地址
data:{
content:mycontent,
title:joketitle,
d:Math.random()
},
type:"post",
dataType:"text",
success:function(data){//(function(1))
//成功之后的处理,返回的数据就是 data
}
error:function(){
alert('error'); //错误的处理
}
});
//function(2);
3.同步,异步
同步:
当执行当前AJAX的时候会停止执行后面的JS代码,直到AJAX执行完毕后时,才能继续执行后面的JS代码。
当把async设为false时,这时ajax的请求时同步的,也就是说,这个时候ajax块发出请求后(按jq中方法④),
他会等待在function(1)这个地方,不会去执行function(2),直到function(1)部分执行完毕。
异步:
当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,
也就是说这时候执行的是两个线程,ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程)
在上例jq中方法④,当ajax块发出请求后,他将停留function(1),等待server端的返回,但同时(在这个等待过程中),前台会去执行function(2)。