js来说，它在执行时不能请求不同源的资源。
$.ajax({
type:
"GET"
,
url:
"Services/EFService.svc/Members"
,
data:
"{}"
,
contentType:
"application/json; charset=utf-8"
,
dataType:
"json"
,
success:
function
(data) {
// Play with returned data in JSON format
},
error:
function
(msg) {
alert(msg);
}
});
|
全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播，在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义：
$(
"#loading"
).ajaxStart(
function
(){
$(
this
).show();
});
我们可以在特定的请求将全局事件禁用，只要设置下 global 选项就可以了：
$.ajax({
url:
"test.html"
,
global:
false
,
// 禁用全局Ajax事件. // ... });
下面是jQuery官方给出的完整的Ajax事件列表：
|
•ajaxStart (Global Event)
This event is broadcast
if
an Ajax request is started and no other Ajax requests are currently running.
•beforeSend (Local Event)
This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers,
if
need be.)
•ajaxSend (Global Event)
This global event is also triggered before the request is run.
•success (Local Event)
This event is only called
if
the request was successful (no errors from the server, no errors
with
the data).
•ajaxSuccess (Global Event)
This event is also only called
if
the request was successful.
•error (Local Event)
This event is only called
if
an error occurred
with
the request (you can never have both an error and a success callback
with
a request).
•ajaxError (Global Event)
This global event behaves the same as the local error event.
•complete (Local Event)
This event is called regardless of
if
the request was successful, or not. You will always receive a complete callback, even
for
synchronous requests.
•ajaxComplete (Global Event)
This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
•ajaxStop (Global Event)
This global event is triggered
if
there are no more Ajax requests being processed.
jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。
设置 AJAX 请求默认地址为
"/xmlhttp/"
，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。
jQuery 代码:
$.ajaxSetup({
url:
"/xmlhttp/"
,
global:
false
,
type:
"POST"
});
$.ajax({ data: myData });
如果指定为 html 类型，任何内嵌的 JavaScript 都会在 HTML 作为一个字符串返回之前执行。
类似地，指定 script 类型的话，也会先执行服务器端生成 JavaScript，然后再把脚本作为一个文本数据返回。
JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。
如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用 jsonp 类型。
使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的 URL 后面。
服务器端应当在 JSON 数据前加上回调函数名，以便完成一个有效的 JSONP 请求。
如果要指定回调函数的参数名来取代默认的 callback，可以通过设置 $.ajax() 的 jsonp 参数。
解决跨域的问题：
方法一：通过服务器解决
跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,
方法二：$.ajax() type = get dataType=jsonp
var qsData = {'searchWord':$("#searchWord").attr("value"),
'currentUserId':$("#currentUserId").attr("value"),
'conditionBean.pageSize':$("#pageSize").attr("value")};
$.ajax({
async:false,
url: "http://跨域的dns/document!searchJSONResult.action",
type: "GET",
dataType: 'jsonp',
jsonp: 'jsoncallback',
data: qsData,
timeout: 5000,
beforeSend: function(){
//jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
},
success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
if(json.actionErrors.length!=0){
alert(json.actionErrors);
}
genDynamicContent(qsData,type,json);
},
complete: function(XMLHttpRequest, textStatus){
$.unblockUI({ fadeOut: 10 });
},
error: function(xhr){
//jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
//请求出错处理
alert("请求出错(请检查相关度网络状况.)");
}
});
------------------------------------下面是简单写法--------------------------------------------
var qsData = {'searchWord':$("#searchWord").attr("value"),
'currentUserId':$("#currentUserId").attr("value"),
'conditionBean.pageSize':$("#pageSize").attr("value")};
$.getJSON(
"http://跨域的dns/document!searchJSONResult.action?key1="+value1+"&key2="+value2+"&jsoncallback=?",
function(json){
if(json.属性名==值){
// 执行代码
}
});
//这种方式其实是上例$.ajax({..}) api的一种高级封装,有些$.ajax api底层的参数就被封装而不可见了.
//这样,jquery就会拼装成如下的url get请求
//http://跨域的dns/document!searchJSONResult.action?
//&jsoncallback=jsonp1236827957501
//&searchWord=%E7%94%A8%E4%BE%8B¤tUserId=5351
//¤tUserId=1236828192549
//&conditionBean.pageSize=15
// 在响应端(http://跨域的dns/document!searchJSONResult.action),
// 通过 jsoncallback = request.getParameter("jsoncallback") 得到jquery端随后要回调的js function name:jsonp1236827957501
// 然后 response的内容为一个Script Tags:"jsonp1236827957501("+按请求参数生成的json数组+")";
// jquery就会通过回调方法动态加载调用这个js tag:jsonp1236827957501(json数组);
// 这样就达到了跨域数据交换的目的.
// jsonp的最基本的原理是:动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了.
// 这样其实"jQuery AJAX跨域问题"就成了个伪命题了,jquery $.ajax方法名有误导人之嫌.
// 如果设为dataType: 'jsonp', 这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议.
// JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。
// jsonCallback 函数jsonp1236827957501(....): 是浏览器客户端注册的，获取跨域服务器上的json数据后，回调的函数
服务器端示例代码，以java为例：
服务器端代码，是重点，开始以为，只要客户端通过jsonp就可以直接跨域访问，其实不然，需要服务器端的支持才行。
public void jsonpTest()throws IOException{ |
HttpServletRequest request = ServletActionContext.getRequest(); |
HttpServletResponse response = ServletActionContext.getResponse(); |
//根据html指定的jsonp回调函数的参数名，获取回调函数的名称 |
//callbackName的值其实就是：success_jsonpCallback |
String callbackName = (String)request.getAttribute("jsoncallback"); |
//简单模拟一个json字符串，实际可使用google的gson进行转换，次数通过字符串拼接 |
//{"name":"张三","age":28} |
//\是对"号进行转义 |
String jsonStr = "{\"name\":\"张三\",\"age\":28}"; |
11 | //最终返回的数据为：success_jsonpCallback({"name":"张三","age":28}) |
12 | String renderStr = callbackName+"("+jsonStr+")"; |
13 | response.setContentType("text/plain;charset=UTF-8"); |
14 | response.getWriter().write(renderStr); |
户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据,作为参数，
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.（动态执行回调函数）
可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.
注意,jquey是不支持post方式跨域的.
为什么呢?
虽然采用post +动态生成iframe是可以达到post跨域的目的(有位js牛人就是这样把jquery1.2.5 打patch的),但这样做是一个比较极端的方式,不建议采用.
也可以说get方式的跨域是合法的,post方式从安全角度上,被认为是不合法的, 万不得已还是不要剑走偏锋..
注意：
JSONP是一个非常强大的构建mashp的方法，可是不是一个解决跨域访问问题的万能药。它也有一些缺点：
第一：也是最重要的：JSONP不提供错误处理。如果动态插入的代码正常运行，你可以得到返回，但是如果失败了，那么什么都不会发生。你无法获得一个404的错误，也不能取消这个请求。
第二：如果使用了不信任的服务会造成很大的安全隐患。
扫一扫
824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
