jQuery 第十章 jqajax

starry__sty

于 2020-10-05 19:54:43 发布

阅读量166

点赞数

分类专栏： jQuery内容文章标签： jquery

本文链接：https://blog.csdn.net/starry__sty/article/details/108931953

版权

jQuery内容专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一：概念：

jQuery 对 Ajax 做了大量的封装，我们使用起来也较为方便，不需要去考虑浏览器兼容性。

对于封装的方式，jQuery 采用了三层封装：最底层的封装方法为：$.ajax()，而通过这

层封装了第二层有三种方法：.load()、$.get()和$.post()，最高层是$.getScript()和$.getJSON()
方法。

二：方法：

.load(‘路径地址’，数据) 唯一的局部方法 
	该方法用于静态页面，局部加载。

$.get(‘路径地址’，数据，函数)
$.get(‘url’，{}，function(){})

<body>
		<button>点击</button>
		<p></p>
	</body>
	<script type="text/javascript">
		$('button').click(function(){
			$.get('js/index.json',function(response,status,xhl){
//				alert(response.shop[0].money)
//				$('p').html(response.shop[0].money)
			})
		})
	</script>

$.post(‘url’，{}，function(){})
1
<body>
		<button>点击</button>
		<p></p>
	</body>
	<script type="text/javascript">
		$('button').click(function(){
//			$.post('js/post.php',{
//				name:'tom',
//			},function(response,status,xhl){
//				$('p').html(response)
//			})
//			$.post('js/post.php','name=tom',function(response,status,xhl){
//				$('p').html(response)
//			})
			
		})
	</script>
</html>

$.getJSON(‘url’,function(){})只用于获取json数据
1
<body>
		<button>点击</button>
		<p></p>
	</body>
	<script type="text/javascript">
		$('button').click(function(){
			$.getJSON('js/index.json',function(response,status,xhl){
				$('p').html(response.shop[0].name)
			})
			
		})
	</script>

$.getScript(‘url’)
1
<body>
		<button>点击</button>
		<p></p>
	</body>
	<script type="text/javascript">
		$('button').click(function(){
			$.getScript('js/1.js')//按需加载js代码
			
		})
	</script>

三：区别

$.post()方法的使用和$.get()基本上一致，他们之间的区别也比较隐晦，基本都是背后的
不同，在用户使用上体现不出。具体区别如下：
1.GET 请求是通过 URL 提交的，而 POST 请求则是 HTTP 消息实体提交的；
2.GET 提交有大小限制（2KB），而 POST 方式不受限制；
3.GET 方式会被缓存下来，可能有安全性问题，而 POST 没有这个问题；
4.GET 方式通过$_GET[]获取，POST 方式通过$_POST[]获取。

四．$.ajax()

$.ajax()是所有 ajax 方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。
这个方法只有一个参数，传递一个各个功能键值对的对象。

<body>
		<button>点击</button>
		<p></p>
	</body>
	<script type="text/javascript">
		$('button').click(function(){
			$.ajax({
				type:'get',
				url:'https://suggest.taobao.com/sug?code=utf-8&q=%E9%9E%8B%E5%AD%90',
				dataType:'jsonp',
				success:function(response,status,xhl){
					alert(response.result[0])
				},
				error:function(xhl){
					console.log('错误信息是'+xhl.status)
				}
				
			})
			
		})
	</script>

$.ajax()方法对象参数表

参数 			类型	 					说明

url 			String 							发送请求的地址

type 			String 					请求方式：POST 或 GET，默认 GET

timeout 		Number 					设置请求超时的时间（毫秒）

data 			Object 或String 		发送到服务器的数据，键值对字符串或对象

dataType 		String 					返回的数据类型，比如 html、xml、json 等

beforeSend 		Function 				发送请求前可修改 XMLHttpRequest 对象的函数

complete 		Function 				请求完成后调用的回调函数

success 		Function 				请求成功后调用的回调函数

error 			Function 				请求失败时调用的回调函数

global 			Boolean 				默认为 true，表示是否触发全局 Ajax

cache 			Boolean 				设置浏览器缓存响应，默认为 true。如果 dataType类型为 script 或 jsonp 则为 false。

content 		DOM 					指定某个元素为与这个请求相关的所有回调函数的上下文。

contentType 	String 					指 定 请 求 内 容 的 类 型 。 默 认 为application/x-www-form-urlencoded。

async 			Boolean 				是否异步处理。默认为 true，false 为同步处理

processData 	Boolean					默认为 true，数据被处理为 URL 编码格式。如果为 false，则阻止将传入的数据处理为 URL 编码的格式。

dataFilter 		Function 				用来筛选响应数据的回调函数。

ifModified 		Boolean					默认为 false，不进行头检测。如果为 true，进行头检测，当相应内容与上次请求改变时，请求被认为是成功的。

jsonp 			String 					指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback。

username 		String 					在 HTTP 认证请求中使用的用户名

password 		String 					在 HTTP 认证请求中使用的密码

scriptCharset 	String 					当远程和本地内容使用不同的字符集时，用来设置 script 和 jsonp 请求所使用的字符集。

xhr 			Function 				用来提供 XHR 实例自定义实现的回调函数

traditional 	Boolean	 				默认为 false，不使用传统风格的参数序列化。如 为 true，则使用。

starry__sty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 第十章 jqajax

一：概念：jQuery 对 Ajax 做了大量的封装，我们使用起来也较为方便，不需要去考虑浏览器兼容性。对于封装的方式，jQuery 采用了三层封装：最底层的封装方法为：$.ajax()，而通过这层封装了第二层有三种方法：.load()、$.get()和$.post()，最高层是$.getScript()和$.getJSON()方法。二：方法：.load(‘路径地址’，数据) 唯一的局部方法该方法用于静态页面，局部加载。$.get(‘路径地址’，数据，函数)$.get(‘u
复制链接

扫一扫

专栏目录