ajax请求函数需要带参数(ajax如何返回2个参数)

seosqwseo5个月前 (08-29)测评日记52

一、Ajax跨域请求如何使用

这次给大家带来Ajax跨域请求如何使用，使用Ajax跨域请求的注意事项有哪些，下面就是实战案例，一起来看一下。

本篇将讲述一个小白从遇到跨域不知道是跨域问题，到知道是跨域问题不知道如何解决，再到解决跨域问题，后找到两种方法解决ajax跨域问题的全过程。

起因是这样的，为了复用，减少重复开发，单独开发了一个用户权限管理系统，共其他系统获取认证与授权信息，暂且称之为A系统；调用A系统以B为例。在B系统中用ajax调用A系统系统的接口(数据格式为json)，当时特别困惑，在A系统中访问相应的url可正常回返json数据，但是在B系统中使用 ajax请求同样的url则一点儿反应都没有，好像什么都没有发生一样。这样反反复复改来改去好久都没能解决，于是求救同事，提醒可能是ajax跨域问题，于是就将这个问题当做跨域问题来解决了。

知道问题的确切原因，剩下的就是找到解决问题的方法了。google了好久，再次在同事的指点下知道jQuery的ajax有jsonp这样的属性可以用来解决跨域的问题。

现在也知道了怎样来解决跨域问题，余下的就是实现的细节了。实现的过程中错误还是避免不了的。由于不了解json和jsonp两种格式的区别，也犯了错误，google了好久才解决。

首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版：

var url='"

error:function(XMLHttpRequest, textStatus, errorThrown){

alert(XMLHttpRequest.readyState);

});这样写是完全没有问题的，起先error的处理函数中仅仅是alert(“error”)，为了进一步弄清楚是什么原因造成了错误，故将处理函数变为上面的实现方式。后一行alert使用为；parsererror。百思不得其解，继续google，终还是在万能的stackoverflow找到了答案，链接在这里。原因是jsonp的格式与json格式有着细微的差别，所以在server端的代码上稍稍有所不同。

比较一下json与jsonp格式的区别：

"result":{"name":"工作组1","id":1,"description":"11"}

})看出来区别了吧，在url中callback传到后台的参数是神马callback就是神马，jsonp比json外面有多了一层，callback()。这样就知道怎么处理它了。于是修改后台代码。

@RequestMapping(value="/getGroupById")

public String getGroupById(@RequestParam("id") Long id,

HttpServletRequest request, HttpServletResponse response)

String callback= request.getParameter("callback");

group= groupService.getGroupById(id);

result= new ReturnObject(group,"获取成功", Constants.RESULT_SUCCESS);

result= new ReturnObject(group,"获取失败", Constants.RESULT_FAILED);

String json= JsonConverter.bean2Json(result);

response.setContentType("text/html");

response.setCharacterEncoding("utf-8");

PrintWriter out= response.getWriter();

out.print(callback+"("+ json+")");

}注意这里需要先将查询结果转换我json格式，然后用参数callback在json外面再套一层，就变成了jsonp。指定数据类型为jsonp的ajax就可以做进一步处理了。

虽然这样解决了跨域问题，还是回顾下造成parsererror的原因。原因在于盲目的把json格式的数据当做jsonp格式的数据让ajax处理，造成了这个错误，此时server端代码是这样的：

@RequestMapping(value="/getGroupById")

public ReturnObject getGroupById(@RequestParam("id") Long id,

HttpServletRequest request, HttpServletResponse response){

String callback= request.getParameter("callback");

group= groupService.getGroupById(id);

result= new ReturnObject(group,"获取成功", Constants.RESULT_SUCCESS);

result= new ReturnObject(group,"获取失败", Constants.RESULT_FAILED);

}至此解决ajax跨域问题的第一种方式就告一段落。

追求永无止境，在google的过程中，无意中发现了一个专门用来解决跨域问题的jQuery插件-jquery-jsonp。

有第一种方式的基础，使用jsonp插件也就比较简单了，server端代码无需任何改动。

来看一下如何使用jquery-jsonp插件解决跨域问题吧。

var url=""

$("#current-group").text("当前工作组:"+data.result.name);

alert("Could not find user"+msg);

});至此两种解决跨域问题的方式就全部介绍完毕。

补充：Ajax跨域问题有三种解决方案：

（1）通过Web代理服务器将不同域的应用统一通过代理服务器进行隔离，所有的应用都在一个域名下面了。（比如apache，nginx等）

（2）跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作。

2.通过<script>标签解决跨域问题

注意：凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>

var flightHandler= function(data){

alert('你查询的航班结果是：票价'+ data.price+'元，'+'余票'+ data.tickets+'张。');

var url="";

var script= document.createElement('script');

script.setAttribute('src', url);

document.getElementsByTagName('head')[0].appendChild(script);

</script>后台data.jsp内容：

<%@ page language="java" pageEncoding="UTF-8"%>

String callback= request.getParameter("callback");

StringBuilder builder= new StringBuilder();

builder.append(callback).append("({").append("\"code\": \"CA1998\",").append("\"price\": 1780,").append("\"tickets\": 5").append("});");

out.println(builder.toString());

%>使用jquery的jsonp来实现跨域访问，例子如下：

url:"",

jsonpCallback:"flightHandler",

alert('您查询到航班信息：票价：'+ json.price+'元，余票：'+ json.tickets+'张。');

</script>相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

HTML5+ajax怎么做出预览图片效果

二、jQuery.ajax()的概述

1、jQuery底层 AJAX实现。简单易用的高层实现见$.get,$.post等。$.ajax()返回其创建的 XMLHttpRequest对象。大多数情况下你无需直接*作该函数，除非你需要*作不常用的选项，以获得更多的灵活性。

2、简单的情况下，$.ajax()可以不带任何参数直接使用。

3、注意，所有的选项都可以通过$.ajaxSetup()函数来全局设置。如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

4、beforeSend在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。error在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）dataFilter在请求成功之后调用。传入返回的数据以及dataType参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。success当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。complete当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待。

5、通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。

6、其中，text和xml类型返回的数据不会经过处理。数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给success回调函数，

7、注意，我们必须确保网页服务器报告的MIME类型与我们选择的dataType所匹配。比如说，XML的话，服务器端就必须声明 text/xml或者 application/xml来获得一致的结果。

8、如果指定为html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。类似的，指定script类型的话，也会先执行服务器端生成JavaScript，然后再把脚本作为一个文本数据返回。

9、如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，他首先尝试使用JSON.parse()。如果浏览器不支持，则使用一个函数来构建。JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=?，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的jsonp参数。

10、注意，JSONP是JSON格式的扩展。他要求一些服务器端的代码来检测并处理查询字符串参数。更多信息可以参阅初的文章。

11、如果指定了script或者jsonp类型，那么当从服务器接收到数据时，实际上是用了<script>标签而不是XMLHttpRequest对象。这种情况下，$.ajax()不再返回一个XMLHttpRequest对象，并且也不会传递**处理函数，比如beforeSend。

12、默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。

13、data选项既可以包含一个查询字符串，比如 key1=value1&key2=value2，也可以是一个映射，比如{key1:'value1', key2:'value2'}。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置processData选项为false来回避。如果我们希望发送一个XML对象给服务器时，这种处理可能并不合适。并且在这种情况下，我们也应当改变contentType选项的值，用其他合适的MIME类型来取代默认的 application/x-www-form-urlencoded。 global选项用于阻止响应注册的回调函数，比如.ajaxSend，或者ajaxError，以及类似的方法。这在有些时候很有用，比如发送的请求非常频繁且简短的时候，就可以在ajaxSend里禁用这个。更多关于这些方法的详细信息，请参阅下面的内容。

14、如果服务器需要HTTP认证，可以使用用户名和密码可以通过username和password选项来设置。

15、Ajax请求是限时的，所以错误警告被捕获并处理后，可以用来提升用户体验。请求超时这个参数通常就保留其默认值，要不就通过jQuery.ajaxSetup来全局设定，很少为特定的请求重新设置timeout选项。

16、默认情况下，请求总会被发出去，但浏览器有可能从他的缓存中调取数据。要禁止使用缓存的结果，可以设置cache参数为false。如果希望判断数据自从上次请求后没有更改过就报告出错的话，可以设置ifModified为true。

17、scriptCharset允许给<script>标签的请求设定一个特定的字符集，用于script或者jsonp类似的数据。当脚本和页面字符集不同时，这特别好用。

18、Ajax的第一个字母是asynchronous的开头字母，这意味着所有的*作都是并行的，完成的顺序没有前后关系。$.ajax()的async参数总是设置成true，这标志着在请求开始后，其他代码依然能够执行。强烈不建议把这个选项设置成false，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死。

19、$.ajax函数返回他创建的XMLHttpRequest对象。通常jQuery只在内部处理并创建这个对象，但用户也可以通过xhr选项来传递一个自己创建的xhr对象。返回的对象通常已经被丢弃了，但依然提供一个底层接口来观察和*控请求。比如说，调用对象上的.abort()可以在请求完成前挂起请求。