ajax

最新推荐文章于 2022-06-19 13:50:53 发布
最新推荐文章于 2022-06-19 13:50:53 发布
阅读量232 收藏
点赞数 1
分类专栏： Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ciel_Y/article/details/104433212
版权

基本场景和步骤：不需要整个界面的跳转，界面的局部刷新。如下图更新红框内容。

 同步请求和异步请求

同步就是一件事情不做完不能开始下一个，异步就是做一个事情的时候也可以做其它事情

同步请求有两个问题

1.界面会卡顿，卡顿多长时间，取决于网络速度

2.xhr.onreadystatechange的回调将不会被执行，需要修改代码后才能获取到数据。将回调去除即可

我们用异步来设计网页。

单线程，多线程

10个屋子，一个人打扫需要100分钟，十个人打扫需要10分钟，这就是多线程。

js代码是单线程的

封装Ajax

对象都是key和value的形式存在的。

//解决
//1.参数的顺序不可改变
//2.参数没有默认值，每次都得传递
//解决方法，传递对象，而不是一个个的值
obj={
	url:"xxx",
	type:"get",
	dataType:"json"
	data:{
		uname:"zhangsan",
		age:"18"
	},
	success:function(){}
}; 

function myAjax2(obj){
	var defaults={
		type:"get",
		url:"#",
		dataType:"json",
		data:{},
		async:true,
		success:function(result){console.log(result);}
	};

	//obj中的属性，覆盖到defaults中的属性
	//1.如果有一些属性只存在obj中，会给defaults中增加属性
	//2.如果有一些属性在obj和defaults中都存在，会将defaults中的默认值覆盖
	//3.如果有一些属性只在defaults中存在，在obj中不存在，这时候defaults中将保留预定义的。
	for(var key in obj){
		defaults[key]=obj[key];
	}
	//1.ajax第一步
	var xhr=null;
		//判断，是为了舍弃IE6的情况
	if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest();
	}else{
		xhr=new ActiveXObject("Microsoft.XMLHTTP");
	}
//2.ajax第二步
var params="";
for(var attr in defaults.data){
	params+=attr+"="+defaults.data[attr]+"&";
}
if(params){
	params=params.substring(0,params.length-1);
}
if(defaults.type=="get"){
	defaults.url+="?"+params;
}
xhr.open(defaults.type,defaults.url,defaults.async);
if(defaults.type=="get"){
	xhr.send(null);
}else if(defaults.type=="post"){
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xhr.send(params);
}

//3.
if(defaults.async){
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				var result=null;
				if(defaults.dataType=="json"){
					result=xhr.responseText;
					result=JSON.parse(result);
				}else if(defaults.dataType=="xml"){
					result=xhr.responseXML;
				}else{
					result=xhr.responseText;
				}
				defaults.success(result);
			}
		}
	};
}else{
	if(xhr.readyState==4){
		if(xhr.status==200){
			var result=null;
if(defaults.dataType=="json"){
result=xhr.responseText;
result=JSON.parse(result);
}else if(defaults.dataType=="xml"){
	result=xhr.responseXML;
}else{
	result=xhr.responseText;
}
defaults.success(result);
}
}
}
}

调用封装好的ajax：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册界面</title>
	 //调用封装的ajax方法 
	<script type="text/javascript" src="myutils.js"></script>
	<script type="text/javascript">
 
			//1.创建对象
			var xhr=null;
			//兼容性判断
			if(window.XMLHttpRequest){
				xhr=new XMLHttpRequest();
			}else{
				//考虑IE6
				xhr=new ActiveXObject("Microsoft.XMLHTTP");
			}	
			if(type=="get"){
				if(params&&params!=""){
					url+="?"+params; 
				}
			}	
			//2.准备发送
			xhr.open(type,url,async);//true是异步，false是同步
			//3.执行发送get 是null；post是xhr.setRequestHeader();xhr.send(params);
			if(type=="get"){
				xhr.send(null);
			}else if(type=="post"){ 
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xhr.send(params);
			} 

			//异步的情况下
			if(async){
			//4.执行回调
			xhr.onreadystatechange=function(){
				//获取想要的数据
				if(xhr.readyState==4){
					if(xhr.status==200){
						var result=null;
						if(dataType=="json"){
							result=xhr.responseText;
							//将JSON变成对象
							result=JSON.parse(result);
						}else if(dataType=="xml"){
							result=xhr.responseXML;
						}else{
							result=xhr.responseText;
						}
						//将结果传递给调用者   
						if(callback){		//当callback存在的情况下				
							callback(result);
						}
					} 
				}
			};
		}else{
			//同步可以直接获取想要的数据
			if(xhr.readyState==4){
				if(xhr.status==200){
					var result=null;
					if(dataType=="json"){
						result=xhr.responseText;
						//将JSON变成对象
						result=JSON.parse(result);
					}else if(dataType=="xml"){
						result=xhr.responseXML;
					}else{
						result=xhr.responseText;
					}
					//将结果传递给调用者   
					if(callback){		//当callback存在的情况下				
						callback(result);
					}
				} 
			}
		}
		};
		window.onload=function(){
			var username=document.querySelector("#username");
			var email=document.querySelector("#email");
			var phone=document.querySelector("#phone");

			username.onblur=function(){
				var usernameValue=username.value;
				var type="get";
				var url="./server/checkUsername.php";
				var params="uname="+usernameValue;
				var dataType="text";
				
				myAjax2({
					url:url,
					data:{uname:usernameValue},
					dataType:"text",
					success:function(result){
						var username_result=document.querySelector("#username_result");
						if(result=="ok"){
							username_result.innerText="用户名可以使用";
						}else{
							username_result.innerText="用户名已经被注册";
						}
					}
				}); 
		};  
			email.onblur=function(){
				var emailValue=email.value;

				var type="post";
				var url="./server/checkEmail.php";
				var params="e="+emailValue;
				var dataType="text";
				
				myAjax2({
					url:url,
					type:"post",
					dataType:'text',
					data:{
						e:emailValue
					},
					success:function(result){
						var email_result=document.querySelector("#email_result");
						if(result==0){
							email_result.innerText= "邮箱可以使用";
						}else{
							email_result.innerText="邮箱不可使用";
						}
					}
				});
			};	 
			phone.onblur=function(){

				var phoneValue=phone.value;

				var type="post";
				var url="./server/checkPhone.php";
				var params="phonenumber="+phoneValue;
				var dataType="json";
				
				myAjax2({
					url:url,
					type:"post",
					data:{
					phonenumber:phoneValue
					},
					success:function(result){
						var phone_result=document.querySelector("#phone_result");
						if(result.status==0){
							//代表手机号码可用
							phone_result.innerText=result.message.tips+","+result.message.phonefrom;
						}else if(result.status==1){
							//代表手机号码不可用
							phone_result.innerText=result.message;
							}
				}
				});
		};
	};
	</script>
</head>
<body>
	<h1>注册界面</h1>
	<form action="">
		用户名：<input type="text" name="username" id="username">
		<span id="username_result"></span>
		<br> 
		邮箱：<input type="text" id="email"><span id="email_result"></span><br>
		手机号码：<input type="text" id="phone"><span id="phone_result"></span><br>
	</form>
</body>
</html>
李子怡
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Ajax详解
07-22
资源名称：Ajax详解内容简介：《Ajax 详解》电子书 chm格式，是《四天学会Ajax》一书扩展，更加详细的讲述Ajax的方方面面。 内容简要给大家说明一下：Ajax简介、使用Javaｓｃｒｉｐｔ和Ajax发出异步请求、Ajax中的...
原生ajax jq跨域
weixin_30667649的博客
07-05 90
原生js封装ajax //创建XmlhttpRequest对象 function createXHR(){ var xhr=null; if(XMLHttpRequest){ xhr=new XMLHttpRequest(); }else{ xhr=new ActiveXObject("Microsoft.XM...
js 原生AJAX发送请求详解
木子小姐
06-12 1万+
使用XHR对象的基本步骤： (1)创建XHR对象 var xhr = new XMLHttpRequest( ); (2)监听XHR对象的状态改变事件 xhr.onreadystatechange = function(){ if( xhr.readyState===4){ if(xhr.status===200){ 完成且成功 } else { 完成但失败 } } } (3)打开到服务器的连接 ...
ajax请求
harder_XZ的博客
03-08 245
关于ajax Ajax全称为 “Asynchronous Javascript And XML” （异步 JavaScript 和 XML），是一种异步的数据传输技术，所谓异步就是非阻塞的，当前程序的执行和前面程序是否执行完毕没有关系。 使用ajax能实现前后台的交互，ajax有许多的优点： 1、不需要插件的⽀持，原⽣ js 就可以使⽤ 2、不需要刷新页面就可以更新数据 3、减轻了服务端和带宽的负...
看这一篇就够了！-Ajax详解
Oriental_的博客
03-15 16万+
今天来聊一聊前后端交互的重要工具Ajax 结合上次跟大家分享的前后端交互基础，如果还没有看过的童鞋，以下是传送门 前后端交互详解 AJAX - 到底什么是Ajax? ajax 全名 async javascript and XML 是前后台交互的能⼒ 也就是我们`客户端给服务端发送消息的⼯具，以及接受响应的⼯具 是⼀个 默认异步执⾏机制的功能AJAX分为同步（async = false...
Ajax
C_hydar的博客
02-11 5495
Ajax Ajax 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。 Ajax = 异步 JavaScript + XML。 Ajax 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 Ajax 用于创造动态性更强的应用程序 Ajax 可用来与数据库进行动态通...
AJAX 详解
06-19 2万+
Ajax基础知识，及常见问题详解
Ajax请求的五个步骤
热门推荐
chaopingyao的博客
06-02 17万+
Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。 2、同步与异步的区别 同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。 异步提交：当用户发送请
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
ajax 检测用户名是否被占用
01-21
try { ajax = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!=’...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax高级程序设计pdf
05-16
**Ajax高级程序设计** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新，提高了用户体验，尤其...
AJAX简介
xpmhhh的博客
03-20 6840
AJAX: 全称Asynchronous JavaScript And XML，即异步JS和XML。 通过AJAX可以在浏览器中向服务器发送异步请求。 最大的优势：无刷新的获取数据。 Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 XML: 可扩展标记语言，被设计用来传输和存储数据。 与HTML的区别：HTML中都是预定义的标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。 以前Ajax是用XML格式的字符串进行数据交换，现在已经被JSON取代了。
Ajax请求
weixin_45030426的博客
03-25 1万+
ajax请求简介： ajax是利用前端的技术，向服务器发送一个异步请求 原有的请求在请求后需要刷新整张页面，
基于贝叶斯网络BO-Transformer-BiLSTM实现负荷数据回归预测附matlab代码.rar
07-27
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
易语言 - 易语言我的世界3D源码
最新发布
07-27
易语言我的世界3D源码
AJAX技术入门讲解
"AJAX技术入门.ppt - 传智播客的AJAX教程，涵盖了AJAX的基本概念、思维方式、核心技术、应用实例、优缺点以及开发工具。" 在讲解AJAX技术之前，首先需要理解它的全称：Asynchronous JavaScript and XML（异步...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值