发起网络请求后,如何取出javascript回调函数数里返回的

通过 AJAX 加载一段文本:


    

  

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

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

注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

可选。用于配置 Ajax 请求的键值对集合。

可选。AJAX 请求设置。所有选项都是可选的。

默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。

注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。

请求完成后回调函数 (请求成功或失败之后均调用)。

参数: XMLHttpRequest 对象和一个描述请求类型的字符串。

这是一个 Ajax 事件。

默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。

这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为这个 DOM 元素。


      

预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

  • "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)

默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。

这是一个 Ajax 事件。

仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中,它也会检查服务器指定的 'etag' 来确定数据没有被修改过。

为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。

用于响应 HTTP 访问认证请求的密码

默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

请求成功后的回调函数。

参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。

这是一个 Ajax 事件。

如果你想要用传统的方式来序列化数据,那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。

设置请求超时时间(毫秒)。此设置将覆盖全局设置。

默认值: 当前页地址。发送请求的地址。

用于响应 HTTP 访问认证请求的用户名。

在发送请求之前调用,并且传入一个 XMLHttpRequest 作为参数。

在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话)

在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。

当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。

当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。

$.ajax() 函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML,那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。如果见得到其他类型,比如 HTML,则数据就以文本形式来对待。

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

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

如果指定为 json 类型,则会把获取到的数据作为一个 JavaScript 对象来解析,并且把构建好的对象作为结果返回。为了实现这个目的,它首先尝试使用 JSON.parse()。如果浏览器不支持,则使用一个函数来构建。

JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用 jsonp 类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的 URL 后面。服务器端应当在 JSON 数据前加上回调函数名,以便完成一个有效的 JSONP 请求。如果要指定回调函数的参数名来取代默认的 callback,可以通过设置 $.ajax() 的 jsonp 参数。

注意:JSONP 是 JSON 格式的扩展。它要求一些服务器端的代码来检测并处理查询字符串参数。

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

对象给服务器时,这种处理可能并不合适。并且在这种情况下,我们也应当改变 contentType 选项的值,用其他合适的 MIME 类型来取代默认的 application/x-www-form-urlencoded 。

global 选项用于阻止响应注册的回调函数,比如 .ajaxSend,或者 ajaxError,以及类似的方法。这在有些时候很有用,比如发送的请求非常频繁且简短的时候,就可以在 ajaxSend 里禁用这个。

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

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

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

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

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

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

这次给大家带来原生JS怎么异步请求实现Ajax,原生JS异步请求实现Ajax的

有哪些,下面就是实战案例,一起来看一下。

在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面。

一般来说,使用Jquery中的$.ajax,$.post,$.getJSON,非常方便,但是有的时候,我们只因为需要ajax功能而引入Jquery比较不划算。

所以接下来便用原生JavaScrpit实现一个简单的Ajax请求,并说明ajax请求中的跨域访问问题,以及多个ajax请求的数据同步问题。

简单的ajax请求实现

Ajax请求的原理是创建一个XMLHttpRequest对象,使用这个对象来进行异步发送请求,具体实现参考下面代码:

回调函数需要设置为全局函数:

多个ajax请求数据同步问题

单个ajax返回数据异步处理

多个ajax请求互不相关,它们在被调用以后发送各自请求,请求成功以后调用自己的回调方法,互不影响。 因为ajax请求异步的特性,所有一些依赖于请求完成之后的操作我们都需要放在回调函数内部,否则的话,你在回调函数外面读取到的值是空。看下面的例子:

虽然我们在回调函数里面设置了result的值,但是在最后一行 console.log(result); 输出为空。 因为ajax请求是异步的,程序执行到最后一行的时候,请求并没有完成,值并没有来得及修改。 这儿我们应该把 console.log(result) 相关的处理,放在 success 回调函数中才可以。

多个ajax返回数据问题

如果有多个ajax请求,情况会变得有些复杂。 如果多个ajax请求是按照顺序执行的,其中一个完成之后,才能进行下一个,则可以把后面一个请求放在前一后请求的回调中。 比如有两个ajax请求,其中一个请求的数据依赖于另外一个,则可以在第一个请求的回调里面再进行ajax请求:

// 第一个请求成功回调以后,再请求第二个 // 也可以写成下面的形式

如果不关心不同的ajax请求的顺序,而只是关心所有请求都完成,才能进行下一步。 一种方法是可以在每个请求完成以后都调用同一个回调函数,只有次数减少到0才执行下一步。

// 可以在这儿保存 ret 到全局变量

另一种方法是设置一个定时任务去轮训是否所有ajax请求都完成,需要在每个ajax的成功回调中去设置一个标志。 这儿可以用是否获得值来判断,也可以设置标签来判断,用值来判断时,要注意设置的值和初始相同的情况。

// 循环检查是否所有设置的ajax请求结果的值是否都已被更改,都已被更改说明所有ajax请求都已完成

PS:下面看下ajax异步请求实例代码,具体代码如下所示:

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

以上就是原生JS怎么异步请求实现Ajax的详细内容,更多请关注php中文网其它相关文章!

不能执行回调函数的原因就是请求json时发生错误了,可能出现错误如下:

  1. 请求路径错误,路径Map/Json无效

  2. 服务器执行错误.即Json()函数发生错误

  3. json数据格式不正确

请先直接访问Map/Json,观察是否链接,数据格式是否正确

你可以使用如下代码观察ajax请求错误:

我要回帖

更多关于 javascript回调函数 的文章

 

随机推荐