ajax跨域请求数据

简介: 最近开始接触ajax的跨域请求问题,相比网上说的一大堆,我这里就说得比较浅显了。 关于为什么要跨域这个问题,实际的需求是当网站项目部署在一个域名上的时候,分域可以很好地解决网站卡顿问题(拥有多台服务器就另当别论)。

最近开始接触ajax的跨域请求问题,相比网上说的一大堆,我这里就说得比较浅显了。

关于为什么要跨域这个问题,实际的需求是当网站项目部署在一个域名上的时候,分域可以很好地解决网站卡顿问题(拥有多台服务器就另当别论)。

这种做法现在很常见,多看几个网站细心点就可以看出点门道。

下面对比一下跨域之前的ajax请求与跨域之后的请求:

之前:

 $.post(wwwUrl + "/Home/DeleteById", { Id: id }, function (data) {
                alert(data);
                window.location.reload();
            });

这里调用的是post方式(一般比较方便快捷,但是对ajax不熟练的话不推荐一开始就这样说使用),也可以用get。

要说的是,跨域请求并不支持post方式!也不是说完全不支持,使用post请求在做跨域的时候对编码类型有限制,只允许content-type为

application/x-www-form-urlencoded、multipart/form-data 或者 text/plain中一个。

........

之后:

 $.ajax({
                type: "GET",
                async: false,
                url: wwwUrl + "/Home/Index",
                data: { Id: id },
                dataType: "jsonp",
                jsonp: "callback", //传递给请求处理程序或页面的,标识jsonp回调函数名(一般为:callback).
                jsonpCallback: function (){}, //callback的function名称.
                success: function (data) {
                    alert(data);
                    window.location.reload();
                }
            });

这里可以对比一下两种方式的区别。

jsonpCallback属性后面接的是一个匿名函数,事实上这里应该是调用从另一个“域”返回的函数名,函数在本域的js里面,返回回来直接调用就行,记得带参!

服务端的代码就不展示了,里面就是传个callback参数验证是否为空,肯定条件return一个JSON对面,包含操作数据返回时的状态Message,success里面调用的时候就是data.Message。

百度文库有相关的详细说明,在此就不赘述。
目录
相关文章
|
4月前
|
XML 前端开发 JavaScript
|
3月前
|
JSON 前端开发 JavaScript
Python中如何判断是否为AJAX请求
AJAX请求是Web开发中常见的异步数据交互方式,允许不重新加载页面即与服务器通信。在Python的Django和Flask框架中,判断AJAX请求可通过检查请求头中的`X-Requested-With`字段实现。Django提供`request.is_ajax()`方法,Flask则需手动检查该头部。本文详解这两种框架的实现方法,并附带代码示例,涵盖安全性、兼容性、调试及前端配合等内容,帮助开发者提升Web应用性能与用户体验。
61 0
|
4月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
93 3
|
5月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
88 22
|
5月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
63 18
|
5月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
134 4
|
5月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
206 1
|
6月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
82 10
|
6月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
49 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
6月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。