Ajax---详解

其他 2020-07-28 11:21:23 阅读次数: 0

Ajax---详解

HTTP

  • 是客户端与服务端传输文本的一种协议
  • http协议是无状态的
  • http协议默认端口是：80
  • https协议（加密传输）端口为：443

http请求方式中的8中请求方式

  • GET 获取信息页面----常用
  • POST 上传，修改，添加----常用
  • PUT 修改----常用
  • DELETE 删除
  • HEAD 返回头信息
  • CONNECT http/1.1协议中预留能够将链接改为管道方式的代理服务器
  • OPTIONS 客户端查看服务器性能
  • TRACE 回显服务器收到的请求，主要用于测试或诊断

请求报文

  • 方法
  • URL
  • 协议版本
  • 请求头部
  • 请求数据

响应

  • 协议版本
  • 成功或者失败代码
  • 服务器信息
  • 响应头部
  • 响应数据

http请求/响应的步骤

  • 客户端链接到web服务器–>
  • 发送http请求—>
  • 服务器接收请求并返回http响应—>
  • 释放链接TCP链接—>
  • 客户端浏览器解析HTML内容

客户端链接到web服务器

  • 一个HTTP客户端，通常是浏览器，与Web服务器的HTTP端口(默认为80)建立-个TCP套接字连接。 例伽，htp:/ww baidu.com

发送http请求

  • 通过TCP套接字，客户端向Web服务器发送一个文本的请求报文， 一个情求报文由请求行、请求头部、空行和清求数据4部分组成。

服务器接收请求返回HTTP响应

  • Web服务器解析请求，定位请求资源，服务器将资源复本写到TCP套接字，由客户端读取。-个响应由状态行、响应头部，空行和响应数据4部分组成，

释放链接TCP链接

  • 若connection模式为dlose,则服务器主动关闭TCP连接，客户端被动关闭连接，释放TCP连接;若connection 模式为kepalive,则该连接会保持一段时间，在该时间内可以继续接收请求

客户端浏览器解析HTML内容

  • 客户端对览器首先解析状态行，查看表明请求是否成功的状态代码。然后解析每一个响应头，响应头告知以下为若干字节的HTML文档和文档的字符集。
  • 客户端浏览器读取响应数据HTML，根据HTML的语法对其进行格式化,并在浏览器安口中显示。

http响应状态码

  • 1xx：一般代表协议，刚开始

    • 100：服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。
    • 101：服务器转换协议：服务器将遵从客户的请求转换到另外一种协议
    • 103：用于 PUT 或者 POST 请求恢复失败时的恢复请求建议。

  • 2xx：一般都是ok，成功

    • 200：OK
    • 201：请求被创建完成，同时新的资源被创建。
    • 202：供处理的请求已被接受，但是处理未完成。

  • 3xx：重定向

    • 302：临时重定向：www.mi.com—>www.m.mi.com
    • 304：未修改，文件已经存在不需要再发送
    • 307：与302状态码有相同的语义，且前后两次访问方式必须相同（GET，POST）

  • 4xx：客户端问题

    • 400：因为语法错误，服务器未能理解请求。
    • 401：未授权，权限问题
    • 403：禁止访问
    • 404：找不到请求的页面

  • 5xx：服务器问题

    • 500：服务器内部错误
    • 501：服务器不支持所请求的功能，或者服务器无法完成请求。
    • 503：服务器不可用
    • 504：超时

GET与POST请求区别

  • GET

    • 可以收藏地址
    • 可以缓存
    • 大小只有2048
    • 参数再浏览器地址显示，留历史记录

  • POST

    • 不可以收藏
    • 不缓存
    • 大小无限制
    • 参数不会再地址栏不显示，不留历史记录

HTTP主要特点

无连接

无状态

  • 没有历史记录功能，处理完就断开，客户端与服务端链接

简单快速

  • GET POST header请求

灵活

  • 不同content-type返回上传不同数据类型

支持B/S 与C/S

  • B/S （Browser/Server）（浏览器/服务器）
  • C/S （Client/Server） （用户/服务器

原生的—Ajax

什么是Ajax

  • Asynchronous Javascript And XML (以前交互是使用xml,现在都是json)
  • ajax 异步的xml 和 JavaScript
  • 是一种综合技术，利用XMLHTTPRequest 和后端进行数据交换
  • 通过js 动态的渲染页面,实现页面的而局部渲染加载数据(异步更新)

Ajax的优势

  • 1.无刷新更新数据
    　　Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信

  • 2.异步与服务器通信
    　　使用异步的方式与服务器通信，不打断用户的操作

  • 3.前端与后端负载均衡
    　　将一些后端的工作移到前端，减少服务器与带宽的负担

  • 4.基于规范被广泛支持
    　　不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。

  • 5.界面与应用分离
    　　Ajax使得界面与应用分离，也就是数据与呈现分离

Ajax的缺点

  • 破坏了前进后退
  • 对搜索引擎不好

同步

  • 同步，代码按顺序执行，从上至下执行
  • 上一行代码没有执行完毕，下面的不会执行
  • 会阻塞代码
console.log("abc");
alert("你好");	// 这个没有执行完毕，就是不按确定，就不会执行下一个代码
console.log("def");

异步

  • 异步 ,可以跳过代码的执行顺序
  • JavaScript是单线程的，异步也是假异步，是靠回调完成的异步操作
// setTimeout可以实现异步
console.log("abc");
setTimeout(function() {
	// 因为使用异步 ，所以alert不会阻塞代码
	alert("你好");
},2000);
console.log("def");

Ajax的实现步骤

  1. 建立一个xhr对象
// 建立一个xhr对象
var xhr = new XMLHttpRequest();
  1. 打开http链接的方法，地址，是否异步
    • xhr.open("方法",url地址,是否异步true/false)
// 打开http链接的方法，地址，是否异步
xhr.open("POST","http://www.520mg.com/ajax/echo.php",true);
  1. 如果是POST方式需要设置请求头信息
    • xhr.setRequestHeader("content-type" : "xxxxx")
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  1. 发送http请求数据
    • xhr.send(模式);
xhr.send("name=momo&age=30");
  1. 监听xhr的变化
    • xhr.onreadystatechange = function() {}
xhr.onreadystatechange = function() {
	if(xhr.readyState == 4 && xhr.status == 200) {
		// 服务响应请求信息
		console.log(xhr.responseText);
	}
}

Ajax—GET方法案例

<body>
	<button id="btn">创建Ajax</button>
</body>
<script type="text/javascript">
	btn.onclick = function() {
		// 建立一个xhr对象
		var xhr = new XMLHttpRequest();
		// 打开http链接的方法，地址，是否异步
		xhr.open("GET","./be.txt",true);
		// 发送出去
		xhr.send();
		
		// 监听xhr的变化
		xhr.onreadystatechange = function() {
			// 如果xhr的状态是第四个状态，响应码是200
			if(xhr.readyState == 4 && xhr.status == 200) {
				// 输出Ajax响应的文档内容
				console.log(xhr.responseText,xhr);
			}
		}
	}
</script>

Ajax—POST方法案例

<body>
	<button id="btn">加载</button>
	<p id="pp"></p>
</body>
<script type="text/javascript">
	btn.onclick = function() {
		// 实验异步
		console.log("A");
		// 创建 xhr 实例对象
		var xhr = new XMLHttpRequest();
		// 打开http链接的方法，地址，是否异步
		xhr.open("POST","http://www.520mg.com/ajax/echo.php",true);
		// 设置请求头信息
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// 发送http请求数据
		xhr.send("name=momo&age=30");
		// 监听xhr的变化
		xhr.onreadystatechange = function() {
			if(xhr.readyState == 4 && xhr.status == 200) {
				// 服务响应请求信息
				console.log(xhr.responseText);
				// 插入pp中
				pp.innerHTML = xhr.responseText;
				// cons
				console.log("B");
			}
		}
		// 异步
		console.log("C");
	}
	// 结果
	// A，C，B
</script>

Ajax的方法中的名词解释

  • readyState

    • 0,‘未初始化…’
    • 1,‘请求参数已准备，尚未发送请求…’
    • 2,‘已经发送请求,尚未接收响应’
    • 3,‘正在接受部分响应…’
    • 4,‘响应全部接受完毕’

  • 响应

    • status 响应码 200 成功
    • statusText 响应状态 ok 成功
    • responseText 响应文本形式

文件上传

  1. FormData() 创建表单数据实例
  2. 监听上传进度 xhr.upload.onprogress = function() {}
  3. 监听加载事件 xhr.onload = function() {}
<body>
	<input type="file" id="file" >
	<button id="btn">文件上传</button>
</body>
<script type="text/javascript">
	btn.onclick = function() {
		// 建立xhr对象
		var xhr = new XMLHttpRequest();
		// 打开http链接，方式，地址，是否异步
		xhr.open("POST","https://www.520mg.com/ajax/file.php",true);
		// 获取文件
		var data = file.files[0];
		// 创建formdata实例
		var fdata = new FormData();
		// 将文件添加到fdata 
		fdata.append("file",data);
		// 监听xhr的上传事件
		xhr.upload.onprogress = function(e) {
			// 监听上传文件的进度
			console.log(e.loaded,e.total,Math.round(e.loaded / e.total * 100) + "%");
		}
		// 监听加载事件
		xhr.onload = function() {
			console.log(xhr);
			// 把json字符串转换为JavaScript对象
			var res = JSON.parse(xhr.responseText);
			if(res.error == 0) {
				// 创建一个图片，设置src 与宽
				var img = document.createElement("img");
				img.src = "https://www.520mg.com" + res.pic;
				img.width = 100;
				// 插入页面
				document.body.append(img);
			}
		}
		// 发送
		xhr.send(fdata);
	}
</script>

jQuery中的—Ajax

  • jQuery中的Ajax总共是三层

  • 最底层：$.ajax()

  • 中间层：$.get() , $.post()

  • 最上层：$.getScript() , $.getJSON() , .load()

  • 从上到下，需要的参数越多

所有jQuery-Ajax方法，都支持三种写法

    1. 回调函数写法
$.getJSON(url,function( response,status,xhr) {
	// url : 请求的地址
	// function : 请求成功的回调函数
	// response : 请求响应的数据
	// status : 'success'
	// xhr : jquery的promise对象
})
    1. Promise写法
$.getJSON(url)
.then(res => {})
.catch(xhr => {})
    1. 传统
$.getJSON(url)
.done(res => {})
.fail(err => {})
.always(res => {})

最上层

最上层—load()方法

  • elem.load("数据地址");
  • 加载数据内容到elem元素
<body>
	<div class="box">
		<h1 >来自HTML的问候</h1>
		<div>你好尖括号</div>
	</div>
	<span style="color: red;">我是红色</span>
</body>

$(function() {
	$("button").click(function() {
		// .load("加载的数据地址")； 
		$("#app").load("./beload.html");
		// .load("加载的数据地址 限制显示的部分内容，类名")；
		$("#app").load("./beload.html .box");
		// 只让 beload.html文件中的 box中的内容显示
	})
})

最上层—$.getScript()方法

  • 用来获取js的数据
  • $.getScript()的使用方法
$("button").click(function() {
	// .getScript("加载的js数据地址")；
	// 能够加载js文件
	$.getScript("./test.js");
})

// test.js的内容
alert("nihao");

最上层—$.getJSON()方法

  • 用来获取json数据的
  • 有三种写法
// be.json
{"name" : "momo","age" : 18}

第一种写法—回调函数

$("button").click(function() {
	// .getJSON("加载的json数据地址")；
	// 能够加载js文件
	$.getJSON("./be.json" function(res,status,xhr) {
		console.log(res,status,xhr);
	});
}

第二种写法—Promise写法

// promise 写法
$.getJSON("./be.json")
.then( res => {console.log("请求完成",res)})
.catch( err => {console.log(err)});

第三种写法—传统写法

// done写法
$.getJSON("./be.json")
.done( res => {
	console.log("请求完成",res);
})
// fail写法
.fail( xhr => {
	console.log(xhr,"失败");
})
// always写法
.always( res => {
	console.log(res,"一直");
})

中间层

中间层—$.get()

  • $.get("访问数据的地址").then( res => {成功的回调}).catch( err => {失败的回调})
<body>
	<button id="btn">加载</button>
	<p id="pp"></p>
</body>
<script type="text/javascript">
	$(function() {
		// 点击按钮事件
		$("button").click(function() {
			// 执行 jquery中的Ajax方法中的$.get()方法
			$.get("be.txt")
			// 成功的回调
			.then( res => {
				console.log(res);
				// 将获取的内容加载到p标签中
				$("#pp").text(res);
				// 失败的回调
			}).catch( err => {
				console.log(err);
			})
		})
	})
</script>

中间层—$.post()

  • $.post("访问数据的地址",传递的数据参数,).then( res => {成功的回调}).catch( err => {失败的回调})
<body>
	<button id="btn">加载</button>
	<p id="pp"></p>
</body>
<script type="text/javascript">
	$(function() {
		$("#btn").click(function() {
			$.post(
			// 访问数据的地址
				"http://www.520mg.com/ajax/echo.php",
				// 传递的数据，
				{name : "momo",age : 20}
				// 成功的回调
			).then( res => {
				console.log(res);
				// 失败的回调
			}).catch( err => {
				console.log(err);
				// jQuery中的一直都会执行的回调
			}).always( () => {
				console.log("总是执行");
			})
		})
	})
</script>

最底层

最底层—$.ajax()—GET方法

  • $.ajax({url : "地址",type : "GET",success() {成功的回调},fail() {失败的回调}});

  • success : function() {成功的回调}

  • Promise的写法

  • $.ajax({url : "地址",type : "GET"}).then( res => {成功的回调}).catch( err => {失败的回调});

$.ajax({
	// 获取数据的地址
	url : './be.json',
	// 请求的方式
	type : "GET",
	// 成功的回调
	success : function(res) {
		console.log(res);
	},
	// 失败的回调
	fail : function(res) {
		console.log(res);
	},
	// 请求前的提示
	beforSend : function(org) {
		console.log("Ajax开始",org);
	},
	// Ajax请求成功后的提示
	complete : function(org) {
		console.log("ajax结束",org);
	}
})

最底层—$.ajax()—POST方法

  • $.ajax({url : "地址",type : "POST",success() {成功的回调},fail() {失败的回调}});

  • Promise写法

  • $.ajax({url : "地址",type : "POST",data : {数据}}).then( res => {成功的回调}).catch( err => {失败的回调});

// post
$.ajax({
	url : "http://www.520mg.com/ajax/echo.php",
	type : "POST",
	data : {name : "momo",age : 20},
	// success : function(res) {
	// 	console.log(res);
	// }
	//// 请求前的提示
	beforSend : function(org) {
		console.log("Ajax开始",org);
	},
	// Ajax请求成功后的提示
	complete : function(org) {
		console.log("ajax结束",org);
	}
}).then( res => {
	console.log(res);
}).catch( err => {
	console.log(err);
})

最底层—$.ajax()—jsonp方法

  • jsonp 方法都是GET方法

  • $.ajax({url : "地址",dataType : "jsonp",jsonp : "后端约定的返回数据的回调方法名")

<body>
	<button id="btn">加载</button>
	<p id="pp"></p>
</body>
<script type="text/javascript">
	$(function() {
		$("#btn").click(function() {
			$.ajax({
				// 地址
				url : "https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97%E7%9C%81&city=%E9%83%91%E5%B7%9E%E5%B8%82",
				// 数据类型
				dataType : "jsonp",
				// 后端约定的返回的数据jsonp的
				// 默认为：callback,可以不用写
				jsonp : "callback"
			}).then( res => {
				console.log(res);
			}).catch( err => {
				console.log(err);
			})
		})	
	})		
</script>

jQuery中Ajax中的响应提示

局部Ajax事件—通常用于加载提示

  • beforeSend : function(org) {提示信息} ===> beforeSend(org) {提示信息} Ajax响应之前的事件
  • complete : function(org) {提示信息} ===> complete(org) {提示信息} Ajax响应完成之后的事件
$.ajax({
	url : './be.json',
	type : "GET",
	// 成功的回调
	success : function(res) {
		console.log(res);
	},
	// 失败的回调
	fail : function(res) {
		console.log(res);
	},
	// Ajax请求前的事件
	beforSend : function(org) {
		console.log("Ajax开始",org);
	},
	// Ajax请求后的事件
	complete : function(org) {
		console.log("ajax结束",org);
	}
})

全局Ajax事件—通常用于加载提示

  • $(document).ajaxStart(function(e) {事件逻辑}) Ajax响应之前的事件
  • $(document).ajaxStop(function(e) {事件逻辑}) Ajax响应完成之后的事件
$(document).ajaxStart(function(e) {
	console.log("全局Ajax开始");
})
$(document).ajaxStop(function(e) {
	console.log("全局Ajax结束");
})

fetch

  • fetch 是 javascript 提供新的api
  • 通过http管道方式，访问服务器数据，代替XMLHttpRequest

fetch—GET方法

  • fetch("地址").then( res => res.转换的数据类型()).then( res => {成功回调}).catch( err => {失败回调})
fetch("./be.txt")
// 设置 返回数据的返回数据是 text类型
// 如果只写一个.then的话，显示的是数据流，二进制的
// 返回 文本数据
.then(res => res.text())
.then( res => {
	console.log(res);
})

// 返回json数据
fetch("./be.json")
// 设置 返回数据的返回数据是 json类型
.then( res => res.json())
.then( res => {
	console.log(res);
})

fetch—POST方法

  • fetch(url,{method : "POST",body : "数据",headers : {"content-type" : "xxx"}}).then( res => res.接收的转换数据类型()).then( res => {成功回调}).catch( err => {})
// fetch POST 请求
fetch("https://www.520mg.com/ajax/echo.php", {
	method : "POST",
	body : "name=momo&age=18",
	headers : {
		"content-type" : "application/x-www-form-urlencoded"
	}
})
.then( res => res.text())
.then( res => {
	console.log(res);
})
.catch( err => {
	console.log(err);
})

jQuery优化

  • 缓存dom，就是使用变量存储dom对象，
var $a = $("a");
$a.text("xxxx");

  • 多使用正确的选择器

      1. 原生 # id tag class
      1. 子选择 find,children

  • 使用min.js

  • 使用事件代理

    • $(“ul”).on(“click”,“li”,function(){})
    • 事件target
    • 事件冒泡

猜你喜欢

转载自blog.csdn.net/qq_34182705/article/details/107070000
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022