阅读更多…" />

经典Ajax示例:

  • XMLHttpRequest原生方式
var request = new XMLHttpRequest();
request.open("POST", "index.php");
var data = "parameter1" + encodeURIComponent(parameter_one) + "&parameter2" + encodeURIComponent(parameter_two);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange = function() {
    if (request.readyState===4) {
        if (request.status===200) {
            var ret = request.responseText;
            //做有意义的事

        } else {
            alert("发生错误:" + request.status);
        }
    }
}
  • jQuery
$.ajax({
    type:"POST",
    url:'index.php',
    dataType:"json",
    data:{
        "parameter1":parameter_one,
        "parameter2":parameter_two
    },
    success:function(ret){
        //做有意义的事

    },
    error:function(jqXHR){
        if (jqXHR.status!=200) {
            alert("发生错误:" + jqXHR.status);
        }
    }
});

跨域Ajax方案:

方案A:JSONP

  • 前端请求页面:
$.ajax({
    type:"POST",
    url:'http://127.0.0.1/test/Ajax_jsonp/service.php',
    dataType:"jsonp",
    jsonp:"jsonp",
    data:{
        "parameter1":parameter_one,
        "parameter2":parameter_two
    },
    success:function(ret){
        //做有意义的事
        alert(JSON.stringify(ret));
        console.log(ret);
    },
    error:function(jqXHR){
        if (jqXHR.status!=200) {
            alert("发生错误:" + jqXHR.status);
        }
    }
});
  • 后端响应页面:
    注意后端响应是GET
<?php 
if (!empty($_GET['jsonp'])) {
    $jsonp = $_GET['jsonp'];
    $ret = json_encode($_GET);
    echo "{$jsonp}({$ret})";
}

方案B:XHR2服务端添加响应头信息(IE10以下不支持)

header("Access-Control-Allow-Origin:*");//允许所有来源访问
header("Access-Control-Allow-Method:POST,GET");//允许访问的方式

终极方案:后端代理

curl


Thanks♪(・ω・)ノ 感谢你长得那么好看还来看我的博客!see you around ~

跨域Ajax方法插图
00:00/00:00

分类: 代码|查看

eson

🌀偶遇故人点头微笑^_^心像透明水滴☝没有喜悲…🍻

1 条评论

WRZ · 2019年2月2日 下午2:01

新年快乐,我有一种进了QQ空间的感觉!

发表评论