写文章

ajax实现跨域请求代码实例简单介绍

快乐打工仔 分类：实例代码

其实ajax是不具有跨域功能，这里说的ajax是jquery封装后的ajax。

关于原生的ajax相关内容可以参阅ajax教程版本。

实现的原理也是依靠jsonp，关于它的实现原理可以参阅JSONP用法详解一章节。

关于非跨域的使用可以参阅jquery使用ajax读取后台数据在表格中显示一章节。

上一个例子如果使用本站的编辑器运行，当然非跨域使用，但是如果在本地测试，那么就是跨域，肯定会首先。

截图如下:

前端教程

<!DOCTYPE html>
<html>
<head>
<meta charset=" gb2312">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("#bt").click(function () {
    var str = "<table>";
    $.ajax({
      url: "http://pipipi.net/demo/ajax/net/jsonp.ashx",
      data: {},
      type: "get",
      async: true,
      dataType: "jsonp",
      jsonp: "jsoncallback",
      jsonpCallback: "success_jsonpCallback",
      success: function (json) {
        $.each(json, function (index, obj) {
          $.each(obj, function (y, data) {
            str = str + "<tr>";
            str = str + "<td>" + data["username"]
            + "</td><td>" + data["address"]
            + "</td><td>" + data["score"] + "</td>";
            str = str + "</tr>";
          })
        })
        str = str + "</tr></table>";
        $("#antzone").html(str);
      }
    });
  })
})
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

特别说明:在www.pipipi.net和pipipi.net之间相互访问也属于跨域，所以上面的代码也属于跨域操作。

下面对上面的代码的主要部分进行以下说明:

（1）.url: "http://pipipi.net/demo/ajax/net/jsonp.ashx"，请求的地址。

（2）.data: {}，要发动到服务器的数据。

（3）.type: "get"，规定请求方式。

（4）.async: true，异步请求。

（5）.dataType: "jsonp"，规定是jsonp跨域请求。

（6）.jsonp: "jsoncallback",会作为url的一个参数进行传递，pipipi.net?jsoncallback=xxx。

（7）.jsonpCallback: "success_jsonpCallback"，规定jsoncallback的参数值，pipipi.net?jsoncallback=success_jsonpCallback。

（8）.success: function (json)，jons是json格式对象。

上面的代码实现了跨域，大家好像没有看到jsonp和jsonpCallback的作用，代码修改如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" gb2312">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function success_jsonpCallback(obj) {
  console.log(obj);
}
$(document).ready(function () {
  $("#bt").click(function () {
    var str = "<table>";
    $.ajax({
      url: "http://pipipi.net/demo/ajax/net/jsonp.ashx",
      data: {},
      type: "get",
      async: true,
      dataType: "jsonp",
      jsonp: "jsoncallback",
      jsonpCallback: "success_jsonpCallback",
      success: function (json) {
        $.each(json, function (index, obj) {
          $.each(obj, function (y, data) {
            str = str + "<tr>";
            str = str + "<td>" + data["username"]
            + "</td><td>" + data["address"]
            + "</td><td>" + data["score"] + "</td>";
            str = str + "</tr>";
          })
        })
        str = str + "</tr></table>";
        $("#antzone").html(str);
      }
    });
  })
})
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面的代码我们只是在javascript代码的顶部添加如下一段:

function success_jsonpCallback(obj) {
  console.log(obj);
}

控制台数据结果是:

前端教程

这说明pipipi.net?jsoncallback=success_jsonpCallback传递到后台以后，经过包装又传送到客户端。

后台代码确实如此:

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";
    string callback = context.Request.QueryString["jsoncallback"];
    DataSet ds = done();
    string jsonStr = GetJsonByDataset(ds);
    context.Response.Write(callback+"("+jsonStr+")");
}

特别说明:还是要首先看懂jsonp的实现原理，才能够真正明白上面这一切。

回复

我来回复

  • 暂无回复内容