运用jQuery的ajax方法实现跨域访问

前端页面测试代码如下：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    .gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}
 
    </style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script>
    
//首先跨域访问，须对方允许跨域访问。
//跨域访问时，如果未知对方返回函数，一般情况下我们须在访问连接里加入callback="xxx"，指定接收返回函数名，这是我们需要设置jsonpCallBack:"xxx"。（方法二）
//如果我们自己写的前后台之间的访问，可以修改后台代码的情况时，可以使用jsonp属性，设置样式为，jsonp:"xxxx"。这时在后端服务器返回值时需要取出xxxx属性的值（jQuery自动生成的唯一的方法名）。（方法一）
//其中方法二，可以不使用success回调方法，在JS中定义一个名为xxxx的方法也可以作为回调方法！
//如下代码所示：

function testAjax()
    { 
        var name = $("#username").val();
        $.ajax({
                type : "post", 
                url:"xxxxxxxxxx",//正确访问的网址  
                data : {
                    name :name
                },
                dataType : "jsonp", //jsonp：跨域访问  json：是同源服务器访问
                jsonp : "jsonpCallback",//方法一
              //jsonpCallBack : "xxxx" ,//方法二
　　　　　　　　　 success : function(data) { 
　　　　　　　　　　　　alert(data);
                }
            });
    }
    
    function xxxx(result)
    {if (result == "testOK")
        {
            alert("Test success!");
            $("#form").submit();
        }
        else
        {
            alert(result);
        }
    }
    
</script>
</head>
<body>

<div align="center">
<h1>Test</h1>
<form action="" id="form">
    <table class="gridtable">
        <tr><td>Name</td><td><input type="text" id="username" /></td></tr>
        <tr><td><input type="button" value="CONFIRM" onclick="testAjax();"/></td></tr>
    </table>
</form>
</div>
</body>

</html>

服务器端相应测试代码如下：

function test(request, response)
{
    var name = request.getParameter("name");
　　 var callBackMethod = "";
    if (name == "test")
    {
        //response.write("jsonpCallback({msg:'ok'})");//方法名jsonpCallback随便起，不过前台取返回值的方法名应与该名相同 也可以用这个方法。
　　　　 callBackMethod = request.getParameter("jsonpCallBack");//方法一
　　　　 //callBackMethod = request.getParameter("callback");//方法二
　　　　 response.write(callBackMethod+"('testOK')");//返回值
　　} 
　　else 
　　{ 
　　　　var errMsg = "错误测试"; response.write(callbackMethod+"('" + errMsg + "')");
    } }

 

posted on 2015-04-30 17:37  sukra  阅读(304)  评论(0)    收藏  举报

导航