Ajax和Ajax Jquery_jquery .ajax equest-程序员宅基地

Ajax

定义：异步的javascript和XML，是一种综合技术，运用XMLHttpRequest(xhr)和服务器交换数据，通过javascript局部渲染页面，从而实现页面异步的局部更新

同步与异步：简单来说同步代码按顺序执行，会阻塞代码执行(alert)。异步不会阻塞代码。

一、XMLHttpRequest（XHR）

1、创建xml 对象

var xhr = new XMLHTTPRequest()

2、打开HTTP连接

xhr.open(method,url,布尔值)
打开的方法 地址 是否异步

3、监听xhr 的变化

xhr.onreadystatechange = function(){
    
   if(xhr.readystate===4&&xhr.status==200){
    
      // xhr.responseText
   }
}

4、设置头信息：

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

5、发送数据：

xhr.send()
//发送数据

6、xhr.readystate中的数值

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

7、响应内容

response 响应内容
responseText: 响应文本内容
responseXML：响应xml内容

8、status 响应码 200代表成功
9、statusText 响应的文本 Ok代表成功

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>ajax-GET</h1>
		<button id="btn">加载</button>
		<p id="pp"></p>
		<script type="text/javascript">
			/*  Ajax Asnchronous Javscript And XML 异步的xml和javascript 是一种综合技术
			利用XMLHTTpequest 和后端进行数据交换
			通过js
			*/
		   btn.onclick=function(){
    
		   var xhr =new XMLHttpRequest();
		   xhr.open("GET","./be.txt",true)
		   //打开的方法 地址 是否异步
		   xhr.send();
		   //发送出去
		   xhr.onreadystatechange =function(){
    
			   if(xhr.readyState===4&&xhr.status==200){
    
				   /*如果xhr的状态是第四4个状态 响应码为200*/
				   console.log(xhr.responseText,xhr);
				   pp.innerHTML=xhr.responseText
				   //输出ajax返回的文本内容
			   }
		   }
		 }
		</script>
	</body>
</html>

be.txt文件中是需要输出的文字：

二、ajax的文件上传

步骤：
1、创建xml 对象
var xhr = new XMLHTTPRequest()
2、打开HTTP连接
xhr.open(method,url,aync=true)
3、获取formData

var data =  file.files[0];
// 获取文件
var fdata = new FormData();
fdata.append("file",data);

4、监听上传进度

xhr.upload.onprogress =funciton(e){
    }
e.loaded是已上传，e.total总文件大小

5、 xhr.onload()
监听加载事件

xhr.responseText()

6、发送

xhr.send(fdata)

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>ajax-文件上传</h1>
		<input type="file"  id="file">
		<button id="btn">文件上传</button>
		
		<script>
			btn.onclick =function(){
    
				var xhr =new XMLHttpRequest();
				// 建立xhr对象
				xhr.open("POST","https://www.520mg.com/ajax/file.php",true)
				// 打开http连接
				var data = file.files[0]
				// 获取文件
				var fdata =new FormData();
				fdata.append("file",data)
				// 获取formData 要传递的表单文件
				// 监听xhr的加载事件

				xhr.upload.onprogress =function(e){
    
					// console.log(e);
				     // 监听上传文件的进度
				    console.log(e.loaded,e.total,Math.round(e.loaded/e.total*100)+"%")
					// e。loaded是已上传，e.total总文件大小
			}
				xhr.onload = function(){
    
					console.log(xhr);
					var res = JSON.parse(xhr.responseText);
					// 把json字符串转换为javascript对象
					if(res.error==0){
    
						var img = document.createElement("img");
						img.src ="https://www.520mg.com"+res.pic;
						img.width=100;
						// 创建一个图片 设置 src 与宽
						document.body.append(img);
						// 插入到页面中
						
					}
				}
				xhr.send(fdata);
				//发送
			}
		</script>
	</body>
</html>

三、ajax优缺点

优点：

不刷新更新页面，提升用户体验
异步的提升页面的加载速度.
减轻服务器压力，实现浏览器端渲染
缺点
对搜索引擎不友好

四、ajax jquery

jquery中ajax总共是三层

最底层$.ajax()
中间层$.get() $.post()
最上层$.getScript() $.getJSON() load()

load()方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-3.3.1.js">
			
		</script>
	</head>
	<body>
		<button>加载</button>
		<div id="app"></div>
		<script>
		 $(function(){
    
			   $("button").click(function(){
    
				   $("#app").load("beload.html .red")
				   //可以过滤.red
			   })
		   })
		</script>
	</body>
</html>

其中beload.html文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="lod">
			<h1>html</h1>
		</div>
		<div class="red">
			<p style="color: red;">红色</p>
		</div>
	</body>
</html>

$.getScript()方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-3.3.1.js">
			
		</script>
	</head>
	<body>
		<button>加载</button>
		<div id="app"></div>
		<script>
		$(function(){
    
			 $("button").click(function(){
    
				$.getScript("./test.js")
					})	
			})
		</script>
	</body>
</html>
//test.js
//输出 alert()

$.getJSON()方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-3.3.1.js">
			
		</script>
	</head>
	<body>
		<button>加载</button>
		<div id="app"></div>
		<script>
		$("button").click(function(){
    
			        /*  方法一 					        $.getJSON("./be.json",function(res,status,xhr){
				  console.log(res,status,xhr);
		})
	*/
		/*  方法二 	
					$.getJSON("./be.json")
					.then(res=>console.log(res))
				 	.catch(err=>console.log(err))
		*/
		// 方法三 	
					$.getJSON("./be2.json")
					.done(res=>{
    
						console.log("请求完成",res)
					})
					.fail(xhr=>console.log("失败",xhr))
					.always(res=>{
    
						console.log("无论成功失败都执行",res)
					})
				 })
			})
		</script>
	</body>
</html>

所有的jqueryajax方法，都支持三种写法

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

本文链接：https://blog.csdn.net/missrl/article/details/107070618

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Centos 7.3搭建LNMP环境_centos7 下使用yum搭建lnmp环境-程序员宅基地

文章浏览阅读3.3w次，点赞6次，收藏43次。需求：在Centos7.3下搭建LNMP环境1. 关闭防火墙和selinux打开文件selinuxvim /etc/sysconfig/selinux将文件中SELINUX=enforcing改为disabled，然后执行”setenforce 0″不用重启地关闭selinux。SELINUX=disabled关闭放火墙systemctl st..._centos7 下使用yum搭建lnmp环境

【Tools】安装controlSUITE并添加入CCS-程序员宅基地

文章浏览阅读1.8w次，点赞25次，收藏143次。一、controlSUITE的简介在学习TI C2000系列DSP之前，需要首先安装好开发环境CCS与对应软件套件controlSUITE。 controlSUITE是德州仪器公司为C2000系列微处理器设计的一款集软件、硬件与技术资料一体的复合套件。套件中提供了C2000全套器件的示例程序，这对学习该系列器件非常有用。示例程序展示了绝大多数外设的常用使用方法和技巧..._controlsuite

刷脸支付提高技术服务水平以及用户黏性_刷脸技术提高-程序员宅基地

文章浏览阅读1k次。刷脸支付无需手机、等物理介质，通过刷脸+支付口令即可完成交易，增强服务获得感和便捷度，是该产品的显著特点。综合运用支付标记化、多方安全计算、活体检测、风控模型等构建风险防控体系，避免支付敏感信息直接参与交易流程，保障用户信息和资金安全，是该产品提供的安全服务保障。被支付宝、微信量大巨头推上风口浪尖的黑科技刷脸支付，不但具备超高的投资潜力，同时也给用户带来了便捷的支付体验，给商家带来了诸多好处，包括提升收银效率、降低人力成本、引流圈客等。随着刷脸支付使用人数的增长，很多商户都开始尝试使用刷脸支付设备，那么，_刷脸技术提高

NDK 开发实战 - 实时人脸检测和识别_android ndk+rknn实现ai识别-程序员宅基地

文章浏览阅读559次。关于人脸检测和识别，应用的范围是非常广的，其实之前的《NDK开发前奏 - 实现支付宝人脸识别功能》也有提到，只是那时并未具体的去分析算法和实现原理，这里笔者打算一步一步来分析和实现人脸识别，首先我们得要明确人脸检测和人脸识别是两个不同的概念，人脸检测是检测有人脸，人脸识别是匹配你是你，他们所采用的算法也是不一样的，这篇文章是基于人脸检测来实现人脸识别。我们先来看下已经实现了的人脸检测效果：人..._android ndk+rknn实现ai识别

智慧校园能耗监管平台，助力绿色低碳智慧校园建设！_智慧校园建设对低碳校园建设的助力-程序员宅基地

文章浏览阅读296次，点赞3次，收藏5次。校园能耗监管平台是校园综合能耗的管理者，可实现对校内固定办公场所、教学建筑、社区建筑、各类实验室、其它固定建筑、临时施工场所等不同的建筑类型进行空间能耗管理。也可根据能源类型实现对校园内所有耗能场所消耗的能源进行分类数据采集、数据统计、数据汇总乃至数据分析，如用电消耗、用水消耗、用气（燃气）消耗。根据系统采集到的数据类型不同，还可以进一步进行分类统计，如全校空调耗电情况、照明耗电情况、供水泵耗电情况、中水使用情况、自来水使用情况等。_智慧校园建设对低碳校园建设的助力

Error evaluating expression ‘ew.sqlSegment != null and ew.sqlSegment != ‘‘ and ew.nonEmptyOfWhere‘._builderexception: error evaluating expression 'ew.-程序员宅基地

文章浏览阅读518次。这里是mybatis plus的版本问题，我这里是将其版本从3.4.3换成3.4.2就解决了。_builderexception: error evaluating expression 'ew.sqlsegment != null and ew.

随便推点

MySQL DECIMAL 数据类型：精确存储小数与整数-程序员宅基地

文章浏览阅读1.1k次，点赞18次，收藏9次。MySQL 中的数据类型 DECIMAL 被设计用于存储精确的小数值或整数值。相比于其他浮点类型，DECIMAL 提供了更高的精确度和可靠性，特别适用于需要精确计算和存储的场景，如财务数据或科学计算。本文将深入探讨 DECIMAL 类型的语法结构、特性、使用方法以及最佳实践，以帮助您充分了解如何在 MySQL 数据库中充分利用 DECIMAL 类型。_mysql decimal

vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案_vue通过v-html指令渲染的富文-程序员宅基地

文章浏览阅读215次。vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案_vue通过v-html指令渲染的富文

Redis 阿里云服务器遭遇攻击-程序员宅基地

文章浏览阅读1.7k次。博文目录文章目录攻击提醒查看异常638063796381补救操作系统操作Redis添加密码认证残留问题攻击提醒通过描述来看, 我的服务器被挂马, 一直在尝试攻击别人服务器的6379端口, 阿里云一定时限内禁止我访问其他服务器的6379端口我估计是因为我的Redis使用了默认的6379端口, 且没有设置密码, 且开放了一堆端口到公网, 且使用的是root账户, 被人扫到了, 然后通过漏洞做了不好的事情, 我是Linux小白, 只能百度看看有什么查漏补缺的措施了查看异常执行top发现有两个进程占