jQuery学习笔记——使用jQuery处理Ajax

最新推荐文章于 2022-04-11 08:27:30 发布

happy吕

最新推荐文章于 2022-04-11 08:27:30 发布

阅读量217

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_46271306/article/details/113256060

版权

一、HTTP协议

HTTP协议（HyperText Transfer Protocol)：超文本传输协议，协议就是一种约定，一种规范，规定了浏览器和服务器之间互相通信的一种规则，所有的WWW文件都必须遵守这个规则，约定就是请求（浏览器向服务器通信）和响应（服务器根据请求进行处理，返回给浏览器的结果）

请求报文：包括请求行、请求头、空行、请求体

请求行：post/get/put(请求方式) 、ie=utf-8(请求地址)、HTTP/1.1(HTTP的版本号)

请求头：Host:www.baidu.com(主机地址)、 cookie 、Content-Type(请求的格式）...

请求体：只是针对pos（get直接通过地址栏进行传输），例如：username=zhangsan&&pwe=1223

响应报文：包括响应行、响应头、空行、响应体

响应行：HTTP/1.1(版本号)  200(状态码) ok

响应头：Content-Type(响应的格式)：text/html；charset=uft-8(编码方式)  Content-length:2048(响应文件的大小)

响应体(纯文本、html、json)：
     <html>
		<head></head>
		<body>
			<p>哈哈</p>
		</body>
	 </html>
	 
状态码：404找不到服务器资源
	   403:被禁止
	   401：没权限
	   500：服务错误 
	   200：响应成功

HTTP协议GET和POST区别

1.缓存

get:能被缓存
post:不能缓存

2.编码类型

get:application/x-www-form-urlencoded
post:application/x-www-form-urlencoded或multipart/form-data，二进制数据使用多重编码

3.历史

get:参数保留在浏览器历史中
post：参数不会保存在浏览器历史中

4.数据大小

get方式有数据大小要求，不超过2kb
post方式无数据大小的要求

5.对数据类型的限制

get:只允许ASCII字符
post:没有限制，也允许二进制数据

6.安全性

get方式：安全性低，对于敏感数据，不建议使用get方式
post方式：安全性较高

7.可见性

get:数据在URL中对所有人都是可见的
post:数据不会显示在URL中

二、Ajax

1.简介

Asynchronous JavaScript and XML （异步的 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

用js通过http协议向服务器发送xml数据，目前json数据比较流行

Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

Web的传统模型。客户端向服务器发送一个请求，服务器返回整个页面，如此反复
在Ajax模型中，数据在客户端与服务器之间独立传输。服务器不再返回整个页面

不用刷新整个页面便可与服务器通讯的办法：

Flash

Java applet

框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面

隐藏的iframe

XMLHttpRequest：该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词
Ajax优缺点

优点：

Ajax使用Javascript技术向服务器发送异步请求

Ajax无须刷新整个页面

因为服务器响应内容不再是整个页面，而是页面中的局部，所以Ajax性能高

缺点:

AJAX并不适合所有场景，很多时候还是要使用同步交互

AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大

因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题(IE5,IE6)

创建XMLHttpRequest对象

Internet Explorer把XMLHttpRequest实现为一个ActiveX对象

其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象

XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。

原生创建Ajax的代码

<script>
			window.onload = function(){
				var btn1 = document.getElementById("btn1");
				btn1.onclick=function(){
				// 1.创建XMLHttpRequest对象
				// 考虑ie浏览器的兼容性问题
				if(window.XMLHttpRequest){
					// ie7以上，火狐，谷歌，苹果，欧朋
					var oAjax = new XMLHttpRequest();
				}else{
					// ie6,ie5
					var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
				}
				// 2.对发送请求进行初始化，调用open方法
				// open("请求方式","请求地址"，"同步(false)异步(true)")
				oAjax.open("GET","服务器地址",true);
				// 3.发送请求
				oAjax.send();
				// 4.为XMLHttpRequest添加OnReadystatechange事件
				// 当服务器信息返回过来的时候调用,每个请求状态码都会触发这个事件
				oAjax.onreadystatechange=function(){
					// onreadystatechange与服务器发生交互时触发这个事件
					// 可以根据状态码确定服务器有没有发送过来内容
					/**
					 * readystate：表示Ajax请求的当前状态，告诉我们浏览器和服务器进行到哪一步了
					 * 0：初始化
					 * 1：服务器已经建立连接
					 * 2.请求已被接受（执行完send方法了）
					 * 3：请求处理中
					 * 4：请求完成，响应就绪了
					 */
					// 5.判断有没有发送完成
					if(oAjax.readyState == 4){
						// 6.判断是否响应完成
					/**
					 * state：状态码
					 * 404 没找到页面(not found)
					 * 403 禁止访问(forbidden)
					 * 500 内部服务器出错(internal service error)
					 * 200 一切正常(ok)
					 * 304 没有被修改(not modified)
					 */
						
						if(oAjax.status == 200){
							// 7.打印响应内容
							// responseText 属性包含了从服务器发送的数据,当 readyState 属性值变成 4 时, responseText 属性才可用
							alert("请求响应成功："+oAjax.responseText);
						}else{
							alert("请求失败："+oAjax.status);
						}
					}
				}
				}
			}
		</script>
	<body>
		<button id="btn1">提取内容</button>
	</body>

三、使用jQuery处理Ajax

1.$.ajax() 方法

格式 :$.ajax({})

参数(以键值对的方式存在)： type:请求方式get/post
						 url:请求地址
						 data:请求是发送给服务器的数据
						 dataType:预期服务器返回的数据类型
						 async:是否是异步，如果是false就是同步，true是同步，默认为异步
						 contentType:设置请求头
						 success:请求成功后调用此函数
						 error:请求失败后调用此函数

实例（访问静态数据）：

<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.12.4.js" ></script>
		<script>
			/**
			 * jQuery调用ajax方法 常用方法
			 * 格式 :$.ajax({})
			 * 参数(以键值对的方式存在)：
			 * 	type:请求方式get/post
			 *  url:请求地址
			 *  data:请求是发送给服务器的数据
			 *  dataType:预期服务器返回的数据类型
			 *  async:是否是异步，如果是false就是同步，true是同步，默认为异步
			 *  contentType:设置请求头
			 *  success:请求成功后调用此函数
			 *  error:请求失败后调用此函数
			 */
			$(function(){
				$("#btn1").click(function(){
				  $.ajax({
						type:"get",
						url:"data.txt",
						data:{
						    // 请求的数据，json对象
							// 如果没有请求参数，不需要添加
							username:"zhangsan"
						},
						// 预期返回的数据类型，在接受服务器返回值的时候会自动封装成json类型的，前提是返回的格式必须是json类型的
						dataType:"json",
						// 请求成功以后调用回调函数
						// 此处data是一个形参，代表的是服务响应过来的数据
						success:function(data){
							//console.log(data);							
							var $ul = $("<ul></ul>");
							// 遍历返回的数据数组
							for (var i = 0; i < data.length; i++) {
								// 得到数组中的每一个元素
								var user = data[i];
								// 创建li,把每个元素的Username添加到li里面
								var li = "<li>"+user.userName+"</li>";
								// 把li添加到ul中
								$ul.append(li);						
							}
							// 将Ul添加到body里
								$("body").append($ul);
						}
					})
				})
			})
		</script>
	</head>
	<body>
		<button id="btn1">
			获取值
		</button>
	</body>

2.$.get() 方法

格式：
$.get(URL,callback);
URL必需参数，路径     callback可选参数，请求成功后所执行的函数名

实例（访问静态数据）：

<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script>
			$(function(){
				/**
				 * $.get("请求地址","请求参数列表","回调函数","预计服务器返回的数据格式")
				 */
				$("#btn1").click(function(){
					$.get("js/data.txt",{},function(data){
						var $ul = $("<ul></ul>");
							// 遍历返回的数据数组
							for (var i = 0; i < data.length; i++) {
								// 得到数组中的每一个元素
								var user = data[i];
								// 创建li,把每个元素的Username添加到li里面
								var li = "<li>"+user.userName+"</li>";
								// 把li添加到ul中
								$ul.append(li);
							
							}
								// 将Ul添加到body里
								$("body").append($ul);
					},"json")
				})
			})
		</script>
	</head>
	<body>
		<button id="btn1">get</button>
	</body>

3.$.post() 方法

语法格式
$.post(URL,data,callback);
data可选参数，连同请求发送的数据

happy吕

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记——使用jQuery处理Ajax

一、HTTP协议HTTP协议（HyperText Transfer Protocol)：超文本传输协议，协议就是一种约定，一种规范，规定了浏览器和服务器之间互相通信的一种规则，所有的WWW文件都必须遵守这个规则，约定就是请求（浏览器向服务器通信）和响应（服务器根据请求进行处理，返回给浏览器的结果）请求报文：包括请求行、请求头、空行、请求体请求行：post/get/put(请求方式) 、ie=utf-8(请求地址)、HTTP/1.1(HTTP的版本号)请求头：Host:www.baidu.com(主
复制链接

扫一扫