jquery ajax get请求(ajax $.get) 收藏 0

AJAX教程

关注我，带你了解java

一、AJAX简介

1.什么是AJAX？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。ajax 中使用的技术有JavaScript, html , dom , xml ,css 等。主要是 JavaScript , XML.

JavaScript:：使用脚本对象 XMLHttpRequest 发送请求， 接收响应数据

XML：发送和接收的数据格式，现在使用 json

AJAX 不单需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据是 AJAX 请求的响应结果。

2.原生JS实现AJAX

代码实现：

网页代码：

注释：

1. open(method, url, async) 方法需要三个参数:

　 method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

　url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；

　async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。

2. send() 方法可将请求送往服务器。

3. onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

4. readyState：存有服务器响应的状态信息。

0: 请求未初始化（代理被创建，但尚未调用 open() 方法）

1: 服务器连接已建立（open方法已经被调用）

2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）

3: 请求处理中（下载中，responseText 属性已经包含部分数据）

4: 请求已完成，且响应已就绪（下载操作已完成）

5. responseText：获得字符串形式的响应数据。

6. setRequestHeader()：POST传数据时，用来添加 HTTP 头，然后send(data)，注意data格式；GET发送信息时直接加参数到url上就可以，比如url?a=a1&b=b1。

PS：Fetch polyfill 的基本原理是探测是否存在window.fetch方法，如果没有则用 XHR 实现。

3.JQuery的三种方式实现AJAX：

3.1 $.ajax()

该方法用于执行Ajax请求，常用于其他jQuery Ajax方法不能完成的请求，也许我们可以把它称为\”jQuery中Ajax系列方法之母\”。

1.url：链接地址，字符串表示

2.data：需发送到服务器的数据，GET与POST都可以，格式为{A: ‘…’, B: ‘…’}

3.type：“POST” 或 “GET”，请求类型

4.timeout：请求超时时间，单位为毫秒，数值表示

5.cache：是否缓存请求结果，bool表示

6.contentType：内容类型，默认为\”application/x-www-form-urlencoded\”

7.dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json

8.success：请求成功后，服务器回调的函数

9.error：请求失败后，服务器回调的函数

10.complete：请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用

11.async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行

3.2 $.get()

$.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。

语法：

参数介绍：

发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即即可

发起带参数的请求时，以参数对象的形式添加第二个参数

3.3 $.post()

jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。

语法：

参数介绍：

使用 $post() 向服务器提交数据

星辰大海，永不止步

END

jquery ajax 函数用法详解

在前端开发中经常需要用到ajax请求后端接口，做异步请求，今天就来讲讲ajax函数的具体用法。

jQuery的$.ajax()函数是一种强大的工具，用于通过HTTP请求从服务器加载数据，而无需刷新整个页面。以下是对$.ajax()函数用法的详细解释：

1. 基本用法
2. 语法一：jQuery.ajax(settings)
3. 参数settings是一个对象，包含了所有发送请求所需的额外参数设置[^1^]。
4. 语法二：jQuery.ajax(url, settings)
5. 这是语法一的变体，将参数对象settings中的可选属性url单独提取出来作为一个独立的参数[^1^]。
6. 常用参数
7. url（String类型）：请求的URL地址[^1^]。
8. type（String类型）：请求类型，如“GET”或“POST”，默认为“GET”[^5^]。
9. async（Boolean类型）：是否为异步请求，默认为true。如果设置为false，请求将是同步的[^5^]。
10. beforeSend（Function类型）：在发送请求前可修改XMLHttpRequest对象的函数[^5^]。
11. cache（Boolean类型）：指示是否缓存请求，默认为true。设置为false将强制浏览器不缓存当前请求[^5^]。
12. data（任意类型）：发送到服务器的数据，可以是对象、字符串等[^5^]。
13. dataType（String类型）：预期服务器返回的数据类型，如“json”、“xml”、“html”等[^5^]。
14. success（Function类型）：请求成功时执行的回调函数[^5^]。
15. error（Function类型）：请求失败时执行的回调函数[^5^]。
16. complete（Function/Array类型）：请求完成后执行的回调函数，无论成功或失败都会调用[^1^]。
17. 示例代码

总结来说，jQuery的$.ajax()函数提供了一种灵活且强大的方式来进行Ajax请求。通过合理配置其参数，可以实现各种复杂的数据交互需求。然而，需要注意的是，随着技术的发展和Web标准的变化，现代Web开发中更推荐使用Fetch API或其他更现代的技术来处理异步请求。

关于跨域GET、POST请求的小结

重点：跨域POST大量数据；

JQuery：$.ajax/$.getJSON支持jsonp格式的跨域，但是只支持GET方式，暂不支持POST；

CORS：w3c关于跨域的新方案，res.setHeader(\’Access-Control-Allow-Origin\’,\’*\’)，兼容IE9+；

so，跨域POST是个值得研究的问题啊！万能的JQuery无法跨域POST；鉴于基本国情，CORS也只是适合在移动端玩玩；

相信有同学这样做过：

实际上chrome的控制台显示却是这样的：

那么，如图是否可以证明jQuery确实无法跨域POST呢？说好的POST呢，jQuery自动将其转为GET了；这样其实就和$.getJSON差不多了，只是$.ajax的跨域直接能回调返回值，而$.getJSON的返回值需要一个全局的callback（可自定义）；

话说我的个人小站在移动端还处于最原始的缩放状态，说好的H5 Response Web呢？原谅我再一次跑偏了：原本计划或者直接在原有样式表里media query；而结果却是我新开了个站点，作为移动端的版本，读取PC端存储的数据；一方面减轻代码量，使移动端更轻量简洁，毕竟只是个博客嘛；另一方面，这样的话，移动端将有更宽广的随意挥洒的空间；再者，基于性能优化，这样也不错；当然，问题也很明显了；两个站点要共享数据，连同一个数据库，要做同步操作，呵呵，我一个小前端，这些貌似目前想太多啊！那么怎么办呢，是的，就是上面说到的问题，前端跨域请求数据；

移动端的库用的是由zepto的一些模块自定义组装的一个版本，bootstrap什么的一边凉快凉快吧，样式手写的，权当练手吧。。。在后端，由Nodejs的http-proxy做代理，判断请求的UA，如果是移动端的访问，则无论host是www.famanoder.com还是m.famanoder.com全都分发到移动端的站点处理，这样在手机问www.famanoder.com就不用做跳转了；

OK，那么要开始跨域请求和提交数据了；如果只是请求远程数据，GET方式足矣；可是如果要提交大量数据，比如，某大侠路过小站，一时兴起，引经据典，古今中外，滔滔不绝，长篇大论一通

，这样的话恐怕GET搞不定啊！先看看最简单的GET方式吧：

然后定义好全局的getmore就OK了，后端处理也简单，我这是Nodejs，其他的自行百度吧：

当然像上图里那样也是可以的，后端同样处理；

前面说了，伟大的JQuery暂时不支持POST方式的跨域；那咋办呢？其实没有想象的那么复杂，是时候证明你不能太依赖JQuery了，有时候没有她，你也要好好过；

基本原理大概是这样的：form表单提交，无论你是post，还是get，无论你提交到哪，只要后端有对应程序处理，都妥妥的，不存在跨域一说；以前无刷新上传、提交表单都是将form的target指向一个空iframe，此处同理；类似：a.com提交表单到b.com，表单的target为一个空iframe；b.com处理请求，在response里执行callback，注意，此处callback是属于那个空iframe的；

后端的处理基本一样；如果不出意料，到此，请求会在控制台出现一片红，是的，要你设置domain；除了页面和对应js要设置domain外，一定别忘啦，response里的callback其实是属于当前页面的，所以response里执行的callback也要设置domain；类似这样：

OK，没有了她，你依然要好好过；这样你就可以POST跨域提交大量数据了；同时也弥补了JQuery只能通过jsonp GET跨域了；当然CORS在移动端也是值得推荐的；小伙伴们可以试一下，或者有其他什么好办法，记得和我分享啊！

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com