您的位置：首页 > Web前端 > JavaScript

JS Ajax 请求实例详解（基础入门篇，以.NET MVC 为例）

2017-01-20 16:48 495 查看

本文主要简单介绍一下JS 的ajax请求，以及涉及到的跨域问题，配合简单的实例，让新手直接上手使用。另外，重点介绍一下，.NET MVC HTML 工具类和 Ajax工具类的使用。（使用特别方便）

JS Ajax实例

通常，我们很少去使用JS原生的语法，去写ajax请求，因为Jquery 做了封装，直接使用jquery传几个参数，会特别好用。但是在这两，两种代码，我都写了一下。可以对比参考一下。

代码很简单，宝贝儿们可以直接粘着用。

前端

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax测试</title>
<script src="script/jquery-1.7.1.js"></script>
</head>
<body>
<input id="AjaxBtn" type="button" value="测试Ajax"/>
<div>
<p>返回结果：<span id="resultView"></span></p>
</div>
<script type="text/javascript">
$(function () {
$('#AjaxBtn').click(function () {
$.ajax({
url:"http://****/ask/AJAXTest/AjaxAction.do",//此处换成你的服务端地址
type:"Post",
data:{},
dataType:"jsonp",//jsonp 实现跨域
jsonpCallback:"fun",//服务器返回执行的方法名
success:function (data) {
console.log("success");
$('#resultView').html(data.msg);//将返回信息填入页面
},
error:function (err) {
console.log("error!!!!");
}
});

});
});
</script>
</body>
</html>

如果你想使用 JS 的原生请求，那就用这个。

若是跨域请求，JS ajax 请求是无法完成的，需要依靠标签src属性来完成，下面同样也列出JS 原生跨域请求代码

若不理解可以参考：同源策略与跨域请求

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("get","http://*****/AJAXTest/AjaxRequest.do",true);
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
$('#resultView').html(xmlhttp.responseText);
}
};
//语法很简单，详情可参考：
[Ajax语法](http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp)

JS 原生跨域代码

var url = "http://newask.fang.com/ask/AJAXTest/AjaxAction.do?city=bj&callback=fun";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);

服务端代码：

public string AjaxAction()
{
string callback = string.Empty;
if (string.IsNullOrEmpty(Request.QueryString["callback"]))
{
callback = "callback";
}
else
{
//接收Callback参数，jquery ajax 在不使用JSONP:{funName}的时候，默认是Callback
callback = Request.QueryString["callback"];
}
return callback + "({\"msg\":\"success\"})";
//拼接返回格式，应该序列化JSON数据，此处仅为Demo，就简单的拼接了一下
}

note： 如果你的服务端和你的前端不同一“域”下的话，就不能使用 JS原生异步请求了，会出现跨域问题。也就是我在前端代码中，提到的问题。

无论我们采用哪一种跨域方式（JSONP,CORS,代理层）都要服务端配合才行。比如JSONP方式，就需要服务端返回指定格式的数据（JSONP格式，也就是要返回一个方法名，返回的数据作为参数，响应回来），如果说使用Cors解决方案，就需要在配置文件中，打开跨域请求，大家想了解，可以参考这篇文章。

同源策略与JS跨域请求(图文实例详解)

想了解JSONP 的原理，可以参考这篇文章，佩服该博主，讲的非常清楚。

说说JSON和JSONP，也许你会豁然开朗

Ajax与JSON的一些总结

其实JSONP的实现原理，就是利用了 src 获取跨域的内容，而服务端返回了一段可执行JS方法，要返回的数据，也作为该方法的参数，传了回来，而如果恰好我们本地有这个方法，就执行了该方法，我们也就获取到了方法的参数（也就是我们需要的服务器端数据），也就完成了跨域。

这样其实就像上面博文中博主提到的，这种方式，已经不再是真正的异步请求了。

这个地方，大家可能会有疑问，我在使用Jquery ajax JSONP跨域的时候，没有在本地写方法呀，为什么也成功了呐？

答：这都是jquery 将这些工作给做了，jquery在处理jsonp类型的ajax时，自动帮你生成回调函数并把数据取出来供success属性方法来调用。

.Net MVC的ajax辅助方法和html辅助方法，内容有点多，下一篇文章，我们再详细的介绍一下它们详细的用法。

ajax 辅助方法，可以让我们省掉好几行的JS代码，用起来更加方便。如果说我们再配合 MVC的分部视图，这样我们可以不再拼接字符串，直接返回一个视图，而且使用这样的分部视图，不仅实现了公用模块的通用，而且我们同步与异步可以共用一个视图也将实现。也就是html辅助方法和ajax辅助方法的使用，下一篇文章我们将详细的介绍一下这两个方法。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax jquery Ajax辅助工具 Net mvc

相关文章推荐

新的分享

章节导航