web前端学习笔记28-Ajax——用户体验提升者

一、Ajax简介

1.1 什么是Ajax

A javaScript a XML,是指一种创建交互式网页应用的网页开发技术,不需要刷新或者跳转页面就可以实现数据通讯。Ajax有同步和异步两种请求方式(不推荐使用同步操作)。
同步与异步

【同步与异步】
1.2 早期Ajax的应用

google地图最先将Ajax应用到极致

1.3 Ajax的应用场景

百度地图类、百度图片类、瀑布流、数据验证、实时数据请求…

1.4 Ajax的工作原理

Ajax是一种能够实现异步请求的机制,也正是这种机制的存在才能够使得页面在不刷新的基础上能够访问服务器或者刷新页面等操作

二、XHR对象

Ajax的技术实现借助浏览器提供的XHR对象,该对象是由XMLHttpRequest原型实例化而来,系统提供的是XMLHttpRequest对象原型,需实例化后使用。

<script>
	// XHR对象 XMLHttpRequest
	// 在浏览器中有构造方法和对象原型
	console.log(XMLHttpRequest);  //结果为构造方法
	console.log(XMLHttpRequest.prototype);  //对象原型
	// 实例化一个XHR对象
	var xhr=new XMLHttpRequest();
	console.log(xhr);  //对象实例
</script>
2.1 XHR对象成员属性
关键字释义
readStateXHR对象请求的状态信息码(客户端的信息代码)★
responseajax请求的响应信息对象
responseTextajax请求的响应信息字符串格式 ★
responseTypeajax请求的响应信息的格式
responseURLajax请求的响应信息地址
responseXMLajax请求的响应信息XML格式
statusajax请求的响应信息(服务器端的相应信息代码)★
statusTextajax请求的响应信息字符串
2.2 Ajax请求过程中的相关事件
关键字释义
onabort在Ajax请求中止的时候
onerror在Ajax请求出错的时候
onload在Ajax加载请求的时候
onloadend在Ajax加载请求结束的时候
onloadstart在Ajax加载请求开始的时候
onprogress在Ajax加载请求过程中的时候
onreadystatechange在请求状态改变的时候 ★
2.3 XHR对象成员方法
关键字释义
open()建立一个ajax连接 ★
open(方法字符串,请求的URL,使用异步还是同步);
send()发送一个ajax连接 ★
abort()终止一个ajax请求
setRequestHeader()设置请求的头信息
getResponseHeader()获取头信息设置
getAllResponseHeaders()获取所有头信息组成的数组

post头信息设定"Content-Type","application/x-www-form-urlencoded"
get请求与post请求
get请求: 好比发送明信片,数据会在地址栏中显示,发送数据有长度限制
post请求: 好比发送信封,数据不会在地址栏中显示,发送数据长度取决于服务器

2.4 http响应状态信息码

100系列
     表示服务器理解了请求但是没有完成需要继续操作
200系列
     表示服务器成功响应了请求
         200表示请求响应成功OK ★
300系列
     表示服务器进行了重定向操作
400系列
     表示客户端请求错误
         403 表示没有权限进行访问 ★
         404 表示找不到指定的文件 ★
500系列
     表示服务器端有错误

简单ajax流程示例代码

<body>
	<textarea>春眠不觉晓</textarea>
	<hr />
	<button id="getAjax">点击使用ajax</button>
	<script>
		// 简单ajax流程_get请求————————————————————————————
		// 文件放在D:\phpStudy\PHPTutorial\WWW目录中使用localhost/c31_Ajax.html打开
		// 获取按钮
		var ajaxBtn=document.getElementById('getAjax');
		// 事件函数
		function doAjaxGet(){
			// ajax操作流程 4步
			// 1.建立一个xhr对象
			var xhr1=new XMLHttpRequest();
			// 2.打开一个服务器链接
			// 请求方式:get post
			xhr1.open('get','a.php?age=18');
			// 3.发送请求(get不需要发送数据,post需要)
			xhr1.send(null);
			// 4.检测数据是否发送成功,检测服务器是否响应成功
			xhr1.onreadystatechange=function(){
				// 是否发送成功
				if(xhr1.readyState==4){
					// 4表示正常的请求过程成功
					// 是否响应成功
					// alert(xhr1.status);
					if(xhr1.status==200){
						// 使用服务器给我们的数据
						console.log(xhr1.responseText);
					}
				}					
			}
		}
		// 添加事件
		ajaxBtn.addEventListener('click',doAjaxGet,false);
		
		// 简单ajax流程_post请求————————————————————————————————
		// 获取按钮
		var ajaxBtn=document.getElementById('getAjax');
		// 事件函数
		function doAjaxPost(){
			// ajax操作流程 4步
			// 1.建立一个xhr对象
			var xhr2=new XMLHttpRequest();
			// 2.打开一个服务器链接
			// 请求方式:get post
			xhr2.open('post','b.php');
			// 设置post专用的头信息
			xhr2.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			// 3.发送请求(get不需要发送数据,post需要)
			xhr2.send('age=99&sex=man&hobby=sing');
			// 4.检测数据是否发送成功,检测服务器是否响应成功
			xhr2.onreadystatechange=function(){
				// 是否发送成功
				if(xhr2.readyState==4){  // 4表示正常的请求过程成功				
					// 是否响应成功
					// alert(xhr2.status);
					if(xhr2.status==200){
						// 使用服务器给我们的数据
						console.log(xhr2.responseText);
					}
				}					
			}
		}
		// 添加事件
		ajaxBtn.addEventListener('click',doAjaxPost,false);
	</script>
</body>

a.php

<?php
	echo $_GET['age'];
	echo '啦啦啦';
?>

b.php

<?php
	echo '年龄:'.$_POST['age'];
	echo '性别:'.$_POST['sex'];
	echo '爱好:'.$_POST['hobby'];
	echo '嘿嘿嘿';
?>

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值