ajax jq操作 - 爱码网

日常开发里为了提高开发效率，一般会使用框架中的AJAX语法，例如经常使用的jQuery，也给我们封装好了AJAX的一些语法操作，而且jQuery也封装了JSONP跨域。
几种常用的方式$.ajax， $.post， $.get， $.getJSON

1、$.ajax

$.ajax是JQuery对ajax封装的最基础，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下都可以通过此方法进行异步刷新的操作。但是它的参数较多，有的时候可能会麻烦一些。
看一下常用的参数：
type—数据的提交方式：get和post
url—数据的提交路径
async—是否支持异步刷新，默认是true异步
data—参数值，需要提交的数据
dataType—服务器返回数据类型，例如xml,String,Json,jsonp等
beforeSend—请求前的回调函数、success—请求成功后的回调函数
error—请求失败后的回调函数、complete请求完成的回调函数(不论成功失败)
2、$.post
$.post是对$ .ajax进行了更进一步的封装，减少了参数，简化了操作，但是运用的范围更小了。$.post简化了数据提交方式，只能采用POST方式提交。只能是异步访问服务器，不能同步访问，不能进行错误处理。
在满足这些情况下，可以使用这个函数来方便我们的编程，它的主要几个参数，像method，async等进行了默认设置，不可以改变。

3、$.get

4、$.getJSON

日常开发里，一般使用$.ajax即可实现所有操作，接下来结合案例讲解下

接下来分别介绍下利用$.ajax实现同源和跨域请求

（1）$.ajax()方法实现同源数据请求
ajax jq操作

（1）$.ajax()方法实现同源数据请求

（2）$.ajax()方法实现跨域数据请求
其他设置和之前一样，直接修改js部分即可，如下所示
ajax jq操作

（2）$.ajax()方法实现跨域数据请求注意事项

2、type

类型：String
默认值: “GET”。请求方式POST或GET，默认为 GET。注意：其它 HTTP 请求方法，如 DELETE
也可以使用，但仅部分浏览器支持。
3、async
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意：同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
这里需要注意就是如果后面需要使用方法请求成功的数据，必须要设为同步，否则将会出现意想不到的错误，这个往往在刚开始使用ajax都会犯这个错误需特别留意
4、data
类型：String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。

5、jsonp

要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分

6、dataType

类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME
类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script
则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。
6、dataType可用值:
“xml”: 返回 XML 文档，可用 jQuery 处理。 “html”: 返回纯文本 HTML 信息；包含的 script 标签在插入
dom 时执行。 “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache”
参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）

6、dataType可用值:

“json”: 返回 JSON 数据。 “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如
“callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
“text”: 返回纯文本字符串

7、success

8、error

9、beforeSend

要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。

10、complete

11、jsonp