正文
jQuery中异步请求
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
1、load方法
使用
load()
方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:
$( selector ).load( URL , data , callback );
参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。
例子:加载phpinfo.php页面并将放回的结果放到<div>中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用load()方法异步请求数据</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<input id="button" type="button" value="加载"/>
<div id="test"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("#test").load("/phpinfo.php",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
alert(responseTxt);
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</body>
</html>
2.getScript()方法
使用
getScript()
方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示:
jQuery.getScript(url,[callback])
或
$.getScript(url,[callback])
参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。
####这个方法就是调用js文件并执行,可以跨域操作#####
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<input id="button" type="button" value="加载"/>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$.getScript('http://www.123.com:81/2.js',function(){alert("success")})
});
});
</script>
</body>
</html>
2.js
alert('2.js加载成功'); 调用成功
执行了回调函数。
3.通过get方法
使用
get()
方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,它的调用格式如下:
$.get(url,[callback])
参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。
#########不能跨域访问###############
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$.get("http://www.123.com/",function(data,status){alert("数据:" + data + "\n状态:" + status)});
</script>
</body>
</html>
a.html文件
4.通过post方法
#######不能给跨域############
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="html"></div>
<script type="text/javascript">
$.post("http://www.123.com/test.php",
{
name:"afanti",
sex:"man"
},
function(data,status){
alert("数据:" + data + "\n状态:" + status);
document.getElementById("html").innerHTML = data
});
</script>
</body>
</html>
test.php
5.getJSON
$.getJSON("/test.php?name=afanti&sex=man").then(
function(result){
alert(result.name+result.sex);
});
then后面处理回调。getScript也可以使用。
6.ajax发出请求。a.html
$.ajax({
type:"get",
url:"test.php",
data:{"name":"afanti","sex":"man"},
catche: false,
async: false,
timeout: 1000,
dataType:"json", //预期服务器返回的数据类型。支持参数:xml,html,script,json,text,jsonp
contentType: 'application/x-www-form-urlencoded',
headers:{
"header1":"aaaa" //设置请求头1
},
beforeSend:function(xhr){
xhr.setRequestHeader("header2","bbbb") //设置请求头2
}
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
//xhrFields:{
//withCredentials:true //默认情况下,跨域请求不携带cookie。不跨域就可以携带cookie。通过设置这个参数可以实现跨域携带cookie但是后台代码,Access-Contro-Allow-Credentials:true加上这个头部信息
//}
success:function(data,status)
{
document.getElementById("html").innerHTML=data.name+";"+data.sex;
// document.getElementById("html").innerHTML=data;
alert(status);
},
error:function(err,status)
{
alert(status);
}
});
test.php
ajax实现jsonp
http://www.123.com/a.html
$.ajax({
type:"get",
url:"http://www.123.com:81/test.php",
catche: false,
async: false,
timeout: 1000,
dataType:"jsonp", //预期服务器返回的数据类型。
contentType: 'application/x-www-form-urlencoded',
jsonp: 'callback', //http://www.123.com:81/test.php?callback=callback1111&_=1529803521061发出这样的请求
jsonpCallback: 'callback1111', //回调函数的名字
success:function(data,status)
{
for(var key in data)
{
console.log(key,data[key]); } //1、这里
alert(status);
},
error:function(err,status)
{
// alert(status);
}
});
function callback1111(data)
{
alert(data); //2、都能获取到数据
}
www.123.com:81/test.php
<?php
$callback = $_GET['callback'];//得到回调函数名
$data = array('name'=>'afanti','sex'=>'man');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出
?>
可以进行跨域访问。
参考文章:
https://www.xmanblog.net/2018/04/09/web-cross-domain-ecurity/